QT动画制作（十）

alltolove

效果：

知识点1：学会设定项目的状态State
知识点2：学会正弦运动
还是新建QT项目，然后在 / 下新建个Rect.qml文件，代码如下

import QtQuick 2.4

Item {
    MouseArea{//确定鼠标区域
        anchors.fill: parent
        onClicked: text.state="green"
    }

    Text{
        id:text
        anchors.centerIn: parent
        font.pointSize: 24//字号24
        font.bold: true//设定粗体字
        text:"I love FishC"
        state: "red"//设定初始状态为红色
        /*这是一个设定状态的数组，里面可以设置多种状态*/
        states: [State {//设定一种颜色为红色的状态
            name: "red"
            PropertyChanges {
                target: text//设定目标
                color:"red"
            }

        },
            State{
                name:"green"
                PropertyChanges{
                    target:text
                    color:"green"
                }
            }
        ]
        transitions: Transition{//设定状态变化时的动画渐变效果
                from:"red"
                to:"green"
            PropertyAnimation{
                target:text
                property:"color"
                duration:1000
            }
            }
        /*做正弦曲线运动*/
        XAnimator on x{
            from:100
            to:400
            duration:10000
            loops:Animator.Infinite
            easing.type: Easing.SineCurve
        }
        YAnimator on y{
            from:100
            to:400
            duration:5000
            loops:Animator.Infinite
            easing.type: Easing.SineCurve
        }

    }


}

main.qml文件：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent

    }
}

MainForm.ui.qml文件：

import QtQuick 2.5

Rect{}

谦虚求学

看过