Qt 中的动画(Animations)

Qt中的动画包含以下内容

States: 状态
Transitions: 过渡
Animations: 动画

概述

动画用户实现属性值缓慢变化到目标值，可以应用各种类型的缓动曲线。状态时一个对象的各种属性的配置的一个集合。过渡用来定义从一个状态切换到另一个状态时如何过渡，可以在过渡中包含动画来实现过渡。

动画

Animation是一个抽象类，下面定义了一些具体类用于各种情况。
包含以下几个：
4. SequentialAnimation：动画组，里面定义一系列的动画，按定义先后次序执行
5. ParallelAnimation：动画组，里面定义一系列动画，所有动画并行执行
6. AnchorAnimation：针对Anchor属性改变的动画，与State配合时，和AnchorChanges一起配合用
7. ColorAnimation：针对颜色的动画
8. NumberAnimation：针对数值类改变的动画
9. ParentAnimation：针对改变父对象的动画，与State配合时，和ParentChange一起配合用
10. PathAnimation: 创建动画是对象沿着Path对象定义的路径运动
11. PropertyAnimation：通用的属性改变的动画，与State配合时，和PropertyChanges一起配合用，（优先使用针对特定属性的动画）
12. RotationAnimation : 针对旋转的动画
13. Vector3dAnimation：针对 QVector3d数值改变的动画
14. PropertyAction：立即改变属性值到目标值，不应用动画效果
15. PauseAnimation：暂停一段时间
16. SmoothedAnimation：平滑动画，使用ease in/out quad缓动曲线
17. SpringAnimation：弹簧效果的动画
18. ScriptAction：在动画效果中执行脚本

动画的使用方式

在Transition中

Rectangle {id: rectwidth: 100; height: 100color: "red"states: State {name: "moved"PropertyChanges { target: rect; x: 50 }}transitions: Transition {PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }}
}

在Behavior中

Rectangle {width: 100; height: 100color: "red"Behavior on x { PropertyAnimation {} }MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}

作为属性值的source

Rectangle {width: 100; height: 100color: "red"SequentialAnimation on x {loops: Animation.InfinitePropertyAnimation { to: 50 }PropertyAnimation { to: 0 }}
}

在信号处理器中

MouseArea {anchors.fill: theObjectonClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
}

单独使用

Rectangle {id: theRectwidth: 100; height: 100color: "red"// this is a standalone animation, it's not running by defaultPropertyAnimation { id: animation;target: theRect;property: "width";to: 30;duration: 500 }MouseArea { anchors.fill: parent; onClicked: animation.running = true }
}

过渡

用来定义过渡动画

状态

属性配置集合：StateGroup可以支持非Item类型，State只能用于Item类型

AnchorChanges：锚定方式改变
ParentChange：父对象改变
PropertyChanges：属性改变
StateChangeScript：状态中执行脚本

Rectangle {id: signalwidth: 200; height: 200state: "NORMAL"states: [State {name: "NORMAL"PropertyChanges { target: signal; color: "green"}PropertyChanges { target: flag; state: "FLAG_DOWN"}},State {name: "CRITICAL"PropertyChanges { target: signal; color: "red"}PropertyChanges { target: flag; state: "FLAG_UP"}}]
}