javascript - 如何用bezier曲线实现缓冲运动？

问题描述

问 题

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

解决方案

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

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

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

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

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

實際利用

CSS3 的 animation-time-function中的 cubic-bezier 是這樣的：

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

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

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

这篇关于javascript - 如何用bezier曲线实现缓冲运动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！