使用Angular 6创建各种动画效果的方法

Angular 6作为一个现代化的JavaScript框架，提供了很多种动画效果，并且这些动画效果非常容易实现。下面介绍一些Angular 6中创建各种动画效果的方法。

1. 使用Angular动画模块

Angular 6中提供了一个名为“@angular/animations”的模块，可以通过导入该模块来创建各种动画效果。在使用该模块时，需要在组件元数据中声明该模块，如下所示：

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('myAnimation', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class AppComponent {}

在该代码中，我们定义了一个名为“myAnimation”的动画，并定义了两个状态“inactive”和“active”，分别对应未触发和触发后的状态。在组件的HTML模板中，可以使用这些状态，如下所示：

<div [@myAnimation]="state" (click)="toggleState()"></div>

在该代码中，我们定义了一个空元素，并为其绑定了一个名为“myAnimation”的动画，并通过“state”属性来维护动画状态。同时，我们还定义了一个“toggleState()”函数，该函数用于切换动画状态，如下所示：

export class AppComponent {
  state = 'inactive';
 
  toggleState() {
    this.state = this.state === 'inactive' ? 'active' : 'inactive';
  }
}

在该代码中，我们定义了一个名为“state”的变量来维护动画状态，当单击该空元素时，会调用“toggleState()”函数来切换动画状态。

2. 使用Angular动画指令

除了使用Angular动画模块外，我们还可以通过使用Angular动画指令来创建各种动画效果。Angular提供了四个指令，分别为“@trigger”，“@state”，“@transition”和“@animation”。下面是一个例子：

<div [@myAnimation]="{ value: state, params: { duration: '100ms', ease: 'ease-in' } }"></div>

在该代码中，我们使用了“@myAnimation”指令，并创建了一个带有参数的JSON对象，该对象包含“value”和“params”两个属性。其中，“value”属性用于维护动画状态，而“params”属性用于添加动画效果的参数。

3. 使用Animate.css库

除了使用Angular动画模块和Angular动画指令外，我们还可以使用第三方CSS库来创建动画效果。Animate.css是一个非常流行的CSS库，其中包含了很多种动画效果。下面是一个使用Animate.css库的例子：

<div class="animated fadeIn"></div>

在该代码中，我们只需将“animated”类添加到元素上，并且添加相应的动画效果类即可。Animate.css库中包含了很多动画效果类，如“fadeIn”、“bounce”、“flip”等。

结论

Angular 6提供了多种动画效果的实现方式，包括使用Angular动画模块，使用Angular动画指令以及使用第三方CSS库。这些动画效果非常容易实现，并且可以用于各种Web应用程序中，包括单页面应用程序、桌面应用程序、移动应用程序等。