Qt：在QML中自定义贝塞尔动画曲线

Qt在PropertyAnimation中，已经准备了很多常用的动画曲线，比如说Linear、Quad、Elastic等。这些基本已经可以覆盖我们大部分需求了，但是也不是所有的。

比如说，google非常有名的设计风格Material，就有自己的动画曲线，如下图：



这个呢，在QML中是没有的。要实现它，最简单的方法就是自定义一个贝塞尔曲线。

别被这个名字吓到了，实际上我们要用到的就是4个数字，没有什么数学公式，而且现在都有很多的绘制工具可以直接导出这4个值。

例如，Material中已经说了，这4个值为：0.4, 0.0, 0.2, 1

分别对应：cx1, cy1, cx2, cy2

我们只要直接设置到PropertyAnimation中就可以使用了。

使用方式如下：

NumberAnimation {
id: animationForY
target: testRectangle
property: "y"
from: 482
to: 82
duration: 3000
easing.type: Easing.Bezier
easing.bezierCurve: [ 0.40, 0.05, 0.22, 0.97, 1, 1 ]
running: true
loops: Animation.Infinite
}

主要就是以下这两行

easing.type: Easing.Bezier
easing.bezierCurve: [ 0.40, 0.05, 0.22, 0.97, 1, 1 ]

告诉PropertyAnimation，要用贝塞尔曲线的动画，然后参数分别是0.40, 0.05, 0.22, 0.97, 1, 1

注意，最后的两个1是固定的且不可修改。

参数上我里做了一些细微的修改，为了更加的拟合图片上的效果。

最后我做出来是这样的效果：



这个蓝色区线的图片，是我从Material官方上截图下来的

x轴方向是线性的

y轴方向，用的是贝塞尔曲线