前言
在前端开发中，动画对于提升用户体验至关重要，而Angular框架本身并没有提供太多动画效果的支持。但好在社区有很多开源的第三方包可供选择，本文就向大家介绍其中的一个——@priotas/angular-motion。
@priotas/angular-motion是什么？
@priotas/angular-motion是一款基于Angular框架的动画库，它提供了丰富的、易于使用的动画效果，开发者可以通过简单的调用和配置实现各种动画效果。
安装
通过NPM安装@priotas/angular-motion包：
npm install @priotas/angular-motion --save
使用方法
引入模块
首先，在Angular的模块中引入@priotas/angular-motion：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------- - ---- --------------------------
-----------
-------- -
------------------------
-------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -这里需要注意的是，@priotas/angular-motion要求Angular版本在4以上，而且需要引入浏览器动画 BrowserAnimationsModule。
基础用法
@priotas/angular-motion提供了两种动画方式：基于触发状态（状态动画）和基于时间（过渡动画）。下面就分别介绍一下它们的基础用法。
状态动画
状态动画是基于触发状态的动画，指在状态改变时触发，如通过鼠标单击改变窗体的状态。下面是一个简单的示例，当用户单击按钮时，div的高度从100px变为200px，并且有一个淡入淡出的效果。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- ------ ------ -------- ---------- - ---- --------------------------
------------
--------- ---------
--------- -
------- ----------------------------- -------------
---- ----------------------- - ------- - -------- ------------------
--
---------- ------------------------
----------- -
---------------------- -
-------------- -------
------- --------
-------- -
----
-------------- -------
------- --------
-------- ---
----
----------------- --- ------- --------------
--
-
--
------ ----- ------------ -
------- - -----
------------ -
------------ - --------------
-
-在这个示例中，我们引入了@priotas/angular-motion的触发器trigger，并通过state定义了两种不同的状态：small和large。然后在动画的每个状态中，通过style定义了不同的样式。最后，我们又定义了一个过渡规则，当状态由small变为large或由large变为small时，通过animate动画实现了淡入淡出的效果，时长为1秒。
过渡动画
过渡动画是基于时间的动画，指在一段时间内实现的动画效果。下面是一个模拟模态框打开和关闭的过渡动画示例。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- ------ -------- ---------- - ---- --------------------------
------------
--------- ---------
--------- -
------- -------------------------- --------------
---- --------------- ---------------------- ----------------- ---------------------------
---- ------------- ----------------- -------------------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ------------------ ---------------------------- ------------------------------------------
------
---- ------------------------ ----------
---- ---------------------
------- ------------- ---------- ------------ -------------------------------------
------
------
--
---------- ------------------------
----------- -
---------------------------- -
-------------------- -
------- -------- - ---
--------------- ------- -------- --- ---
---
-------------------- -
--------------- ------- -------- - ---
--
---
-------------------------- -
-------------------- -
------- ---------- ------------- -------- - ---
------------- ------------------- ------ ----- -------- ------- ---------- ----------- -------- - ---
---
-------------------- -
------------- ----------------- ------ ------ -------- ------- ---------- ------------- -------- - ---
--
--
-
--
------ ----- ------------ -
--------- - ------
----------- -
-------------- - -----
-
------------ -
-------------- - ------
-
-在这个示例中，我们通过样式设置了两个元素：一个叫做overlay的div，用来模拟模态框打开时挡住背景的层；还有一个叫做modal的div，用来展示模态框的内容。两个元素都使用了过渡动画，在打开和关闭模态框时分别播放。
对于overlay元素，我们定义了两个过渡规则：在进入时（即打开模态框时），先将其透明度设为0，然后通过animate动画将其透明度设为0.5，效果是渐变显示；在离开时（即关闭模态框时），通过animate动画将其透明度从0.5恢复到0，效果是渐变隐藏。
对于modal元素，我们同样定义了两个过渡规则：在进入时，先将其缩小到0.7倍，透明度设为0，然后通过animate动画将其放大至原大小，同时将其透明度设置为1，效果是缩放并淡入；在离开时，将其缩小至0.7倍，透明度为0，效果是缩小并淡出。
进阶用法
除了基础用法之外，@priotas/angular-motion还提供了很多高级功能，包括：
- 动画缓动函数：可以通过cubic-bezier函数自定义缓动函数，或使用内置的常见缓动函数，如ease-in、ease-out等。
- 关键帧动画：可以使用keyframes关键字定义关键帧动画，让动画在不同时间点显示不同的状态。
- 动画分组：可以将多个动画组合起来，实现更为复杂的效果。
- 动画回调：可以在动画开始、结束或每一步结束时执行回调函数。
- 非连续动画：即可以在动画的不同状态之间插入未定义状态，实现更为复杂的效果。
关于这些高级功能，可参考@priotas/angular-motion的官方文档。
总结
@priotas/angular-motion是一款非常好用的Angular动画库，开发者可以通过简单的调用和配置便能实现丰富的动画效果。本文介绍了其基础用法，还涉及了一些进阶用法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ff81e8991b448e341d