在前端开发中，动画效果经常用到，而动画效果中的缓动动画则更是常用的效果，使得动画过渡更加自然流畅。easing-coordinates 是一个基于贝塞尔曲线的缓动动画库，能够帮助开发者实现多样性的缓动动画效果。
安装
easing-coordinates 是一个 npm 包，安装很方便。在终端执行以下命令即可：
npm install easing-coordinates --save
使用
使用 easing-coordinates 很简单，只需要引入库，然后调用其中的方法即可。easing-coordinates 中有两个模块可供使用：easing 和 coordinates。
easing
easing 模块中封装了常用的缓动函数。常见的缓动函数有 linear、easeIn、easeOut、easeInOut，在 easing-coordinates 中都有对应的方法。
import { easing } from "easing-coordinates";
const progress = 0.5;
const startPoint = 0;
const endPoint = 100;
const easingType = "easeOut";
const value = easing[easingType](progress, startPoint, endPoint - startPoint, 1);
console.log(value); // 79.375从代码中可以看出，使用 easing 模块时，需要提供以下参数：
progress：当前进度，值为 0~1 之间的小数。startPoint：起始点。endPoint：结束点。easingType：缓动函数类型。
注意：startPoint 和 endPoint 一定要对应起来，否则得到的结果可能不是你想要的。
coordinates
coordinates 模块中封装了基于贝塞尔曲线的动画路径生成函数。常用的路径有二次贝塞尔曲线和三次贝塞尔曲线，easing-coordinates 中都有对应的方法。
import { coordinates } from "easing-coordinates";
const startPoint = [0, 0];
const curviness = 0.1;
const endPoint = [100, 100];
const progress = 0.5;
const value = coordinates.quadraticBezier(startPoint, curviness, endPoint, progress);
console.log(value); // [25, 25]从代码中可以看出，使用 coordinates 模块时，需要提供以下参数：
startPoint：起始点，指定为一个数组，包含 x 和 y 两个元素。curviness：曲度，值为 0~1 之间的小数。endPoint：结束点，指定为一个数组，包含 x 和 y 两个元素。progress：当前进度，值为 0~1 之间的小数。
注意：startPoint 和 endPoint 可以根据实际需求调整，而 curviness 代表曲线的曲度，在不同的取值下会得到不同的曲线路径。
如何应用
easing-coordinates 的应用场景广泛，特别是在前端开发中的动画效果实现中更是不可或缺。以下代码展示了如何应用 easing-coordinates 来实现一个弹性动画效果。
-- -------------------- ---- ------- ------ - ------- ----------- - ---- --------------------- ----- ---- - -------------------------------- -------- --------- - ----- -------- - -------------- - --------------------------- - -------------------- ----- ---------- - ----- ----- ----- -------- - ----- ----- ----- --------- - ---- ----- ---------- - ------------ ----- - - --------------------------------------- ---------- --------- ------------- ----- - - ---------------------------- -- -- -- - ---- -------------------- - ---------------- --------- - ---------- ------------------------------- - -------------------------------
从代码中可以看出，这个弹性动画是基于 easing-coordinates 的 easing 模块和 coordinates 模块实现的。其中，coordinates 模块生成弹性球的路径，而 easing 模块通过提供不同的缓动函数类型来调整动画效果。
总结
easing-coordinates 是一个非常实用的缓动动画库，具有很高的自由度和可定制性，可以帮助前端开发者快速实现各种复杂的动画效果。在实际开发中，我们可以根据自己的需求合理地使用其中的缓动函数和坐标计算函数，创造出更绚丽多彩的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066dad7108f76aa73ecab2