编译器:vscode
目的:为了实现商品到购物车的曲线运动,而模拟的一次小红点曲线运动
准备工作:实现小红点的曲线,需要一个公式(数学的曲线公式,物理的匀变速公式,贝塞尔曲线公式),我这儿使用的是贝塞尔曲线公式。
贝塞尔曲线算法可参考网址:贝塞尔曲线
代码
小红点运动
function init(i) {
let t = 0;
const p1 = [0, 0];
const cp = [600, 700];
const p2 = [1200, 0];
let redDot = document.createElement("div");
//为了对小红点实现模糊化,带有后缀,不要模糊化可自行更改类名
redDot.classList.add(`dot${i}`);
document.body.appendChild(redDot);
move();
function move() {
if(t > 1) {
document.body.removeChild(redDot);
return;
}
requestAnimationFrame(()=>{
let [newx, newy] = towBezier(t, p1, cp, p2);