Angular 4 - 动画

Angular 4动画 - 从简单和简单的步骤学习Angular 4，从基本到高级概念，包括概述，环境设置，项目设置，组件，模块，数据绑定，事件绑定，模板，指令，管道，路由，服务，Http服务，表格，动画，材料，CLI，示例。

动画在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元素.

   Click Me

对于主div，我们添加了一个按钮和一个带图像的div.有一个click事件，调用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导入了触发器，状态，样式，过渡和动画.

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

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

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

状态函数涉及动画步骤，元素将在它们之间转换.现在我们已经定义了两个州，越来越小.对于较小的状态，我们给出了样式变换:translateY(100px)和变换:translateY(100px).

过渡函数将动画添加到html元素.第一个参数采用状态，即开始和结束;第二个参数接受animate函数. animate函数允许您定义转换的长度，延迟和缓和.

现在让我们看看.html文件以了解转换函数的工作原理

   Click Me

@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函数，该函数在应用程序中定义. component.ts文件如下 :

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

定义状态变量，并将其默认值设置为较小. animate函数会在单击时更改状态.如果状态更大，它将转换为更小;如果更小，它将转换为更大.

这是浏览器中的输出( http://localhost:4200/)看起来如何&减去;

Click Me Button

点击点击我按钮，图像的位置发生变化，如下面的屏幕截图所示 :

点击Me按钮图像位置已更改

变换功能应用于 y 方向，单击"单击我"按钮时，该方向从0更改为100px.图像存储在 assets/images 文件夹中.