简介
NgQQ-Animator 是一款基于 Angular 6 的自定义动画库，它提供了一系列的动画效果，可以帮助开发者轻松地实现页面动画效果。NgQQ-Animator 的实现思路是基于 Angular 的动画系统，通过自定义指令的方式来实现。本文将介绍 NgQQ-Animator 的实现细节，并提供示例代码和指导意义。
实现细节
安装
首先，我们需要安装 NgQQ-Animator。可以通过 npm 命令来安装：
npm install ngqq-animator --save
引入
安装成功后，我们需要在项目中引入 NgQQ-Animator 模块。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------------ - ---- ----------------
-----------
-------- -
-- ---
------------------
--
-- ---
--
------ ----- --------- - -使用
在模板文件中，我们可以通过 NgQQAnimator 指令来实现动画效果。NgQQAnimator 指令提供了以下属性：
qqAnimator: 动画效果的名称，例如fadeIn、slideInRight等。qqDuration: 动画的持续时间，单位为毫秒，默认值为500。qqDelay: 动画的延迟时间，单位为毫秒，默认值为0。qqTimingFunction: 动画的缓动函数，可以是ease-in、ease-out等，也可以是自定义的贝塞尔曲线函数，默认值为ease.
以下是一个使用 fadeIn 动画效果的示例：
<div qqAnimator="fadeIn" qqDuration="1000" qqDelay="500" qqTimingFunction="ease"> Hello World! </div>
实现原理
NgQQ-Animator 的实现原理是基于 Angular 的动画系统。Angular 的动画系统是通过指令来实现的，通过添加指令来控制元素的动画效果。NgQQ-Animator 也是通过指令来实现的，只不过它是自定义指令。
NgQQAnimator 指令的实现分为两部分：
- 定义动画效果
- 应用动画效果
定义动画效果
定义动画效果需要使用 Angular 的 AnimationBuilder 类，它提供了一系列的方法来定义动画效果。以下是一个 fadeIn 动画效果的实现：
import { AnimationBuilder, style, animate } from '@angular/animations';
export const fadeInAnimation = (builder: AnimationBuilder) => {
return builder.build([
style({ opacity: 0 }),
animate('500ms ease-in', style({ opacity: 1 }))
]);
};以上代码定义了一个 fadeIn 动画效果，它将元素的 opacity 属性从 0 变为 1，持续时间为 500ms，缓动函数为 ease-in。我们可以通过调整 animate 方法的参数来改变动画效果。
应用动画效果
应用动画效果需要使用 Angular 的 Renderer2 类，它提供了一系列的方法来操作元素。以下是 NgQQAnimator 指令的实现：
-- -------------------- ---- -------
------ - ---------- ------ ----------- ---------- ------ - ---- ----------------
------ - ----------------- --------------- - ---- ----------------------
------ - --------------- - ---- ---------------------------------
------------
--------- --------------
--
------ ----- --------------------- ---------- ------ -
-------------------- ------------- -------
-------------------- --------- ------ - ----
----------------- ------ ------ - --
-------------------------- --------------- ------ - -------
------- ------- ----------------
------------
------- --- -----------
------- --------- ----------
------- -------- ----------------
- --
---------- -
----- --------- - -------------------------------------
----- ------- - ------------------------------
----------- - --------------------------------------
--------------------- -- -
------------------------------------------------ ------------
---
--------------------------------------------- ------------
-------------------
-
------- ------------------ ------- -
------ ------ -
---- ---------
------ ------------------------------
-- ---
--------
----- --- -------------- --------- ----- ----------
-
-
-以上代码中，我们定义了 NgQQAnimatorDirective 指令，并通过 @Input 装饰器来定义了四个属性：animatorName、duration、delay 和 timingFunction。在 ngOnInit 方法中，我们通过 getAnimation 方法来获取动画效果，并通过 AnimationBuilder 类的 build 方法来创建动画工厂。然后，我们通过 AnimationPlayer 类的 create 方法来创建动画播放器，并在动画完成后移除 animated 类。
最后，我们通过 Renderer2 类的 addClass 方法来添加 animated 类，并通过 AnimationPlayer 类的 play 方法来播放动画。
示例代码
以下是一个使用 NgQQ-Animator 的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ----------------------------------
---- ------------ ------------------- ----------------- ------------- ------------------------
----- ------
------
--
------- --
--------- -
-------------------- -----
-
--
--
------ ----- ------------ -
---- - ------
-------- -
--------- - -----------
-
-以上代码中，我们定义了一个 AppComponent 组件，并在模板中使用了 NgQQAnimatorDirective 指令来实现 fadeIn 动画效果。我们还定义了一个 show 属性来控制元素的显示和隐藏。
指导意义
NgQQ-Animator 是一款非常实用的动画库，它可以帮助开发者轻松地实现动画效果。通过本文的介绍，我们可以了解到 NgQQ-Animator 的实现原理，并学习到如何使用 Angular 的动画系统来实现动画效果。在实际开发中，我们可以根据 NgQQ-Animator 的实现思路，自己开发更加丰富的动画库。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67975acb504e4ea9bde75ad7