在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: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旋转
属性:
angle | 角度 |
axis.x axis.y axis.z |
旋转的轴 |
origin.x origin.y |
旋转的起点 |
使用格式:
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 文件中的帧)的图像的动画的方法
属性:
currentFrame | 当前帧 |
frameCount | 帧数 |
paused | 暂停 |
playing | 保存动画图像是否正在播放 |
source | 播放资源 |
speed | 播放速度 |
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(动画精灵)
动画精灵提供对动画的渲染和控制,这些动画在同一图像文件中作为多个帧提供。您可以以固定速度、显示器的帧速率播放它,也可以手动前进和控制进度
属性:
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: 260
AnimatedSprite{
anchors.fill:parent
running: true
source:"qrc:/image/animatedsprite-loading.png"
frameWidth: 64
frameHeight: 64
frameCount: 4//分成4部分
frameDuration: 500
interpolate: false
}
}