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
标签:动画,target,Animation,Qml,100,PropertyAnimation,rect From: https://www.cnblogs.com/im18620660608/p/17077337.html