缓冲曲线的作用是,控制数值变化过程中的速度。
例如,同样是让一个方块的x坐标从0移动到100,我们可以让他:
- 匀速运动过去,或者
- 先快后慢运动过去,或者
- 先慢后快的运动过去
- ...等等任意的速度曲线
QML内置了几十种常用的曲线,基本可以满足我们的日常需求。随便贴几张内置的函数曲线:(如果这些曲线满足不了你的需求,你可以使用缓冲曲线类提供的贝塞尔插值曲线,就可以随心所欲地描述你的速度曲线了)
以高中常见的物理题,平抛运动为例,看看怎么使用缓冲曲线。
在理想的平抛运动中,水平位移是匀速运动(也即速度不变的运动),垂直位移是匀加速运动(也即速度逐渐变大的运动)
那么我们就可以使用平行动画来实现演示这一运动:
//本代码用来演示 [平行动画] 和 [序列动画] 的用法
import QtQuick 2.0
Item {
id: root
width: 200
height: width
Rectangle{
id: rect
x: 0;
y: 0;
width: 30
height: width;
radius: 15
color: "green"
}
ParallelAnimation{
id: prlAni
running: mouseArea.pressed
NumberAnimation {
target: rect; property: "x";
to: 150; duration: 1000
easing.type: Easing.Linear //x坐标匀速
}
NumberAnimation {
target: rect; property: "y";
to: 300; duration: 1000
easing.type: Easing.InCubic //y坐标先慢后快
}
}
MouseArea{
id: mouseArea
anchors.fill: parent
}
}
代码解释:
使用了平行动画ParallelAnimation,也即:水平方向(X方向)匀速移动动画NumberAnimation、和竖直方向(Y方向)加速运动动画NumberAnimation,这两个动画同时播放。
running属性的true or false决定了是否播放平行动画
//本代码用来演示 [平行动画] 和 [序列动画] 的用法
import QtQuick 2.0
Item {
id: root
width: 200
height: width
Rectangle{
id: rect
x: 0;
y: 0;
width: 30
height: width;
radius: 15
color: "green"
}
ParallelAnimation{
id: prlAni
running: mouseArea.pressed
NumberAnimation {
target: rect; property: "x";
to: 300; duration: 4000
easing.type: Easing.OutCubic //x速度为:OutCubic匀减速,衰减至0
}
NumberAnimation {
target: rect; property: "y";
to: 150; duration: 2000
easing.type: Easing.OutBounce //y速度为:OutBounce反弹式曲线衰减至0
}
}
MouseArea{
id: mouseArea
anchors.fill: parent
}
}
为了是这个动画更符合实际,我把x坐标的动画时长设的比y更长,这样在y落地以后,还在x上继续水平滚动一段。
最后,需要指出的是,QT帮助文件中的缓冲曲线的示意图,描述的是位移特性,其速度特性是位移曲线的导数,例如上图的弹跳衰减曲线,QT中提供的位移曲线为:
只看这个图,是令人疑惑的,这个曲线明明是上升的,怎么实际运行出的小球是下降的呢?实际上,对这个曲线求导,得到速度曲线为:
看速度曲线才能更好地理解小球在y方向的动作。