三阶bezier曲线的公式如下, 那么如何用该公式实现缓冲运动呢?①比如我的left要从100变到1000,但是这又不是一个坐标点,该如何带入bezier曲线呢?②bezier曲线的控制点的坐标点的范围为什么都在[0,1]之间?
left
100
1000
走同样的路,发现不同的人生
比如我的left要从100变到1000,但是这又不是一个坐标点,该如何带入bezier曲线呢?
公式裡面的座標點是定義這個貝茲曲線的座標點,不是元素的座標點,動畫會根據貝茲曲線的路徑來決定當前的屬性變化值是多少
斜率越高,屬性值變化就會比較劇烈,所以依照圖上的曲線來跑 left 0 -> 100 的話,會是 快 <-> 慢 <-> 快
bezier曲线的控制点的坐标点的范围为什么都在[0,1]之间?
這裡的貝茲曲線是為了控制動畫,所以 CSS 預先設置了 起始點P0(0, 0), 結束點P3(1, 1)X軸代表時間, Y軸代表了屬性值,所以才在 0(動畫起始時間) 到 1(動畫結束時間),想成百分比會好理解些
CSS
實際利用
CSS3 的 animation-time-function中的 cubic-bezier 是這樣的:
CSS3
animation-time-function
cubic-bezier
cubic-bezier(x1, y1, x2, y2)
因為P0, P3被固定了,所以我們只能控制 P1(x1, y1), P2(x2, y2)可以用這個網站來調試:cubic-bezier.com
我直接寫了個小例子,你可以改改參數看看效果CodePen
公式裡面的座標點是定義這個貝茲曲線的座標點,不是元素的座標點,動畫會根據貝茲曲線的路徑來決定當前的屬性變化值是多少
斜率越高,屬性值變化就會比較劇烈,所以依照圖上的曲線來跑 left 0 -> 100 的話,會是 快 <-> 慢 <-> 快
這裡的貝茲曲線是為了控制動畫,所以
CSS
預先設置了 起始點P0(0, 0), 結束點P3(1, 1)X軸代表時間, Y軸代表了屬性值,所以才在 0(動畫起始時間) 到 1(動畫結束時間),想成百分比會好理解些
CSS3
的animation-time-function
中的cubic-bezier
是這樣的:因為P0, P3被固定了,所以我們只能控制 P1(x1, y1), P2(x2, y2)
可以用這個網站來調試:cubic-bezier.com
我直接寫了個小例子,你可以改改參數看看效果
CodePen