Angular7:动画
动画增加了html元素之间的大量交互。Angular 2就开始支持动画,从Angular 4开始,动画不再是@angular/core的一部分,而是一个需要导入app.module.ts的独立包。
首先,我们需要用下面一行代码导入库
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
浏览器模块需要添加到app.module.ts的导入数组中,如下所示
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule , RoutingComponent} from './app-routing.module'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; import { ChangeTextDirective } from './change-text.directive'; import { SqrtPipe } from './app.sqrt'; import { MyserviceService } from './myservice.service'; import { HttpClientModule } from '@angular/common/http'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ SqrtPipe, AppComponent, NewCmpComponent, ChangeTextDirective, RoutingComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, ScrollDispatchModule, DragDropModule, ReactiveFormsModule, BrowserAnimationsModule ], providers: [MyserviceService], 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 { FormGroup, FormControl, Validators} from '@angular/forms'; 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导入了trigger, state, style, transition和animate。
现在,我们将向@Component()装饰器添加动画属性。
animations: [ trigger('myanimation',[ state('smaller',style({ transform : 'translateY(100px)' })), state('larger',style({ transform : 'translateY(0px)' })), transition('smaller <=> larger',animate('300ms ease-in')) ]) ]
触发器定义动画的开始。它的第一个参数是要给需要应用动画的html标记的动画名称。第二个参数是我们已经导入的函数:状态、转换等。
状态函数包括动画步骤,元素将在这些步骤之间转换。现在我们已经定义了两种状态,更小和更大。对于较小的状态,我们给出了transform:translateY(100px)和transform:translateY(100px)。
Transition函数向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指令中添加了一个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方向,当我们单击“Click Me”按钮时,该方向从0变为100像素。图像存储在assets/images文件夹中。