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