Qt_QML动画（Animations）___一_qt animations

动画的解释：
动画被用于属性的改变。
一个动画定义了属性值改变的曲线， 将一个属性值变化从一个值过渡到另一个值。
动画是由一连串的目标属性活动定义的， 平缓的曲线算法能够引发一个定义时间内属性的持续变化。 所有在QtQuick中的动画都由同一个计时器来控制， 因此它们始终都保持同步， 这也提高了动画的性能和显示效果。
动画控制了属性的改变， 每个元素都有大量的属性供你任意使用。

Image {
	x: 40; y: 80
	source: "assets/rocket.png"
	
	// 动画在X轴方向上，逐步移动至240位置，每一次持续4000ms，并永远循环
	NumberAnimation on x {
		to: 240
		duration: 4000
		loops: Animation.Infinite
	}
	// 动画旋转，逐步旋转至360°，每次持续4000ms，并永远循环
	RotationAnimation on rotation {
		to: 360
		duration: 4000
		loops: Animation.Infinite
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

动画元素（Animation Elements）

基础和通用的动画元素：

• PropertyAnimation（属性动画） - 使用属性值改变播放的动画：easing.amplitude（缓冲振幅），easing.overshoot（缓冲溢出），easing.period（缓冲周期）
• NumberAnimation（数字动画） - 使用数字改变播放的动画
• ColorAnimation（颜色动画） - 使用颜色改变播放的动画
• RotationAnimation（旋转动画） - 使用旋转改变播放的动画

特殊场景使用动画：

• PauseAnimation（停止动画） - 运行暂停一个动画
• SequentialAnimation（顺序动画） - 允许动画有序播放
• ParallelAnimation（并行动画） - 允许动画同时播放
• AnchorAnimation（锚定动画） - 使用锚定改变播放的动画
• ParentAnimation（父元素动画） - 使用父对象改变播放的动画
• SmotthedAnimation（平滑动画） - 跟踪一个平滑值播放的动画
• SpringAnimation（弹簧动画） - 跟踪一个弹簧变换的值播放的动画
• PathAnimation（路径动画） - 跟踪一个元素对象的路径的动画
• Vector3dAnimation（3D容器动画） - 使用QVector3d值改变播放的动画

动画的动作元素

• PropertyAction（属性动作） - 在播放动画时改变属性
• ScriptAction（ 脚本动作） - 在播放动画时运行脚本

应用动画（Applying Animations）

• 属性动画 - 在元素完整加载后自动运行
• 属性动作 - 当属性值改变时自动运行
• 独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true（ 比如通过属性绑定）

缓冲曲线（Easing Curves）
动画的默认缓冲类型是Easing.Linear。
一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线， 所以缓冲类型定义了曲线的变化情况。

注意
不要过度的使用动画。 用户界面动画的设计应该尽量小心， 动画是让界面更加生动而不是充满整个界面。 眼睛对于移动的东西非常敏感， 很容易干扰用户的使用。

动画分组（Grouped Animations）
有两种方法来分组： ParallelAnimation（平行动画）与SequentialAnimation（连续动画）

import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    title: qsTr("Hello World")
    property int duration: 3000

	// 设置背景，天空
    Rectangle {
        id: sky
        width: root.width
        height: root.height * 2 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }

	// 设置背景，草坪
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom

        width: root.width
        height: root.height * 1 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }

	// 添加足球
    Image {
        id: ball
        x: 20; y: 240
        width: 20
        height: 20
        // 添加资源文件，否则找不到
        source: "qrc:/ball.jpg"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20; ball.y = 240
                anim.restart()
            }
        }
    }

	// 组合动画
    ParallelAnimation {
        id: anim
        // Y轴运动，上下运行
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: root.duration * 0.6
            }
        }
        // X轴运动，往左运动
        NumberAnimation { // X1 animation
            target: ball
            properties: "x"
            to: 400
            duration: root.duration
        }

        // 旋转运动
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
       }
    }
}
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

后续动画还有介绍