javascript - 如何用bezier曲线实现缓冲运动?
怪我咯
怪我咯 2017-04-11 11:28:35
0
1
687

三阶bezier曲线的公式如下, 那么如何用该公式实现缓冲运动呢?
①比如我的left要从100变到1000,但是这又不是一个坐标点,该如何带入bezier曲线呢?
②bezier曲线的控制点的坐标点的范围为什么都在[0,1]之间?

怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(1)
左手右手慢动作

比如我的left要从100变到1000,但是这又不是一个坐标点,该如何带入bezier曲线呢?

公式裡面的座標點是定義這個貝茲曲線的座標點,不是元素的座標點,動畫會根據貝茲曲線的路徑來決定當前的屬性變化值是多少

斜率越高,屬性值變化就會比較劇烈,所以依照圖上的曲線來跑 left 0 -> 100 的話,會是 快 <-> 慢 <-> 快

bezier曲线的控制点的坐标点的范围为什么都在[0,1]之间?

這裡的貝茲曲線是為了控制動畫,所以 CSS 預先設置了 起始點P0(0, 0), 結束點P3(1, 1)
X軸代表時間, Y軸代表了屬性值,所以才在 0(動畫起始時間) 到 1(動畫結束時間),想成百分比會好理解些

實際利用

CSS3animation-time-function中的 cubic-bezier 是這樣的:

cubic-bezier(x1, y1, x2, y2)

因為P0, P3被固定了,所以我們只能控制 P1(x1, y1), P2(x2, y2)
可以用這個網站來調試:cubic-bezier.com

我直接寫了個小例子,你可以改改參數看看效果
CodePen

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template