Angular 4 动画
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文件夹中。