在前端开发中，动画呈现是非常常见的需求，一个常用的解决方案是通过使用 Adobe After Effects 制作动画，再通过插件生成 web 动画。而 bodymovin 就是一个能将 After Effects 动画导出为 JSON 文件的开源插件，这个 npm 包 bodymovin-angular 则是为了在 Angular 中方便使用 bodymovin 做的一个封装。
安装
可以通过 npm 安装 bodymovin-angular。
npm install bodymovin-angular
使用
首先，在需要使用动画的组件或页面中，引入 bodymovin-angular 和 bodymovin。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ ----------------- ---- -------------------- ------ - ---------------- - ---- ------------------------------------- ------ - -- ------------- ---- -------------------------- ------------ --------- ---------------- ------------ ----------------------------- ---------- ----------------------------- -- ------ ----- ------------------ ---------- ------ - ----------------- ---- -------------- ---- ----- ---- ------------------- ----------------- ----------------- - - ---------- - ------------------- - -------------- ---------------------- - - ---------------- ------------------- ------- ----- ----------- ---- --- ---------- - ----------------------------- -
在这个例子中引入了 animationData，它就是我们使用 After Effects 并转化为 JSON 后的动画数据。
然后，我们需要在模板中引用 bodymovin 指令，具体可以参考以下代码：
<div bodymovin [options]="animationOptions" (animationCreated)="anim = $event" (animFinished)="onAnimationFinished($event)"></div>
注意：我们的动画数据是通过属性绑定传递的。属性 animationCreated 和 animFinished 是 bodymovin-angular 的自定义事件，分别是 animation 实例已经创建和动画播放完毕的回调。同时，当 bodymovin 指令和 options 属性被一起应用于 DOM 元素时，具有相同属性名的 DOM 元素将被创建为一个新的动画。
这里的 animationOptions 包含了我们的动画数据、循环和自动播放属性。使用 bodymovin-service，我们初始化了 anim 实例，以备后续操作。
最后，我们需要在组件中定义完成动画的回调逻辑：
onAnimationFinished() {
console.log('animation-finished')
}示例代码
以下是一个完整的实现了 bodymovin-angular 的动画组件的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- --------------------
------ - ---------------- - ---- -------------------------------------
------ - -- ------------- ---- --------------------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ------------------ ---------- ------ -
------ ----------------- ----
------ -------------- ----
------ ----- ----
------------------- ----------------- ----------------- - -
---------- -
------------------ - --------------
--------------------- - -
-------------- -------------------
----- -----
--------- ----
--
--------- - -----------------------------
-
----------------------------- ---- -
--------- - ----------
-
--------------------- -
----------------------------------
-
-<div bodymovin [options]="animationOptions" (animationCreated)="onAnimationCreated($event)" (animFinished)="onAnimationFinished($event)"></div>
范例
让我们假设我们有一个 After Effects 动画名为 animation.json，我们可以在组件内引入这个 JSON 文件:
import * as animationData from './assets/animation.json';
在 ngOnInit() 方法中，我们将引入的 animationData 赋值为动画数据，然后定义属性 animationOptions.这些选项被用来创建动画。
this.animationData = animationData;
this.animationOptions = {
animationData: this.animationData,
loop: true,
autoplay: true
}最后，在 html 模板中，我们可以将这个选项传递给 bodymovin 指令。
<div [bodymovin]="animationOptions"></div>
总结
通过 npm 安装和使用 bodymovin-angular，可以方便地在 Angular 应用中使用 After Effects 制作的动画，在与 bodymovin 配合的情况下，呈现鲜明、清晰的视觉效果。希望这篇文章能对你理解并使用 bodymovin-angular 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da1e4