在前端开发中，动画一直是一个非常重要的部分。为了创建出流畅、生动的动画效果，我们可以选择使用现成的 npm 包来加速开发。今天我们就来讲一下 @motiz88/animated-expr-test 这个 npm 包的使用方法。
安装
在使用这个包之前，我们需要先安装它。可以通过以下命令来安装：
npm install @motiz88/animated-expr-test
安装完成后，你就可以在你的项目中引入这个包了：
import AnimatedExpr from '@motiz88/animated-expr-test'
使用
@motiz88/animated-expr-test 中提供了一个 AnimatedExpr 类，用于生成基于表达式的动画。在使用这个类之前，我们需要先准备好一些配置。
配置
首先，我们需要创建一个配置对象：
-- -------------------- ---- -------
----- ------ - -
--------- -----
------------ -
- ------- ---- ----- -- --- --- --
- ------- ---- ----- --- --- --- --
- ------- ---------- ----- -- --- - --
--
------- ----------------
-这个配置对象包含了动画的时长、动画表达式以及缓动函数。其中，表达式部分由一个数组组成，每个元素代表了一个属性的动画过程。例如，以上例子中我们定义了 x、y 和 opacity 三个属性的动画过程，它们都是从配置的起始值变化到了目标值，动画时长为 1 秒。
构建动画
有了配置对象后，我们就可以构建动画了。首先我们需要创建一个 AnimatedExpr 实例：
const expr = new AnimatedExpr(config)
通过实例化 AnimatedExpr 类，我们就可以创建一个基于表达式的动画。接下来，我们需要将这个实例绑定到某个 DOM 元素上：
const el = document.querySelector('.my-element')
expr.bind(el)这个 bind() 方法会将 expr 实例绑定到指定的 DOM 元素上，使得这个元素可以被动画所控制。
最后，我们需要启动动画：
expr.run()
这个 run() 方法会根据配置中的动画表达式，以及缓动函数，在指定的时间内（即配置中定义的动画时长），按照指定的变化规律对绑定的元素进行动画处理。
示例代码
完整代码如下：
-- -------------------- ---- -------
------ ------------ ---- -----------------------------
----- ------ - -
--------- -----
------------ -
- ------- ---- ----- -- --- --- --
- ------- ---- ----- --- --- --- --
- ------- ---------- ----- -- --- - --
--
------- ----------------
-
----- ---- - --- --------------------
----- -- - -------------------------------------
-------------
----------这个例子中，我们定义了一个基于表达式的动画，它会让类名为 my-element 的 DOM 元素在 1 秒内，从原位置变化到 (x: 100, y: 200) 的位置，并从透明度 0 变化到不透明。
我们可以通过一些简单的配置实现不同的动画效果。这个包让我们可以轻松地创建出各种基于表达式的动画，为我们加速前端开发工作，提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005774d81e8991b448eacdd