84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
三阶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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
公式裡面的座標點是定義這個貝茲曲線的座標點，不是元素的座標點，動畫會根據貝茲曲線的路徑來決定當前的屬性變化值是多少
斜率越高，屬性值變化就會比較劇烈，所以依照圖上的曲線來跑 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