Angular 4 - 动画

动画在 html 元素之间添加了大量交互。 Angular2 也提供了动画功能。 与 Angular 4 的区别在于，动画不再是 @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 指令并将值指定为状态。

现在让我们看看定义动画的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 导入了触发器、状态、样式、过渡和动画。

现在，我们将animations属性添加到@Component()装饰器中 −

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

触发器定义动画的开始。 它的第一个参数是动画的名称，该名称将赋予需要应用动画的 html 标签。 第二个参数是我们导入的函数 - state、Transition等。

state 函数涉及元素将在其间转换的动画步骤。 现在我们已经定义了两个状态，较小的和较大的。 对于较小的状态，我们给出了样式 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指令中添加了一个样式属性，该属性使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 文件中定义的动画名称。

单击按钮时，它会调用 animate 函数，该函数在 app.component.ts 文件中定义如下 −

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

状态变量已定义，并被赋予较小的默认值。 动画函数会在单击时更改状态。 如果状态较大，则转换为较小； 如果较小，则会转换为较大。

这就是浏览器中的输出 (http://localhost:4200/) −

单击Click Me按钮后，图像的位置将发生变化，如下面的屏幕截图所示−

变换函数应用于y方向，当单击 Click Me 按钮时，变换函数从0变为100px。 图像存储在assets/images文件夹中。