如何用Angular 6创建各种动画效果 架构&设计

来源:互联网 / 作者:SKY / 2018-10-10 15:02 / 点击:
Angular是一款功能强大的前端框架。这次让我们跟着经验丰富的Web开发人员,来学习如何无需使用CSS而创建出各种动画效果。

【新产品上线啦】51CTO播客,随时随地,碎片化学习

【Chinaz.com快译】介绍

就技术角度而言,动画可以被定义为从初始状态到最终状态的转换过程。如今它已是各种Web应用不可或缺的组成部分。通过动画,我们不仅能创建出各种酷炫的UI,同时它们也能增加应用程序的趣味性。因此,设计精美的动画在吸引用户眼球的同时,也增强了他们的浏览体验。

Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此,我们将使用Visual Studio Code来进行示例演示。

准备工作

安装Visual Studio Code和Angular CLI。

如果您是新手,请参阅我以前的Angular 6.0入门文章(https://dzone.com/articles/getting-started-with-angular-60),在自己的机器上建立出Angular 6开发环境。

源代码

请从GitHub处下载源代码,地址是:https://github.com/AnkitSharma-007/angular-6-animations。

理解Angular动画的不同状态

动画是某个元素从一种状态向另一种状态的转变, Angular为单个元素定义出了三种不同的状态。

Void状态:void状态表示某个元素处于不是DOM一部分的状态。当一个元素被创建且尚未放置到DOM中、或者该元素从DOM中移除时,就处于该状态。此状态特别实用,特别是当我们想通过添加或删除DOM中的元素,来创建动画的时候,我们在代码中用关键字void来定义这种状态。

Wildcard状态:又称元素的默认状态。不管当前的动画状态如何,各种样式都用这种状态来定义元素。我们在代码中用符号*来定义这种状态。

Custom状态:元素的这种状态需要在代码中被明确定义。我们在代码中可以使用任何自定义的名称来表示这种状态。

动画转换定时

我们在自己的应用中,通过定义动画转换的定时,来显示从一个状态过度到另一个状态。Angular为我们提供了如下三种与时间相关的属性:

1.持续时间(Duration)

此属性表示我们的动画从开始(初始状态)到完成(最终状态)所需的时间。我们可以用以下三种方式来定义动画的持续时间:

使用一个整数值,来表示以毫秒为单位的时间,例如:500

使用一个字符串值,来表示以毫秒为单位的时间,例如:’500ms’

使用一个字符串值,来表示以秒为单位的时间。例如:’0.5’

2.延迟(Delay)

此属性代表动画从触发到和实际转换开始之间的时间间隔。该属性遵循与上述持续时间相同的语法规则。要定义延迟,我们需要在持续时间值的后面,以字符串的形式添加延迟的数值,即:'Duration Delay'。例如' 0.3s 500ms’,表示转换将等待500毫秒,然后运行0.3秒。

3.滑动(Easing)

此属性表示动画在其执行过程中是如何被加速或减速的。我们可以在持续时间和延迟的字符串后面,添加第三个变量。当然,如果延迟数值不存在的话,那么Easing将成为第二个数值。这同样也是一个可选属性。例如:

 '0.3s 500ms ease-in'。这意味着转换将等待500毫秒,然后运行0.3秒(300毫秒),实现滑入的效果。

 '300ms ease-out'。这意味着转换将运行300毫秒(0.3秒),实现滑出的效果。

创建Angular 6应用

请在您的计算机上打开命令提示行,并执行以下命令集:

mkdir ngAnimationDemo

cd ngAnimationDemo

ng new ngAnimation

这些命令将创建一个名为ngAnimationDemo的目录,然后在该目录内创建一个名为ngAnimation的Angular应用。

请使用Visual Studio Code打开ngAnimation应用。接着我们将创建自己的组件。

请依次进入View >> Integrated Terminal,这将打开Visual Studio Code的终端窗口。

请执行以下命令,以创建相应的组件:

ng g c animationdemo 

它将在/src/app文件夹内创建我们的组件--animationdemo。

为了用到Angular动画,我们需要在应用中导入特定的动画模块--BrowserAnimationsModule。请打开app.module.ts文件,并添加如下的导入定义:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations' 

// other import definitions  

@NgModule({ imports: [BrowserAnimationsModule // other imports]})  

理解Angular动画的语法

下面,我们在组件的元数据中编写动画代码。其语法如下:

@Component({ 

// other component properties. 

  animations: [ 

    trigger('triggerName'), [ 

      state('stateName', style()) 

      transition('stateChangeExpression', [Animation Steps]) 

    ] 

  ] 

}) 

此处,我们用到了名为animations的属性。该属性的输入是一个阵列,此阵列包含一个或多个“触发器”。同时,每个触发器都带有唯一的名称、和用来定义动画的状态和各种转换的具体实现。

另外,每一个状态函数都会通过“stateName”来唯一地识别其状态、并用样式函数来显示在该状态下的元素样式。

当然,每个转换函数也都通过stateChangeExpression,来定义元素状态转换、并定义动画的不同步骤所对应的阵列,从而能够显示出转换是如何发生的。在此,我们就可以用逗号分隔的数值,来将多个触发器函数包括到动画的属性之中。

由于这些功能(触发、状态、和转换)都被定义在@angular/animations模块之中,因此,我们需要在自己的组件导入该模块。

为了将动画应用到某个元素之上,我们需要在元素的定义中包含触发器的名称,即:在元素的标签里使用@后面加触发器名称的格式。对应的代码示例如下:

<div @changeSize></div>  

这是将触发器changeSize应用到元素的上。

下面,让我们创建更多的动画,以更好地理解Angular的动画概念吧。

更改大小的动画

我们将创建一个动画,来实现一键改变的大小。

请打开animationdemo.component.ts文件,将如下代码添加到导入定义之中。

阅读延展

1
3