Angular 4 动画

 动画组建 Animations增加了很多与html元素之间的交互。Angular2也提供动画，与Angular2的区别在于，动画不再是@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。有一个点击事件，为此调用了动画功能。 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导入了触发器、状态、样式、转换和动画。

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

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

  触发器定义动画的开始。它的第一个参数是要给需要应用动画的html标签的动画名称。第二个参数是我们导入的函数——状态、转换等。

  状态函数涉及动画步骤，元素将在这些步骤之间转换。现在我们已经定义了两个状态，smaller和larger。对于smaller状态，我们给出了样式转换: transform:translateY(100px) 和 transform:translateY(100px)。

  转换函数将动画添加到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>

  @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 文件中定义如下

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

  state变量已定义，默认值smaller。动画功能会在单击时切换状态。如果状态切换为larger，它将切换为smaller；如果smaller，它会切换为larger。

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

  点击“Click Me”按钮后，图像的位置会改变，如下图所示

  变换函数沿y轴方向运动，当点击“Click Me”按钮时，y方向从0变为100 px。图像存储在assets/images文件夹中。