QML几种常用的动画元素（Animation Elements）

前言

在我们使用QML的时候，动画效果还是比较常用的。常见的几种动画效果如下。

QML常用的动画效果

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

QML特殊场景动画操作

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

QML常用动画操作

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

QML动画简单使用

      Image {
            id: img
            width: 300; height: 300;
            source: "https://img.zcool.cn/community/01d2945e4bfaeea801216518085e0b.png@1280w_1l_0o_100sh.png"
            fillMode: Image.PreserveAspectCrop
            clip: true
            anchors.top: btn1.anchors.bottom
            smooth: true

            MouseArea {
                anchors.fill: parent
                onClicked:  {
                    img.rotation += 5
                    img.transform += 0.05
                }

            }
            NumberAnimation on x {
                to: 1000
                duration: 10000
                loops: Animation.Infinite
            }

            RotationAnimation on rotation {
                to: 360
                duration: 10000
                loops: Animation.Infinite
            }
        }