简介
npm 包 clay-lump-actor 是一个面向前端开发人员的工具包，可用于快速实现页面中的动态效果。它提供了一组 API，让用户可以创建一个或多个动态角色（也称为“演员”），并通过这些角色对页面元素进行操作，实现一些有趣的效果。例如，可以用 clay-lump-actor 在网页上创建一个跳跳球效果，或者实现一个类似于“翻书”效果的页面切换。
安装
要使用 clay-lump-actor，首先需要在本地安装它。可以使用 npm 命令来安装它：
npm install clay-lump-actor --save
安装完成后，可以在 js 文件中通过以下方式引入：
import { Actor } from 'clay-lump-actor';使用
创建一个新的角色
使用 clay-lump-actor 创建一个新的角色非常简单，只需要调用它的构造函数即可：
const actor = new Actor({
el: '#actor',
duration: 3000,
delay: 1000,
...
});其中，el 参数指定需要绑定角色操作的页面元素，可以是一个 CSS 选择器或一个 DOM 元素；duration 和 delay 参数可用于控制动画的持续时间和延迟时间，具体含义见下文。
角色操作
创建一个角色之后，可以使用它提供的 API 对元素进行操作。以下是一些常用的操作：
移动
使用角色的 move 方法可以让元素移动，其参数包括：
x：x 轴方向的距离y：y 轴方向的距离
actor.move({ x: 100, y: 200 });缩放
使用角色的 scale 方法可以让元素缩放，其参数包括：
ratio：缩放比例
actor.scale({ ratio: 1.5 });旋转
使用角色的 rotate 方法可以让元素旋转，其参数包括：
angle：旋转角度
actor.rotate({ angle: 45 });渐隐/渐现
使用角色的 fadeIn 和 fadeOut 方法可以实现元素的渐隐和渐现效果，其中 fadeIn 接受一个可选的参数 duration，用于控制渐现的时间：
actor.fadeIn();
actor.fadeOut({ duration: 2000 });组合操作
以上操作还可以组合使用，效果会更加丰富：
actor.move({ x: 100, y: 200 })
.rotate({ angle: 45 })
.scale({ ratio: 1.5 })
.fadeOut({ duration: 1000 });动画控制
角色的动画效果会受到 duration 和 delay 参数的影响。其中，duration 表示动画的持续时间（单位为毫秒），delay 表示动画的延迟时间（单位为毫秒）。
例如，要为一个元素添加一个 3 秒钟的缩放动画，可以这样来创建一个角色：
const actor = new Actor({
el: '#actor',
duration: 3000,
delay: 0,
...
});然后调用 scale 方法即可：
actor.scale({ ratio: 1.5 });在创建角色的时候，还可以指定更多的参数以控制动画效果。例如，可以使用 easing 参数来指定缩放动画的缓动函数，或者使用 repeat 和 yoyo 参数来指定动画的重复次数和反转状态（类似于 CSS3 动画的 animation-iteration-count 和 animation-direction 属性）。
示例代码
下面是一个通过 clay-lump-actor 创建的跳跳球效果的示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- ------------------ ----- ----- - --- ------- --- -------- --------- ----- ----- ----- ------- --------- ------- --------------- --- ------------ -- ---- -- - --------- -- -- -- --- --------- -- ----- -- - --------- -- -- -- ---- ---
其中，el 参数指定了需要操作的元素（这里是一个 id 为 "ball" 的 div 元素）。duration 参数指定了每次移动的持续时间（单位为毫秒），yoyo 参数指定了动画是否反转，repeat 参数指定了动画的重复次数，easing 参数指定了动画的缓动函数（这里使用了默认值）。
通过调用 move 方法让球依次按照“右下左上”的方向运动起来，形成一个跳跳球的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596481e8991b448d6e22