动画（ Animations）

动画被⽤于属性的改变。⼀个动画定义了属性值改变的曲线，将⼀个属性值
变化从⼀个值过渡到另⼀个值。

//动画
    Image{
        id: imgAnim
        source: "qrc:/meng.png"

        //x属性动画
        NumberAnimation on x {
            //移动到300
            to: 300
            //持续4s
            duration: 4000
            //循环模式：无限
            loops: Animation.Infinite
        }
        //rotation属性动画
        NumberAnimation on rotation {
            //旋转到360
            to: 360
            //持续4s
            duration: 4000
            //循环模式：无限
            loops: Animation.Infinite
        }
    }

0_1527580541283_20180529_155456.gif

动画元素（ Animation Elements）

常用类

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

特殊类

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

应⽤动画（ Applying Animations）

属性动画 - 在元素完整加载后⾃动运⾏
属性动作 - 当属性值改变时⾃动运⾏
独⽴运⾏动画 - 使⽤start()函数明确指定运⾏或者running属性被设置为true

接下来我们举个例子
有三个图片，

第一个图片在程序启动后自动跑到（300，0）的位置
第二个图片在点击后跑到（300，0）的位置，使用Behavior on 检测属性变化
第三个图片在点击后跑到（300，0）的位置，通过调用动画start方法

//动画
    Column{

        Image{
            id: imgAnim
            source: "qrc:/meng.png"

            //x属性动画
            NumberAnimation on x {
                //移动到300
                to: 300
                //持续2s
                duration: 2000
                //循环模式：无限
                loops: Animation.Infinite
            }
        }

        Image{
            id: imgAnim2
            source: "qrc:/meng.png"

            //x属性动画
            Behavior on x {
                NumberAnimation{
                    //持续2s
                    duration: 2000
                }
            }
            MouseArea{
                anchors.fill: parent
                onClicked: imgAnim2.x = 300
            }
        }

        Image{
            id: imgAnim3
            source: "qrc:/meng.png"

            //x属性动画
            NumberAnimation{
                id: animX
                //作用目标
                target: imgAnim3
                //作用属性: x
                property: "x"
                //开始点
                from: 0
                //结束点
                to: 300
                //持续2s
                duration: 2000
            }
            MouseArea{
                anchors.fill: parent
                onClicked: animX.start()
            }
        }
    }

0_1527581566626_20180529_161201.gif

缓冲曲线（ Easing Curves）

属性值的改变能够通过⼀个动画来控制，缓冲曲线属性影响了⼀个属性值改变的插值算法
详细请看qt文档

其中一个例子

NumberAnimation{
    //持续2s
    duration: 2000
    // 缓冲曲线
    easing.type: Easing.InOutBack
}

0_1527581947388_5ee89d9d-efa4-40f5-875d-f8a94fd9e7a5-image.png

0_1527581995732_20180529_161922.gif

动画分组（ Grouped Animations）

如果你想执行多个动画，那么你需要动画分组

有两种⽅法来分组：平⾏与连续。你可以使⽤SequentialAnimation（连续动画）和ParallelAnimation（平⾏动画）来实现它们，它们作为动画的容器来包含其它的动画元素

ParallelAnimation（平⾏动画）

//动画分组
    Image{
        id: imgAnimGroup
        source: "qrc:/meng.png"

        ParallelAnimation{
            id: paralAnim

            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
        }

        MouseArea{
            anchors.fill: parent
            onClicked: paralAnim.start()
        }
    }

0_1527582499409_20180529_162747.gif

SequentialAnimation（连续动画）

//动画分组
    Image{
        id: imgAnimGroup
        source: "qrc:/meng.png"

        SequentialAnimation{
            id: seqAnim

            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
        }

        MouseArea{
            anchors.fill: parent
            onClicked: seqAnim.start()
        }
    }