贝塞尔曲线
在 web 开发中,我们经常会用动画来提高用户体验,但浏览器只提供了一个 css3 来实现动画的方式。css3 实现动画一般能满足大部分的需求,但当我们需要对动画做粗细的步长控制、暂停、重启等操作时,css3 提供的 transitionstart
/transitionend
、animationstart
/animationend
接口明显不能满足我们需求。这时,就需要一个可定制、可编辑的贝塞尔曲线工具来实现我们想要的功能。
本库提供了两个贝塞尔曲线的工具类,分别为普通的贝塞尔曲线 Bezier
和 css3 的三次贝塞尔曲线 CubicBezier
。两个类的使用方式是一致的,但 CubicBezier
类对时间因子 t
作了修正,计算结果和 css3 的表现一致,使之更符合我们的直觉。
import { CubicBezier } from '@tanbo/bezier';
const bezier = new CubicBezier(0.36, 0.66, 0.04, 1);
const div = document.getElementById('box');
let i = 0;
const fn = function() {
if (i < 100) {
i++;
// t 为当前进度百分比
const t = 1 / 100;
// result 为当前 bezier 坐标点的位置
const result = bezier.update(t);
div.style.transform = `translateX(${result.y * 400}px)`;
requestAnimationFrame(fn);
}
};
requestAnimationFrame(fn);
如果三次贝塞尔曲线不能满足你的需求,你还可以使用多次贝塞尔曲线。
import { Bezier } from '@tanbo/bezier';
// 可以传偶数个数字,且不少于4个
const bezier = new Bezier([
-.9, -.7,
-.8, .4,
.1, -.6,
.2, -1,
.5, .6,
.5, 1.3,
0, .9,
1, 1]);
const div = document.getElementById('box');
let i = 0;
const fn = function() {
if (i < 100) {
i++;
// result 为当前 bezier 坐标点的位置
const result = bezier.update(i / 100);
console.log(result);
requestAnimationFrame(fn);
}
};
requestAnimationFrame(fn);