hello，各位朋友们，我又回来了，国庆浪了8天，昨天又第一天上班，一直没有更新，今天刚回过神来，准备恢复更新了。还是要学习的嘛，怎么能天天想着放假，不过话说明天又是周末。
今天继续来学习QML中的内容，截止上一篇文章，我们已经介绍了简单的图形元素和怎样布局。下面我们将学习如何控制属性的变化，怎么通过动画的方式在一段时间内来改变属性值。
动画QML是基于元素、属性与脚本的。动画被用于属性的改变，也就是值的插入。一个动画定义了属性值改变的曲线，将一个属性值变化从一个值过渡到另一个值。动画是由一连串的目标属性活动定义的，平缓的曲线算法能够引发一个定义时间内属性的持续变化。所有在QtQucik中的动画都由同一个计时器来控制，因此它们始终都保持同步，这也提高了动画的性能和显示效果。
下面的例子在x坐标和旋转属性上应用了一个简单的动画。每一次动画持续4000毫秒并且永久循环。x坐标动画展示了篮球的水平移动，旋转动画让篮球旋转了360度。这两个动画同时运行，并且在加载用户界面完成后开始。
//basketball.qml
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
Image {
x: 40; y: 80
source: "image/basketball.png"
NumberAnimation on x {
to: 500
duration: 4000
loops: Animation.Infinite
}
RotationAnimation on rotation {
to: 360
duration: 4000
loops: Animation.Infinite
}
}
}
运行效果：
现在你已经可以通过to属性和duration属性来实现动画效果。或者你也可以在scale和opacity上添加动画作为例子，集成这两个参数，你可以让篮球渐行渐远，逐渐消失。
动画元素QML中有几种类型的动画，每一种在特定情况下都有很好的效果，下面是一些常用的动画：
- PropertyAnimation——属性动画：使用属性值改变播放的动画
- NumberAnimation——数字动画：使用数字改变播放的动画
- ColorAnimation——颜色动画：使用颜色改变播放的动画
- RotationAnimation——旋转动画：使用旋转改变播放的动画
除了上面这些基本和通常使用的动画元素，QtQuick还提供了一些特殊场景下使用的动画：
- PauseAnimation——停止动画：运行暂停一个动画
- SequentialAnimation——顺序动画：允许动画有序播放
- ParallelAnimation——并行动画：允许动画同时播放
- AnchorAnimation——锚定动画：使用锚定改变播放的动画
- ParentAnimation——父元素动画：使用父对象改变播放的动画
- SmotthedAnimation——平滑动画：跟踪一个平滑值播放的动画
- SpringAnimation——弹簧动画：跟踪一个弹簧变化的值播放的动画
- PathAnimation——路径动画：跟踪一个元素对象的路径的动画
- Vector3dAnimation——3D容器动画：使用QVector3d值改变播放的动画
我们将在后面学习怎样创建一连串的动画。当使用更加复杂的动画时，我们可能需要在播放一个动画时改变一个属性或者运行一个脚本。对于这个问题，QtQuick提供了一个动作元素：
- PropertyAction——属性动作：在播放动画时改变属性
- ScriptAction——脚本动作：在播放动画时运行脚本
动画可以通过以下几种方式来应用：
- 属性动画——在元素完整加载后自动运行
- 属性动作——当属性值改变时自动运行
- 独立运行动画——使用start()函数明确指定运行或者running属性被设置为true
为了演示动画的使用方法，我们实现了ClickableImage组件并且使用了一个文本元素来扩展它。
//ClickableImage.qml
import QtQuick 2.0
Item {
id: root
width: container.childrenRect.width
height: container.childrenRect.height
property alias text: label.text
property alias source: image.source
signal clicked
Column {
id: container
Image {
id: image
}
Text {
id: label
width: image.width
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
color: "#111111"
}
}
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
}
为了给图片下面的元素定位，我们使用了Column定位器，并且使用基于列的子矩形属性来计算它的宽度和高度。我们导出了文本、图形源属性以及一个点击信号。
接下来我们使用自定义的ClickableImage组件实现三个小火箭，并且让三个火箭位于相同的y=200坐标上，然后让它们分别以不同的方法移动到y=40的位置。
代码如下：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
ClickableImage {
id: rocket1
x: 40; y: 200
source: "image/rocket.png"
text: "animation on property"
NumberAnimation on y {
to: 40;
duration: 4000
}
}
ClickableImage {
id: rocket2
x: 240; y: 200
source: "image/rocket.png"
text: "behavior on property"
Behavior on y {
NumberAnimation {
duration: 4000
}
}
onClicked: y = 40
//或者可以使用随机数
//onClicked: y = 40 Math.random() * (205 - 40)
}
ClickableImage {
id: rocket3
x: 440; y: 200
source: "image/rocket.png"
text: "standalone animation"
onClicked: anim.start()
NumberAnimation {
id: anim
target: rocket3
properties: "y"
from: 200
to: 40;
duration: 4000
}
}
}
rocket1使用了Animation on属性变化策略。动画会在界面加载完成以后立即播放。
rocket2使用了behavior on属性行为策略。这个行为告诉属性值每时每刻都在变化，通过动画的方式来改变这个值。可以使用行为元素的enabled:false来设置行为失效。当你点击这个火箭时它就开始运行
rocket3火箭使用standalone animation独立动画策略。这个动画由一个私有的元素定义并且可以写在文档的任何地方。点击火箭调用动画函数start()来启动动画。每一个动画都由start()、stop()、resume()、restart()函数。这个动画自身可以比其他类型的动画更早的获取到更多的相关信息。
运行相关如下所示：
