QML进阶教程：一、动画元素与应用

前言：

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

常用动画：

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

其他动画：

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

动画元素：

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

代码实例：

// animationtypes.qml

import QtQuick 2.0
//根元素
Item {
    id: root
    width: 400; height: 420

    Image { 
    //指定背景图位置
        anchors.centerIn: parent
        source: "assets/background.png"
    }


    //M4>> 
    //鼠标区域为根元素区域
    MouseArea {
        anchors.fill: parent 
        //鼠标点击事件，重置三个图片的y值
        onClicked: {
            rocket1.y = rocket2.y = rocket3.y = 205
        }
    }
    //<<M4

    //M1>> 
    //Animation on 属性变化的策略，动画会在加载完成后立即播放。
    ClickableImageV3 {
        id: rocket1
        x: 40; y: root.height-height
        source: "assets/rocket.png"
        text: "animation on property" 
        //数值改变，y值在4S时间（4000ms）内到达40
        NumberAnimation on y { 
            to: 40; duration: 4000
        }
    }
    //<<M1

    //M2>> 
    //behavior on 属性行为策略个行为告诉属性值每时每刻都在变化，通过动画的方式来改变这个值。可以使用行为元素 
    //enabled : false来设置行为失效。
    ClickableImageV3 {
        id: rocket2
        x: 152; y: root.height-height
        source: "assets/rocket.png"
        text: "behavior on property"
        Behavior on y {
            NumberAnimation { duration: 4000 }
        }

        onClicked: y = 40
        // random y on each click
//        onClicked: y = 40+Math.random()*(205-40)
    }
    //<<M2

    //M3>> 
    //standalone animation独立动画策略 
    /*这个动画由一个私有的元素定义并且可以写在文档的任何地方。点击火箭调用动画函数start()来启动动画。 
    每一个动画都有start()，stop()，resume()，restart()函数。这个动画自身可以比其他类型的动画更早 
    的获取到更多的相关信息。我们只需要定义目标和目标元素的属性需要怎样改变的一个动画。 
    我们定义一个to属性的值，在这个例子中我们也定义了一个from属性的值允许动画可以重复运行。*/ 
    ClickableImageV3 {
        id: rocket3
        x: 264; y: root.height-height
        source: "assets/rocket.png"
        onClicked: anim.start()
//        onClicked: anim.restart()

        text: "standalone animation"

        NumberAnimation {
            id: anim
            target: rocket3
            properties: "y"
            to: 40
            duration: 4000
        }
    }
    //<<M3

}

另一个启动/停止一个动画的方法是绑定一个动画的running属性。当需要用户输入控制属性时这种方法非常有用：

NumberAnimation {
...
// animation runs when mouse is pressed
running: area.pressed
} M
ouseArea {
id: area
}

源码链接：

链接：https://pan.baidu.com/s/1QglAEQgc5LpVOmKmwZfwEA 密码：we2n