在Qt5.2之后，引入Animator动画元素。这种方式可以直接所用于Qt Quick的场景图形系统，这使得基于Animator元素的动画及时在ui界面线程阻塞的情况下仍然能通过图形系统的渲染线程来工作，比传统的基于对象和属性的Animation元素能带来更好的用户视觉体验。

Animator （动画器）

动画完成后，QML 属性的值将更新。动画运行时不会更新该属性。

动画器类型可以像任何其他动画类型一样使用。

属性： 

常用的动画师：

例子：

Rectangle{
        id:rect1
        width: 100;height:100;x:100;y:100;color: "lightBlue"
        XAnimator on x{   //x轴移动
            from: 100
            to:300
            duration:5000
            loops: Animator.Infinite
        }
        YAnimator on y{   //y轴移动
            from: 100
            to:300
            duration:5000
            loops: Animator.Infinite
        }
        RotationAnimator on rotation {  //旋转
            from:0
            to:360
            duration: 5000
            loops:Animator.Infinite
        }
        ScaleAnimator on scale {   //缩放
            from:0.5
            to:1.5
            duration: 5000
            loops:Animator.Infinite
        }
        OpacityAnimator on opacity {  //透明度
            from:0.1
            to:1.0
            duration: 5000
            loops:Animator.Infinite
        }
    }

Rotation（旋转） 

旋转类型提供了一种通过旋转类型转换来旋转项目的方法

提供2D旋转，也提供3D旋转

 属性：

使用格式：

transfron：Rotation{
    .......
}
transfrom属性主要用于 Rotation

 2d效果：无需指定轴，因为默认轴是 z 轴 （）

Rectangle{
        id:rect1
        width: 100;height:100;x:200;y:200
        color: "green"
        transform: Rotation{
            origin.x:0;origin.y:0  //起点0，0
            angle:50               //旋转50°
        }
    }

3d效果：

 Rectangle{
        id:rect1
        width: 100;height:100;x:200;y:200
        color: "green"
        transform: Rotation{
            origin.x:0;origin.y:0
            axis{  //沿着y轴旋转
                x:0
                y:1
                z:0
            }
            angle:50
        }
    }

AnimatedImage（动画图像）

AnimatedImage 类型扩展了 Image 类型的功能，提供了一种播放存储为包含一系列帧的图像（如存储在 GIF 文件中的帧）的图像的动画的方法

属性：

3D旋转图像：

Rectangle{
        id:rect1
        width: 100;height:100;x:200;y:200
        color: "green"

        AnimatedImage{
            id:image1
            source:"qrc:/image/123456.gif"
        }

        transform: Rotation{
            origin.x:0;origin.y:0
            axis{  //沿着y轴旋转
                x:0
                y:1
                z:0
            }
            NumberAnimation on angle{
                from:20
                to:90
                duration: 5000
                loops:Animation.Infinite
            }
        }
    }

AnimatedSprite（动画精灵）

动画精灵提供对动画的渲染和控制，这些动画在同一图像文件中作为多个帧提供。您可以以固定速度、显示器的帧速率播放它，也可以手动前进和控制进度

属性：

函数：

例子：

 把这个分成4帧，来进行播放。

Rectangle{
        width: 260;height: 260
        AnimatedSprite{
            anchors.fill:parent
            running: true
            source:"qrc:/image/animatedsprite-loading.png"
            frameWidth: 64
            frameHeight: 64
            frameCount: 4//分成4部分
            frameDuration: 500
            interpolate: false
        }
    }