当前位置：首页 > news >正文

Qt Quick 动画与过渡效果

news 2025/8/2 20:31:10

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}}
}