Animation （动画）
是所有 QML 动画的基础，但动画类型不能直接在 QML 文件中使用。它的存在是为了提供一组通用属性和方法，这些属性和方法可用于从它继承的所有其他动画类型。尝试直接使用动画类型将导致错误。
继承人有以下几种：
| AnchorAnimation | 锚点动画 |
| Animator | 动画器 |
| ParallelAnimation |
并行动画 |
| PathAnimation | 父动画 |
| PauseAnimation | 路径动画 |
| PropertyAction | 暂停动画 |
| PropertyAnimation | 属性动画 |
| ScriptAction | 脚本操作 |
| SequentialAnimation | 顺序动画 |
属性：
| alwaysRunToEnd | 是否运行到结束 |
| loops | 循环次数（Animation.Infinite无限循环） |
| paused | 是否暂停 |
| running | 是否运行 |
信号：
| finished（） | 完成时发射信号 |
| started（） | 启动时发射信号 |
| stooped（） | 停止时发射信号 |
函数：
| complete（） | 停止动画，跳转到最终属性值 |
| pause（） | 暂停 |
| restart（） | 重新启动 |
| resume（） |
恢复 |
| start（） | 启动 |
| stop（） | 暂停 |
QML提供了多种的方式来定义一个动画：
- 使用属性值源来创建一个动画，即立刻为一个指定的属性使用动画
- 使用行为动画，当属性值改变时触发
- 在一个信号处理器中创建，当接收到一个信号时触发
- 作为一个独立动画，可以在脚本中进行开始/停止，也可以绑定到不同的对象
- 使用切换，在不同状态间提供动画
PropertyAnimation（属性动画）
属性：
| duration | 持续时间（默认250毫秒） |
| fron | 起点 |
| to | 终点 |
| target targets |
目标 多个目标 |
| property properties： |
属性 多个属性 |
| exclude：list<object> | 保存不受动画影响的项 |
easing group（缓动组）
| easing.amplitude：real | 缓和整幅 |
| easing.bezierCurve：list<real> | 缓和，贝塞尔曲线 |
| easing.overshoot ：real | 缓和过充 |
| easing.period：real | 缓和期 |
easing.type：enumeration（还有很多种请看官方文档）
| Easing.Linear | 速度恒定 |
| Easing.InQuad | （t^2） 函数的缓动曲线：从零速度加速。 |
| Easing.OutQuad | （t^2） 函数的缓动曲线：减速到零速度。 |
| Easing.InOutQuad | （t^2）加速到一半，然后减速。 |
| Easing.OutInQuad | （t^2）减速到一半，然后加速。 |
运动方向的设置：
使用on 来指定属性
- PropertyAnimation on x 沿着x轴运动
- PropertyAnimation on y 沿着y轴运动
设置属性：
- property："x" 沿着x轴运动
- property："y" 沿着x轴运动
- properties："x,y" 沿着x轴和y轴运动
使用的方法：
- 直接在信号处理器中直接创建和使用
- 控件中创建，在信号处理器中使用（需要手动调用running函数启动）
- 使用Behacior，来分别创建x和y的行为（实现鼠标点击，控件移动到鼠标位置）
直接在信号处理器中直接创建和使用
//鼠标点击控件，移动到指定位置（沿着y轴运动）
Rectangle{
id:rect1;width: 100;height: 100
color:"red";radius: 10
MouseArea{
anchors.fill:parent
onPressed: PropertyAnimation{
target: rect1 //设置使用对象
properties: "y"//沿着y轴
from:0 //起点
to:200 //终点
duration: 2000//运动时间2秒
easing.type: Easing.InOutBack//移动方式为运动到半程增加过冲，然后减少
}
}
}
//鼠标点击控件，移动到指定位置（沿着x和y轴运动）
Rectangle{
id:rect1;width: 100;height: 100
color:"red";radius: 10
MouseArea{
anchors.fill:parent
onPressed: PropertyAnimation{
target: rect1
properties: "x,y"//沿着x和y轴
from:0 //起点
to:200 //终点
duration: 2000//运动时间2秒
easing.type: Easing.InOutBack
}
}
}控件中创建，在信号处理器中使用
Rectangle{
id:rect1;width: 100;height: 100
color:"red";radius: 10
PropertyAnimation{
id:pa1
target: rect1
properties: "x,y"//沿着x和y轴
from:0 //起点
to:200 //终点
duration: 2000//运动时间2秒
easing.type: Easing.InOutBack
}
MouseArea{
anchors.fill:parent
onPressed: {
pa1.running=true//开启动画
}
}
}行为动画：
经常在一个特定的属性值改变时要应用一个动画，这样可以使用Behavior为属性改变指定一个默认的动画。
Rectangle{
id:rect1;width: 100;height: 100
color:"red";radius: 10
Behavior on x{ //x变化时，使用该行为
PropertyAnimation{
duration: 500
easing.type:Easing.InQuart
}
}
Behavior on y{ //y变化时，使用该行为
PropertyAnimation{
duration: 500
easing.type:Easing.InQuint
}
}
}
MouseArea{
anchors.fill:parent
onPressed: {
rect1.x=mouse.x
rect1.y=mouse.y
}
}切换：
使用states：State，当状态改变时，进行切换。
Rectangle{
id:rect1
width:100;height: 100;color: "red"
MouseArea{
anchors.fill: parent
onClicked: rect1.state="moved"
}
states: State{ //添加状态
name:"moved"
PropertyChanges{
target: rect1
x:50;y:50
}
}
transitions: Transition { //添加过渡
PropertyAnimation{
properties: "x,y"
duration: 1000
}
}
}属性动画元素：
以下都是继承自PropertyAnimation
- NumberAnimation 为实数和整数等数值类属性提供了高效的实现
- ColorAnimation 为颜色提供支持
- RotationAnimation 为旋转动画提供支持
- Vector3dAnimation 为矢量3D提供支持
NumberAnimation的使用：
数字动画是一种专门的属性动画，它定义在数值更改时要应用的动画。
如果 NumberAnimation 所跟踪的数字值发生不规则更改，则可能无法平滑地进行动画处理。如果是这种情况，请改用SmoothedAnimation处理。
Rectangle{
width: 100;height: 100
color: "lightBlue"
NumberAnimation on x{
to:50
duration: 1000
}
}ColorAnimation 为颜色提供支持
ColorAnimation 是一种专用的属性动画，它定义在颜色值更改时要应用的动画
ColorAnimation 可以通过多种方式应用，包括过渡、行为和属性值源
Rectangle{
id:rect
width: 100;height: 100
color: "lightBlue"
ColorAnimation on color{ //颜色从蓝色变为红色
from: "blue"
to:"red"
duration: 1000
}
}RotationAnimation 为旋转动画提供支持
旋转动画是一种专门的属性动画，用于控制动画期间的旋转方向，默认情况下，它沿数值变化的方向旋转;从 0 到 240 的旋转将顺时针旋转 240 度，而从 240 到 0 的旋转将逆时针旋转 240 度。可以设置方向属性以指定旋转发生的方向
属性：
| direction | 方向 |
| from | 开始的度数 |
| to | 结束的度数 |
direction：enumeration
| RotationAnimation.Numerical (default) | 通过在两个数字之间进行线性插值来旋转。从 10 到 350 的旋转将顺时针旋转 340 度。 |
| RotationAnimation.Clockwise | 在两个值之间顺时针旋转 |
| RotationAnimation.Counterclockwise | 在两个值之间逆时针旋转 |
| RotationAnimation.Shortest | 最短 - 沿生成最短动画路径的方向旋转。从 10 到 350 的旋转将逆时针旋转 20 度。 |
Rectangle{
id:rect1
height: 200;width: 200
x:200;y:200;color: "red"
RotationAnimation on rotation{
to:200
direction: RotationAnimation.Counterclockwise//逆时针旋转
duration: 2000
}
}参考文档：