Qml中使用动画Animation
Animation是Qml中所有动画类的基类。
Qml中动画的分类
- PropertyAnimation：改变控件的属性来产生动画。
- NumberAnimation：专门改变数字类型的动画，效率优于PropertyAnimation。
- ColorAnimation：专门改变颜色的动画，效率优于PropertyAnimation。
- RotationAnimation：专门旋转的动画，效率优于PropertyAnimation。
- PathAnimation：沿给定路径的动画。
- SpringAnimation：类似弹簧运动的动画。
- SequentialAnimation：一些列组合动画。
使用方式1-指定动画的target
import QtQuick 2.0
Item {
anchors.fill: parent
Rectangle{
id:rect
y:100
width: 100
height: 100
color: "lightgreen"
}
//属性动画关联指定控件，就可以实现动画效果
PropertyAnimation {
//指定对象
target: rect
//指定属性
property: "x"
running: true
from: 0
to:400
duration:2000
loops: Animation.Infinite
}
}
使用方式2-作为信号，也需要指定target
import QtQuick 2.0
Item {
anchors.fill: parent
Rectangle{
id:rect
y:100
width: 100
height: 100
radius: 50
color: "lightgreen"
visible: false
onVisibleChanged: PropertyAnimation{
target: rect
properties: "x"
from:0
to:400
loops: Animation.Infinite
running: true
}
}
Component.onCompleted: {
rect.visible=true
}
}
使用方法3-在控件中Animation on <property>来实现
import QtQuick 2.0
Item {
anchors.fill: parent
Rectangle{
id:rect
y:100
width: 100
height: 100
radius: 50
color: "lightgreen"
PropertyAnimation on x{
from: 0
to:400
duration: 3000
loops: Animation.Infinite
}
}
}
方式3更为简洁，无需指定target和property，但该方式的running默认为true，会自动执行。
注意点
- 其它的Animation使用方式和PropertyAnimation类似，但可以通过trandformOrigin（Item属性）来设置动画的中心点。
- easing可以设置动画过渡的类型
https://blog.csdn.net/quietbxj/article/details/108285418
https://blog.csdn.net/gongjianbo1992/article/details/102135779
4.参考：
QML Book：http://qmlbook.github.io/ch05-fluid/fluid.html
文档：https://doc.qt.io/qt-5/qtquick-statesanimations-topic.html
文档：https://doc.qt.io/qt-5/qtquick-statesanimations-animations.html
