动画的解释:
动画被用于属性的改变。
一个动画定义了属性值改变的曲线, 将一个属性值变化从一个值过渡到另一个值。
动画是由一连串的目标属性活动定义的, 平缓的曲线算法能够引发一个定义时间内属性的持续变化。 所有在QtQuick中的动画都由同一个计时器来控制, 因此它们始终都保持同步, 这也提高了动画的性能和显示效果。
动画控制了属性的改变, 每个元素都有大量的属性供你任意使用。
Image {
x: 40; y: 80
source: "assets/rocket.png"
// 动画在X轴方向上,逐步移动至240位置,每一次持续4000ms,并永远循环
NumberAnimation on x {
to: 240
duration: 4000
loops: Animation.Infinite
}
// 动画旋转,逐步旋转至360°,每次持续4000ms,并永远循环
RotationAnimation on rotation {
to: 360
duration: 4000
loops: Animation.Infinite
}
}
动画元素(Animation Elements)
基础和通用的动画元素:
- PropertyAnimation(属性动画) - 使用属性值改变播放的动画:easing.amplitude(缓冲振幅),easing.overshoot(缓冲溢出),easing.period(缓冲周期)
- NumberAnimation(数字动画) - 使用数字改变播放的动画
- ColorAnimation(颜色动画) - 使用颜色改变播放的动画
- RotationAnimation(旋转动画) - 使用旋转改变播放的动画
特殊场景使用动画:
- PauseAnimation(停止动画) - 运行暂停一个动画
- SequentialAnimation(顺序动画) - 允许动画有序播放
- ParallelAnimation(并行动画) - 允许动画同时播放
- AnchorAnimation(锚定动画) - 使用锚定改变播放的动画
- ParentAnimation(父元素动画) - 使用父对象改变播放的动画
- SmotthedAnimation(平滑动画) - 跟踪一个平滑值播放的动画
- SpringAnimation(弹簧动画) - 跟踪一个弹簧变换的值播放的动画
- PathAnimation(路径动画) - 跟踪一个元素对象的路径的动画
- Vector3dAnimation(3D容器动画) - 使用QVector3d值改变播放的动画
动画的动作元素
- PropertyAction(属性动作) - 在播放动画时改变属性
- ScriptAction( 脚本动作) - 在播放动画时运行脚本
应用动画(Applying Animations)
- 属性动画 - 在元素完整加载后自动运行
- 属性动作 - 当属性值改变时自动运行
- 独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true( 比如通过属性绑定)
缓冲曲线(Easing Curves)
动画的默认缓冲类型是Easing.Linear。
一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线, 所以缓冲类型定义了曲线的变化情况。
注意
不要过度的使用动画。 用户界面动画的设计应该尽量小心, 动画是让界面更加生动而不是充满整个界面。 眼睛对于移动的东西非常敏感, 很容易干扰用户的使用。
动画分组(Grouped Animations)
有两种方法来分组: ParallelAnimation(平行动画)与SequentialAnimation(连续动画)
import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2
Window {
id: root
visible: true
width: 480
height: 300
title: qsTr("Hello World")
property int duration: 3000
// 设置背景,天空
Rectangle {
id: sky
width: root.width
height: root.height * 2 / 3
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: root.width
height: root.height * 1 / 3
gradient: Gradient {
GradientStop { position: 0.0; color: "#00FF00" }
GradientStop { position: 1.0; color: "#00803F" }
}
}
// 添加足球
Image {
id: ball
x: 20; y: 240
width: 20
height: 20
// 添加资源文件,否则找不到
source: "qrc:/ball.jpg"
MouseArea {
anchors.fill: parent
onClicked: {
ball.x = 20; ball.y = 240
anim.restart()
}
}
}
// 组合动画
ParallelAnimation {
id: anim
// Y轴运动,上下运行
SequentialAnimation {
NumberAnimation {
target: ball
properties: "y"
to: 20
duration: root.duration * 0.4
}
NumberAnimation {
target: ball
properties: "y"
to: 240
duration: root.duration * 0.6
}
}
// X轴运动,往左运动
NumberAnimation { // X1 animation
target: ball
properties: "x"
to: 400
duration: root.duration
}
// 旋转运动
RotationAnimation {
target: ball
properties: "rotation"
to: 720
duration: root.duration
}
}
}
后续动画还有介绍