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是固定的且不可修改。
扫描二维码关注公众号,回复:
1122934 查看本文章
参数上我里做了一些细微的修改,为了更加的拟合图片上的效果。
最后我做出来是这样的效果:
这个蓝色区线的图片,是我从Material官方上截图下来的
x轴方向是线性的
y轴方向,用的是贝塞尔曲线