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＜/span>: container.childrenRect.Width＜/span>

　　Height＜/span>: container.childrenRect.Height＜/span>

　　property alias text: label.text

　　property alias source: image.source

　　signal clicked

　　Column {

　　id: container

　　Image {

　　id: image

　　}

　　Text {

　　id: label

　　Width＜/span>: image.Width＜/span>

　　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()函数。这个动画自身可以比其他类型的动画更早的获取到更多的相关信息。

　　运行相关如下所示：