【qml学习笔记】4 Animation 动画_qml中yanimation相关动画

动画

有⼏种类型的动画，每⼀种都在特定情况下都有最佳的效果，下⾯列出了⼀ 些常⽤的动画：

• PropertyAnimation（属性动画）- 使⽤属性值改变播放的动画
• NumberAnimation（数字动画）- 使⽤数字改变播放的动画
• ColorAnimation（颜⾊动画）- 使⽤颜⾊改变播放的动画
• RotationAnimation（旋转动画）- 使⽤旋转改变播放的动画

Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:false
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation on x {
                to: rect1.width-40
                duration: 400
                running: rect1.running //根据属性决定动画播放
            }
            RotationAnimation on rotation {
                from:0
                to: 90
                duration: 400
                loops: Animation.Infinite //from to 才有效 只有to就不会循环
            }
            }
        MouseArea{
            anchors.fill:parent
            onClicked: parent.running = true
        }
   }
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

动画触发

动画可以通过以下⼏种⽅式来应⽤：

• 属性动画 - 在元素完整加载后⾃动运⾏
• 属性动作 - 当属性值改变时⾃动运⾏
• 独⽴运⾏动画 - 使⽤start()函数明确指定运⾏或者running属性被设置为

 Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:true
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation on x { //属性动画
                to: rect1.width-40
                duration: 400
                running: rect1.running
                }
            }
        Rectangle {
            id:rect3
            anchors.top: rect2.bottom;anchors.topMargin:10;
            color:"yellow"
            x: 40; y: 80
            width: 20 ;height:40
            Behavior on x {NumberAnimation{duration: 400}//属性动作
            }
            }
        Rectangle {
            id:rect4
            anchors.top: rect3.bottom;anchors.topMargin:10;
            color:"blue"
            x: 40; y: 80
            width: 20 ;height:40

            NumberAnimation{ //独⽴运⾏动画（注意不要写on x 否则和属性动画一样会执行一遍
                property: "x"
                target: rect4
                id:anim1
                from:40
                to: rect1.width-40
                duration: 4000
                }
            }

        MouseArea{
            anchors.fill:parent
            onClicked: {anim1.restart();rect3.x=400}

        }

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
47
48

动画曲线

通过设置 easing.type属性即可 如 easing.type:Easing.InQuad

 Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:true
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation {
                easing.type:Easing.InQuad//设置为指数型
                id:anim1;
                property: "x"
                target: rect2
                from:40
                to: rect1.width-40
                duration: 1000
                }
            }
        Rectangle {
            id:rect3
            color:"red"
            x: 40; y: 160
            width: 20 ;height:40
            NumberAnimation {
                easing.type:Easing.Linear//设置为线性
                id:anim2;
                property: "x"
                target: rect3
                from:40
                to: rect1.width-40
                duration: 1000
                }
            }
        MouseArea{
            anchors.fill:parent
            onClicked: {
                anim1.restart()
                anim2.restart()
            }

        }
}
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

​ 除了duration属性与easing.type属性，你也可以对动画进⾏微调。例如 PropertyAnimation属性，⼤多数动画都⽀持附加的easing.amplitude（缓冲 振幅），easing.overshoot（缓冲溢出），easing.period（缓冲周期），这些 属性允许你对个别的缓冲曲线进⾏微调。不是所有的缓冲曲线都⽀持这些参 数。可以查看Qt **PropertyAnimation**⽂档中的缓冲列表（easing table）来查 看⼀个缓冲曲线的相关参数。

分组动画

你可以使⽤SequentialAnimation（连续动画）和 ParallelAnimation（平⾏动画）来实现它们，它们作为动画的容器来包含其 它的动画元素。

Rectangle {
        id:root
        anchors.fill: parent;
        color:"gray"
        Rectangle{
        id:rect1
        x:40;y:40
        width:40;height: 20
        color: "red"
        //ParallelAnimation
        SequentialAnimation{
            id:anim
            NumberAnimation{
                target: rect1
                properties: "y"
                to:root.height-40
            }
            NumberAnimation{
                target: rect1
                properties: "x"
                to:root.width-40
            }
        }
        }
        MouseArea{
            anchors.fill:parent
            onClicked: {
                anim.restart()
            }

        }
}
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

嵌套动画

ParallelAnimation
        {
           id: anim1
            SequentialAnimation{
                id:anim
                NumberAnimation{
                    target: rect1
                    properties: "y"
                    to:root.height-40
                }
                NumberAnimation{
                    target: rect1
                    properties: "x"
                    to:root.width-40
                }
            }
            RotationAnimation{
                target: rect1
                properties: "rotation"
                from:0
                to:360
                loops: Animation.Infinite
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

状态过渡动画

状态

在QML中，使⽤State元素来定义状态，需要与基础元素对象（Item）的 states序列属性连接。状态通过它的状态名来鉴别，由组成它的⼀系列简单 的属性来改变元素。默认的状态在初始化元素属性时定义，并命名为“”（⼀ 个空的字符串）。

Item {
    id: root
    states: [
        State {
            name: "go"
            PropertyChanges { ... }
        },
        State {
            name: "stop"
            PropertyChanges { ... }
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

过渡

⼀系列的过渡能够被加⼊任何元素，⼀个过渡由状态的改变触发执⾏。你可 以使⽤属性的from:和to:来定义状态改变的指定过渡。这两个属性就像⼀个过 滤器，当过滤器为true时，过渡⽣效。你也可以使⽤“”来表⽰任何状态。例如 from:“”; to:"*"表⽰从任⼀状态到另⼀个任⼀状态的默认值，这意味着过渡⽤ 于每个状态的切换。

Rectangle
    {
        id:rect1
        color: "gray"
        width: 120;height: 250
        anchors.centerIn: parent
        state:"stop"
        states: [
            State {
                name: "stop"
                PropertyChanges {target:light1;color:"red"}
                PropertyChanges {target:light2;color:"black"}
            },
            State {
                name: "go"
                PropertyChanges {target:light1;color:"black"}
                PropertyChanges {target:light2;color:"green"}
            }
        ]

        transitions: [
            Transition {
            from: "*"; to: "*"
                ColorAnimation { target: light1; properties: "color"; duration: 2000 }
                ColorAnimation { target: light2; properties: "color"; duration: 2000 }
        }
        ]


        Rectangle {
            id: light1
            x: 10; y: 15
            width: 100; height: width
            radius: width/2
            color: "black"
        }
        Rectangle {
            id: light2
            x: 10; y: 135
            width: 100; height: width
            radius: width/2
            color: "black"
        }

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                if(parent.state=="stop")
                {
                    parent.state = "go"
                }
                else
                {
                    parent.state = "stop"
                }
            }

    }
}
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61