动画（ 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()
        }
    }

0_1527582581310_20180529_162853.gif

源代码

Fork me on Gitee