Angular 6 动画

  动画增加了html元素之间的大量交互。Angular2也提供动画。Angular6的不同之处在于动画不再是@ angle/core库的一部分，而是一个需要导入app.module.ts的独立包

  首先，我们需要导入如下库

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

  浏览器模块需要添加到app.module.ts的import数组中，如下所示

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指令，并给出状态值。

  现在让我们看看定义动画的应用程序组件。

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/animatics导入了trigger, state, style, transition, 和animate。

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

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> lar

  状态函数包括动画步骤，元素将在这些步骤之间转换。现在我们已经定义了两种状态，更小和更大。对于较小的状态，我们给出了transform:translateY(100px) 和transform:translateY(100px).

 Transition函数向html元素添加动画。第一个参数是状态，即开始和结束；第二个参数接受animate函数。动画功能允许您定义过渡的长度、延迟和放松。

  现在让我们看看.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指令中添加了一个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文件中定义如下

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

  状态变量被定义，并被赋予较小的默认值。动画功能在点击时改变状态。如果状态较大，它将转换为较小的状态；如果变小，它会变成更大。

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

  单击“Click Me”按钮后，图像的位置会发生变化，如下图所示

变换函数在y方向应用，172 / 5000变换函数应用于y方向,当单击"单击我"按钮时,该方向从0变为100像素。图像存储在assets/images文件夹中当单击“Click Me”按钮时，该值从0变为100像素。图像存储在assets/images文件夹中。