QML动画（Animator）

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

Animator （动画器）

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

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

属性： 

duration	持续时间
easing	缓和
from	开始
to	结束
target	对象

常用的动画师：

XAnimator	X动画器
YAnimator	Y动画器
ScaleAnimator	缩放动画器
OpactityAnimator	透明度动画器
RotationAnimator	旋转动画器
UnifromAnimator	同一动画器

例子：

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

Rotation（旋转） 

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

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

 属性：

angle	角度
axis.x axis.y axis.z	旋转的轴
origin.x origin.y	旋转的起点

使用格式：

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

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

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

​

3d效果：

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

​

AnimatedImage（动画图像）

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

属性：

currentFrame	当前帧
frameCount	帧数
paused	暂停
playing	保存动画图像是否正在播放
source	播放资源
speed	播放速度

3D旋转图像：

Rectangle{id:rect1width: 100;height:100;x:200;y:200color: "green"AnimatedImage{id:image1source:"qrc:/image/123456.gif"}transform: Rotation{origin.x:0;origin.y:0axis{  //沿着y轴旋转x:0y:1z:0}NumberAnimation on angle{from:20to:90duration: 5000loops:Animation.Infinite}}}

AnimatedSprite（动画精灵）

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

属性：

currentFrame	当前帧
finishBehavior	完成行为
frameCount	帧数
frameDuration	帧持续时间
frameHeight	框架高度
frameWidth	框架宽度
frameRate	帧率
frameSync	帧同步
frameX	第一帧的图像文件中的 X 坐标
frameY	第一帧的图像文件中的 Y 坐标
interpolate	true，则在精灵帧之间将进行插值，以使动画看起来更平滑（默认为true）
loops	循环（默认值为AnimatedSprite.Infinite）
paused	暂停
reverse	动画将反向播放
runing	是否具有动画效果（默认值为 true）
socure	资源

函数：

advance()	精灵动画推进一帧
pause()	暂停精灵动画
restart()	停止，然后启动精灵动画
resume()	恢复精灵动画
start()	启动精灵动画 （Qt 5.15）
stop()	停止精灵动画（Qt 5.15）

例子：

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

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