参考官方文档:https://doc.qt.io/qt-5/qml-qtquick-animation.html
所有动画类型都是继承自Animation,这些动画类都有AnchorAnimation, Animator, ParallelAnimation, ParentAnimation, PathAnimation, PauseAnimation, PropertyAction, PropertyAnimation, ScriptAction, SequentialAnimation
拿PropertyAnimation类型举例:
import QtQuick 2.13
import QtQuick.Window 2.13
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Test Animation")
property var colorList: ["white", "aqua", "burlywood", "cadetblue", "coral"]
property var colorIdx: 0
Rectangle{
id: rect
anchors.centerIn: parent
width: parent.width
height: parent.height
color: colorList[colorIdx]
PropertyAnimation{
id: animation
target: rect
properties: "width"
from: 0
to: root.width
duration: 3000
easing.type: Easing.Linear
}
MouseArea{
anchors.fill: parent
onClicked: {
root.color = rect.color
colorIdx = (colorIdx + 1) % colorList.length
animation.start()
}
}
}
}
其作用是点击rect时会切换rect的背景颜色,动画效果是让rect 的width值从0变到640(root.width),用时3000毫秒,变化趋势是线性变化。由于rect使用了anchors居中,所以这个动画会类似开幕的效果。
网友评论