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