QML系列教程(7)-缓冲曲线easing+平抛运动+反弹运动

缓冲曲线的作用是，控制数值变化过程中的速度。

例如，同样是让一个方块的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方向的动作。