1. 所有动画的基类Animation
Animation动画类型不能直接在QML文件中使用。它的存在是为了提供一组通用的属性和方法,可用于继承自它的所有其他动画类型。直接使用Animation类型会导致错误,类似C++的抽象类。
1.1 Animation类型的常用属性
- loops:int 设置当前动画循环的次数
- paused:bool 表示当前动画是否暂停,可读可写,功能与stop()pause()类似
- running:bool 标识当前动画是否正在运行
2. Animation动画类型的常用子类
下述列出的动画均是Animation的子类
2.1 锚定转场动画AnchorAnimation
AnchorAnimation:一般用于在锚定布局发生变化时候的转场动画,当在转换中使用锚定动画时,它将对状态更改期间发生的任何锚定更改进行动画处理。这可以通过使用AnchorChanges设置特定的目标项来覆盖。目标属性。 注意:AnchorAnimation只能在Transition中使用,并与AnchorChange一起使用。它不能用于行为和其他类型的动画
2.2 并列式动画ParallelAnimation
定义在并列式动画对象内的几组动画在播放时没有先后顺序,都会同时播放,并列式动画同时也支持内嵌序列式动画组和单个动画
2.3 序列式动画SequentialAnimation
与并列式相反,定义在序列式动画内的动画会按照动画创建的先后顺序依次执行,与并列式动画都可以理解为是单个动画的容器类动画。
2.4 属性动画PropertyAnimatio
和对象属性相关的动画,可以定义属性的值按照某种已知曲线从
from
到to
的转换,PropertyAnimation被NumberAnimation,RotationAnimation和ColorAnimation所继承
2.5 路径动画PathAnimation
定义和路径相关的动画,与Path和Transaction共同使用,定义路径动画
3. 关于动画的重要属性
3.1 easing动画缓冲曲线
一般地,在动画运行时,运行规律不都是线性的,有时候需要让动画按某种曲线斜率变化着运行,这时就需要指定动画的easing属性,Qt内置许多动画曲线,保证动画运行的多样性
3.2 target动画运行的目标对象
在PropertyAnimation中,往往需要运行动画的目标对象,表示属性值的改变是该目标对象的属性值
3.3 property属性指定
一般地,目标对象的属性不止一个,在指定属性动画时,需要明确动画改变哪个属性,就是用property,也可一次指定多个属性,使用properties指定
3.4 duration单次动画运行时长
指定当前动画从开始到结束运行的时间,单位ms,对于特殊的动画,有时还需要指定动画的振幅,周期,超调信息等等
3.5 from属性
标志当前动画的初始值
3.6 to属性
标志当前动画的结束值
4 经典案例:使用动画描绘足球运动轨迹
基本代码如下
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
id:root
visible: true
width: 1500
height: 300
title: qsTr("Window Test")
flags: Qt.FramelessWindowHint
y:1200
//准备地面和天空
Rectangle {
id: sky
width: parent.width
height: 200
gradient: Gradient {
GradientStop { position: 0.0; color: "#0080FF" }
GradientStop { position: 1.0; color: "#66CCFF" }
}
}
Rectangle {
id: ground
anchors.top: sky.bottom
anchors.bottom: root.bottom
width: parent.width
color:"#00802F"
// gradient: Gradient {
// GradientStop { position: 0.0; color: "#00FF00" }
// GradientStop { position: 1.0; color: "#00802F" }
// }
}
//准备足球
Image {
id: ball
x: 20; y: 240
source: "qrc:/images/ball.png"
MouseArea {
anchors.fill: parent
onClicked: {
ball.x = 20; ball.y = 240
anim.restart()
}
}
}
//准备序列动画
ParallelAnimation {
id: anim
SequentialAnimation {
NumberAnimation {
target: ball
properties: "y"
to: 20
duration: 2000
easing.type: Easing.OutCirc
}
NumberAnimation {
target: ball
properties: "y"
to: 240
duration: 2000
easing.type: Easing.OutBounce
}
}
SequentialAnimation{
NumberAnimation {
target: ball
properties: "x"
to: 400
duration: 2000
easing.type: Easing.Linear
}
NumberAnimation {
target: ball
properties: "x"
to: 650
duration: 2000
easing.type: Easing.Linear
}
}
RotationAnimation {
target: ball
properties: "rotation"
to: 720
duration: 4000
easing.type: Easing.Linear
}
}
}