Qt之Qml第二章states与transitions动画效果制作_qml states

5、QML-states与transitions动画效果制作

5.1 states 设置颜色状态 状态机的使用

用法1：通过鼠标点击和释放事件，改变矩形框颜色状态。
示例代码:

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("MY QML")
    color: "white"

    Rectangle{
        id:root
        width: 100
        height: 100
        color: "black"  //生成一个黑色的100*100矩形框
        state: "normal" //设置默认状态
        states: [       // 注意这里这个符号不要写错[]
            State {
                name: "normal"
                PropertyChanges {  target: root; color: "black"}   //还可以改变宽度和高度状态 width：200 height：200
            },
            State {
                name: "red_color"
                PropertyChanges {  target: root; color: "red"}//通过PropertyChanges改变当前控件颜色
            },
            State {
                name: "blue_color"
                PropertyChanges {
                    target: root
                    color: "blue"
                }
            }
        ]
    }

    MouseArea{ // 鼠标点击事件
        anchors.fill: parent
        onPressed: {  //鼠标点击改变颜色
            root.state = "red_color" //设置状态
        }
        onReleased: { //鼠标松开改变颜色
            root.state = "blue_color"
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

用法2：设置点击矩形框颜色从蓝色渐变为绿色，时间为两秒 手动启动状态改变
示例代码：

Rectangle{
        id: flashingblod
        width: 100
        height: 100
        color: "blue"
        opacity: 1.0     //设置透明度

        MouseArea{  //鼠标的捕获事件
            anchors.fill: parent
            onClicked: {
                animateColor.start()   //开启了两个动画效果
                animateOpacity.start()
            }
        }
        PropertyAnimation{   //动画效果的属性
            id:animateColor
            target: flashingblod
            properties: "color"
            to:"green"      //设置颜色
            duration: 1000   //设置持续时间
        }

        NumberAnimation{   //动画效果的数值
            id:animateOpacity
            target: flashingblod
            properties: "opacity"  //透明度从0.1渐变为1.0持续时间为两秒
            from: 0.1
            to:1.0
            duration: 2000  //持续时间两秒
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

用法3：自动启动状态改变可以通过on属性来使属性立即修改
示例代码：

Rectangle{
        id:rect
        width: 100
        height: 100
        color: "red"
        //通过on属性直接使当前控件属性立即修改
        PropertyAnimation on x{ //x和y就是修改当前控件的位置
            to: 100
            duration: 1000 // 修改持续时间
        }
        PropertyAnimation on y{
            to: 100
            duration: 1000 // 修改持续时间
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

用法4：按顺序执行我们需要改变的动画
示例代码：

Rectangle{
        width: 100
        height: 100
        color: "red"

        SequentialAnimation on color { //SequentialAnimation按顺序来播放我们需要执行的动画

            ColorAnimation {   //ColorAnimation来控制颜色
                //from: "white"
                to: "yellow"
                duration: 1000
            }

            ColorAnimation {
                //from: "white"
                to: "blue"
                duration: 1000
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5.2 transitions

通过transitions做一个动画效果，加上他之后颜色不会直接变化，而是有一秒钟的恢复效果，产生一种渐变效果
示例代码：

Rectangle{
        width: 75;
        height: 75;
        id: button
        state: "RELEASED"

        MouseArea{ //鼠标事件
            anchors.fill: parent
            onPressed: button.state = "PRESSED"  //通过点击释放切换状态
            onReleased: button.state = "RELEASED"
        }
        states: [
            State {
                name: "PRESSED"
                PropertyChanges {
                    target: button
                    color: "lightblue"
                }
            },
            State {
                name: "RELEASED"
                PropertyChanges {
                    target: button
                    color: "lightsteelblue"
                }
            }
        ]
        transitions: [   //状态过度动画
            Transition {
                from: "PRESSED" //表示两个状态的切换
                to: "RELEASED"  //从某一个状态切换到某一个状态他的效果是什么
                ColorAnimation {
                    target: button
                    duration: 100
                }
            },
            Transition {
                from: "RELEASED"
                to: "PRESSED"
                ColorAnimation {
                    target: button
                    duration: 100
                }
            }
        ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

5.3 Behavior 预先做一效果在值修改后就会触发

加入了弧度变化，使一个方形变成圆形，并使用Behavior做一个预处理，值发生改变后，做出一个动画效果
示例代码：

Rectangle{
            width: 75;
            height: 75;
            radius: width //做一个弧度形成一个圆
            id: ball
            color: "salmon"
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    ball.x += 50;
                    ball.y += 50;
                }
            }
            //Behavior 预先做一效果在值修改后就会触发
            Behavior on x{
                NumberAnimation{
                    id:bouncebehavior
                    easing{
                        type: Easing.OutElastic
                        amplitude:  1.0
                        period: 0.5
                    }
                }
            }
            Behavior on y{
                animation: bouncebehavior
                }
            Behavior{

                ColorAnimation {
                    target: ball
                    duration: 100
                }
            }
    }
            animation: bouncebehavior
                }
            Behavior{

                ColorAnimation {
                    target: ball
                    duration: 100
                }
            }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45