在前端开发中,动画呈现是非常常见的需求,一个常用的解决方案是通过使用 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