河北建设网网站百度推广
在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属性主要用于 Rotation2d效果：无需指定轴，因为默认轴是 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}}