參考官方文檔: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居中鳍烁,所以這個動畫會類似開幕的效果叨襟。