QML 学习摘录 04 - 动画

动画

动画被⽤于属性的改变。⼀个动画定义了属性值改变的曲线，将⼀个属性值变化从⼀个值过渡到另⼀个值。动画是由⼀连串的目标属性活动定义的，平缓的曲线算法能够引发⼀个定义时间内属性的持续变化。所有在QtQuick中的动画都由同⼀个计时器来控制，因此它们始终都保持同步，这也提⾼了动画的性能和显⽰效果。

1.动画元素(Animation Elements)

常用动画:

PropertyAnimation 属性动画
NumberAnimation 数字动画
ColorAnimation 颜色动画
RotationAnimation 旋转动画

特殊场景动画：

PauseAnimation 停止动画-运行暂停一个动画
SequentialAnimation 顺序动画- 允许动画有序播放
ParallelAnimation 并行动画-语序动画同时播放
AnchorAnimation 锚定动画
ParentAnimation 父元素动画-使用父对象改变播放的动画
SmoothedAnimation 平滑动画
SpringAnimation 弹簧动画
Vector3dAnimation 3D容器动画

2. 应用动画（Applying Animations）

动画可以通过以下三种方式来应用：
- 1. 属性动画：在元素完整加载后自动运行
- 2. 属性动作：当属性值改变时自动运行
- 3. 独立运行动画：使用start()函数明确指定运行或running属性设置为true

示例代码：三种方式实现图片位移动画

import QtQuick 2.3

Rectangle {
    id: root
    width: 800;height: 800
    border.color: "gray"
    MyImage{
        id:image1
        width: 100
        height: 100
        x:20;y:500
        text:"animation on property"
        NumberAnimation on y{//1 属性动画：在元素完整加载后自动运行
             to: 40;duration: 4000
        }
        onClicked: { y=500;}
    }
    MyImage{
        id:image2
        width: 100
        height: 100
        x:150;y:500
        text:"behavior on property"
        Behavior on y{//2 属性动作
            /*该行为告诉属性值每时每刻在变化*/
             NumberAnimation{ duration: 4000}
        }
        onClicked: { y=40+Math.random()*(500-40);}
    }
    MyImage{
        id:image3
        width: 100
        height: 100
        x:280;y:500
        text:"standalone animation"
        onClicked: {//3独立动画 
             anim.start()
        }
        /*该动画为私有元素，可以写在文档任何地方 有start() stop() resume() restart()*/
        NumberAnimation{
            id:anim
            target:image3
            properties: "y"
            from:500
            to: 40
            duration: 4000
        }
    }
}

4. 缓冲曲线

缓冲曲线（Easing Curves）属性可以影响属性变化的插值曲线（插值算法）。动画都使用一种线性插值算法，默认缓冲类型为Easing.Linear。在⼀个⼩场景下的x轴与y轴坐标改变可以得到最好的视觉效果。⼀个线性插值算法将会在动画开始时使⽤from的值到动画结束时使⽤的to值绘制⼀条直线，所以缓冲类型定义了曲线的变化情况。精⼼为⼀个移动的对象挑选⼀个合适的缓冲类型将会使界⾯更加⾃然，例如⼀个页⾯的滑出，最初使⽤缓慢的速度滑出，然后在最后滑出时使⽤⾼速滑出，类似翻书⼀样的效果。
缓冲曲线有以下几种：
“Linear”, “InExpo”, “OutExpo”, “InOutExpo”, “InOutCubic”, “SineCurve”, “InOutCirc”, “InOutElastic”, “InOutBack”, “InOutBounce”等…
这里写图片描述

示例程序：使用Repeater创建多个图片按钮，每个代表一种缓冲曲线，点击图片按钮，方块平移动画以不同的效果呈现。

Rectangle {
    id: root
    width: 800;height: 800
    border.color: "gray"
    property variant easings: ["Linear", "InExpo", "OutExpo", "InOutExpo", "InOutCubic","SineCurve", "InOutCirc", "InOutElastic", "InOutBack", "InOutBounce"]
    Grid{
        id:container
        y:50
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 10
        height: 600
        columns: 5
        spacing:16
        Repeater{
            model:easings
            MyImage{
                width: 100; height: 100
                framed: true
                text:modelData
                onClicked: {
                    anim.easing.type = modelData
                    anim.restart()
                }
            }
        }
    }
    Text{
        text:"不同缓冲属性下，动画效果展示:"
        font.pixelSize: 30
        anchors.centerIn: parent
    }
    Rectangle{
        id:square
        x:40;y:550
        width:90; height: 90
        color:"red"
    }
    NumberAnimation{
        id:anim
        target: square
        from:40;to:root.width - 40 -square.width
        properties: "x"
        duration: 2000
    }
}

3. 动画分组

通常使⽤的动画⽐⼀个属性的动画更加复杂。例如你想同时运⾏⼏个动画并把他们连接起来，或者在⼀个⼀个的运⾏，或者在两个动画之间执⾏⼀个脚本。动画分组提供了很好的帮助，作为命名建议可以叫做⼀组动画。有两种⽅法来分组：平⾏与连续。你可以使⽤SequentialAnimation（连续动画）和ParallelAnimation（平⾏动画）来实现它们，它们作为动画的容器来包含其它的动画元素。
这里写图片描述

代码示例：动画容器的使用

ParallelAnimation {//平行动画，包含动画X,Y,Z
    id: anim
    SequentialAnimation {//顺序动画X
        // 包含动画1 动画2...
    }
    NumberAnimation { 
        // 动画Y
    }
    RotationAnimation {//动画Z
        target: ball
        properties: "rotation"
        to: 720
        duration: root.duration
    }
}