Qt Quick 提供了強大而靈活的動畫系統，使開發者能夠輕松創建流暢、引人入勝的用戶界面。從簡單的屬性變化到復雜的多元素協同動畫，Qt Quick 提供了多種實現方式。本文將深入解析 Qt Quick 動畫與過渡效果的核心技術和最佳實踐。

一、基礎動畫類型

1. 數字動畫 (NumberAnimation)

import QtQuick 2.15Rectangle {id: animatedRectwidth: 100height: 100color: "blue"x: 50y: 50// 位置動畫NumberAnimation {target: animatedRectproperty: "x"to: 250duration: 1000  // 動畫持續時間（毫秒）easing.type: Easing.InOutQuad  // 緩動曲線loops: Animation.Infinite  // 無限循環running: true  // 立即啟動}
}

2. 顏色動畫 (ColorAnimation)

import QtQuick 2.15Rectangle {id: colorRectwidth: 100height: 100x: 50y: 50// 顏色動畫ColorAnimation {target: colorRectproperty: "color"from: "red"to: "blue"duration: 2000loops: Animation.Infiniterunning: true}
}

3. 旋轉動畫 (RotationAnimation)

import QtQuick 2.15Rectangle {id: rotatingRectwidth: 80height: 80color: "green"x: 50y: 50transform: Rotation {origin.x: width/2origin.y: height/2angle: 0}// 旋轉動畫RotationAnimation {target: rotatingRect.transformproperty: "angle"to: 360duration: 3000loops: Animation.Infiniterunning: true}
}

二、復合動畫

1. 序列動畫 (SequentialAnimation)

import QtQuick 2.15Rectangle {id: sequentialRectwidth: 100height: 100color: "purple"x: 50y: 50// 序列動畫SequentialAnimation {id: seqAnimationrunning: trueloops: Animation.Infinite// 第一個動畫：向右移動NumberAnimation {target: sequentialRectproperty: "x"to: 250duration: 1000}// 第二個動畫：改變顏色ColorAnimation {target: sequentialRectproperty: "color"to: "yellow"duration: 500}// 第三個動畫：向左移動NumberAnimation {target: sequentialRectproperty: "x"to: 50duration: 1000}// 第四個動畫：恢復顏色ColorAnimation {target: sequentialRectproperty: "color"to: "purple"duration: 500}}
}

2. 并行動畫 (ParallelAnimation)

import QtQuick 2.15Rectangle {id: parallelRectwidth: 100height: 100color: "orange"x: 50y: 50// 并行動畫ParallelAnimation {id: paraAnimationrunning: trueloops: Animation.Infinite// 水平移動NumberAnimation {target: parallelRectproperty: "x"from: 50to: 250duration: 2000easing.type: Easing.SineCurve}// 垂直移動NumberAnimation {target: parallelRectproperty: "y"from: 50to: 150duration: 1000easing.type: Easing.SineCurve}// 大小變化NumberAnimation {target: parallelRectproperty: "width"from: 100to: 150duration: 1500easing.type: Easing.SineCurve}}
}

三、狀態與過渡

1. 基本狀態轉換

import QtQuick 2.15Rectangle {id: toggleButtonwidth: 100height: 50color: "gray"radius: 25property bool checked: falseRectangle {id: handlewidth: 40height: 40color: "white"radius: 20x: checked ? 55 : 5y: 5}MouseArea {anchors.fill: parentonClicked: {toggleButton.checked = !toggleButton.checked}}states: [State {name: "checked"when: toggleButton.checkedPropertyChanges {target: toggleButtoncolor: "green"}PropertyChanges {target: handlex: 55}}]transitions: [Transition {from: ""to: "checked"reversible: trueNumberAnimation {target: handleproperty: "x"duration: 300easing.type: Easing.InOutQuad}ColorAnimation {target: toggleButtonproperty: "color"duration: 300}}]
}

2. 多狀態轉換

import QtQuick 2.15Rectangle {id: multiStateRectwidth: 100height: 100color: "blue"x: 50y: 50states: [State {name: "small"PropertyChanges {target: multiStateRectwidth: 50height: 50color: "red"}},State {name: "large"PropertyChanges {target: multiStateRectwidth: 150height: 150color: "green"}}]transitions: [Transition {from: "*"to: "*"NumberAnimation {properties: "width,height"duration: 500easing.type: Easing.InOutCubic}ColorAnimation {property: "color"duration: 500}}]MouseArea {anchors.fill: parentonClicked: {if (multiStateRect.state === "")multiStateRect.state = "small"else if (multiStateRect.state === "small")multiStateRect.state = "large"elsemultiStateRect.state = ""}}
}

四、動畫觸發器與控制

1. 動畫觸發器 (Behavior)

import QtQuick 2.15Rectangle {id: behaviorRectwidth: 100height: 100color: "purple"x: 50y: 50// 為 x 屬性添加行為Behavior on x {NumberAnimation {duration: 500easing.type: Easing.OutBounce}}// 為 y 屬性添加行為Behavior on y {NumberAnimation {duration: 300easing.type: Easing.InOutQuad}}MouseArea {anchors.fill: parentonClicked: {behaviorRect.x = Math.random() * 200 + 50behaviorRect.y = Math.random() * 200 + 50}}
}

2. 動畫控制

import QtQuick 2.15
import QtQuick.Controls 2.15Rectangle {id: animationControlwidth: 300height: 200color: "white"Rectangle {id: controlledRectwidth: 50height: 50color: "blue"x: 50y: 75}NumberAnimation {id: rectAnimationtarget: controlledRectproperty: "x"from: 50to: 200duration: 1000easing.type: Easing.InOutQuad}Row {anchors {bottom: parent.bottomhorizontalCenter: parent.horizontalCenterbottomMargin: 20}spacing: 10Button {text: "播放"onClicked: rectAnimation.start()}Button {text: "暫停"onClicked: rectAnimation.pause()}Button {text: "停止"onClicked: rectAnimation.stop()}Button {text: "反向"onClicked: rectAnimation.reverse()}}
}

五、粒子系統

1. 簡單粒子效果

import QtQuick 2.15
import QtQuick.Particles 2.15Rectangle {id: particleSystemwidth: 400height: 300color: "black"// 粒子系統ParticleSystem {id: systemanchors.fill: parent}// 發射器ImageParticle {id: particlessystem: systemsource: "qrc:/images/particle.png"  // 粒子圖片lifeSpan: 3.0lifeSpanVariation: 1.0size: 10sizeVariation: 5color: "white"opacity: 0.8}// 發射器位置Emitter {id: emittersystem: systemx: parent.width / 2y: parent.height - 20width: 100height: 10emitRate: 50velocity: AngleDirection {angle: -90angleVariation: 30magnitude: 100magnitudeVariation: 50}acceleration: PointDirection {x: 0y: -50}}// 重力效果Gravity {id: gravitysystem: systemmagnitude: 20direction: 90  // 向下}// 鼠標交互MouseArea {anchors.fill: parentonPositionChanged: {emitter.x = mouse.x}}
}

六、總結

Qt Quick 動畫系統提供了豐富的工具和技術：

1. 基礎動畫：數字動畫、顏色動畫、旋轉動畫等實現簡單屬性變化。
2. 復合動畫：序列動畫和并行動畫組合多個動畫效果。
3. 狀態與過渡：通過狀態定義 UI 外觀，通過過渡定義狀態間的動畫。
4. 動畫控制：使用 Behavior、Animation 等實現對動畫的精細控制。
5. 粒子系統：創建復雜的物理效果和視覺特效。

通過合理運用這些技術，開發者可以為應用程序添加流暢、自然的動畫效果，提升用戶體驗，使界面更具吸引力和交互性。同時，Qt Quick 動畫系統在性能上進行了優化，能夠高效運行在各種設備上。