Angular 6 动画

动画增加了HTML元素之间的许多交互。Angular 2中也提供了动画功能。Angular 6的区别在于，动画不再是@angular/core库的一部分，而是一个需要在app.module.ts中导入的单独包。

首先，我们需要导入如下所示的库：

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

需要将BrowserAnimationsModule添加到app.module.ts中的导入数组中，如下所示：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html中，我们添加了需要动画化的HTML元素。

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

对于主div，我们添加了一个按钮和一个包含图像的div。有一个点击事件，调用animate函数。对于div，添加了@myanimation指令并将值设置为state。

现在让我们看看定义动画的app.component.ts。

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

我们必须导入要在.ts文件中使用的动画函数，如上所示。

import { trigger, state, style, transition, animate } from '@angular/animations';

在这里，我们从@angular/animations导入了trigger、state、style、transition和animate。

现在，我们将动画属性添加到@Component()装饰器中：

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger定义了动画的开始。它的第一个参数是需要应用动画的html标签的动画名称。第二个参数是我们导入的函数——state、transition等。

state函数包含动画步骤，元素将在这些步骤之间转换。现在我们定义了两个状态，smaller和larger。对于smaller状态，我们设置了样式transform:translateY(100px)和transform:translateY(100px)。

Transition函数为html元素添加动画。第一个参数取状态，即开始和结束；第二个参数接受animate函数。animate函数允许你定义转换的长度、延迟和缓动。

现在让我们看看.html文件，看看transition函数是如何工作的

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

在@component指令中添加了一个style属性，它将div居中对齐。让我们考虑以下示例来理解这一点：

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

这里，使用特殊字符[``]来添加html元素的样式（如果存在）。对于div，我们使用了在app.component.ts文件中定义的动画名称。

点击按钮后，它会调用在app.component.ts文件中定义的animate函数，如下所示：

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == �larger�? 'smaller' : 'larger';
   }
}

定义了state变量，并将其默认值设置为smaller。animate函数在点击时更改状态。如果状态为larger，它将转换为smaller；如果为smaller，它将转换为larger。

这就是浏览器输出(https://:4200/)的样子：

点击点击我按钮后，图像的位置会发生变化，如下面的截图所示：

transform函数应用于y方向，点击“点击我”按钮时，它从0变为100px。图像存储在assets/images文件夹中。

打印页面