前言
文章基于angular的練手項(xiàng)目产场。文章目錄
Angular 動(dòng)畫
讓我們隆重介紹Angular動(dòng)畫农渊。Angular是基于最新的Web Animations API,我們使用動(dòng)畫觸發(fā)器（animation triggers）來定義一系列狀態(tài)和變換屬性。我們也可以用CSS樣式來改寫實(shí)現(xiàn)我們想要的效果
主要的原則是開始和結(jié)尾的動(dòng)畫樣式由我們自定義块差，中間變換的計(jì)算過程交給工具本身
當(dāng)然珠移，可以通過設(shè)置時(shí)間來設(shè)置中間動(dòng)畫硫眨，比如1s，1.2s尝胆，200ms丧裁。其他的就是大家熟悉的CSS動(dòng)畫的速度屬性比如ease、liner和ease-in-out班巩。
而Angular 4.2以上的版本里我們可以用順序（sequence）和組合（group）來讓動(dòng)畫一個(gè)接一個(gè)執(zhí)行還是同時(shí)執(zhí)行渣慕；查詢（query）可以操作子元素而交錯(cuò)（stagger）可以創(chuàng)造一個(gè)很棒的連鎖效果。
這些事件將觸發(fā)一個(gè)動(dòng)畫：
向或者從視圖里裝載或者卸載一個(gè)元素
改變已綁定觸發(fā)器的狀態(tài) 比如：[@routerTransition]="home"
在路由轉(zhuǎn)換的前后關(guān)系中抱慌，要注意逊桦，組件正在被移除并作為導(dǎo)航的一部分被添加到視圖中的過程。
練習(xí)開始
創(chuàng)建了新模塊或組件包含視圖抑进，需要注入到主模塊和添加路由强经。這里就不介紹了，主要練習(xí)動(dòng)畫寺渗。
引入動(dòng)畫模塊
在主模塊AppModule.ts文件中引入運(yùn)動(dòng)的模塊BrowserAnimationsModule匿情，
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [
BrowserModule,
RouterModule,
BrowserAnimationsModule
],
創(chuàng)建自己動(dòng)畫模塊
練習(xí)使用angular的動(dòng)畫模塊，我們單獨(dú)創(chuàng)建一個(gè)模塊練習(xí)信殊。
ng g module my-animations
創(chuàng)建例子1組件
ng g component my-animations/exp1
定義動(dòng)畫樣式
在my-animations模塊中添加animations.ts文件炬称，并寫入動(dòng)畫樣式。這個(gè)文件里定義的動(dòng)畫便是核心內(nèi)容涡拘。需要有一定的css動(dòng)畫基礎(chǔ)才能寫出漂亮的動(dòng)畫效果玲躯。
/**定義動(dòng)畫的ts文件**/
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
// 定義一個(gè)鼠標(biāo)點(diǎn)擊運(yùn)動(dòng)的動(dòng)畫box樣式的元素會(huì)向左向右移動(dòng)。
export const boxAnimate = trigger('box', [
// 定義一個(gè)狀態(tài)left
state('left', style({ transform: 'translate3d(0,0,0)' })),
// 定義另外一個(gè)狀態(tài)right
state('right', style({ transform: 'translate3d(200%,0,0)' })),
// 定義運(yùn)動(dòng)過程(從left到right狀態(tài))
transition('left=>right', animate(2000, keyframes([
style({ transform: 'translate3d(300%,0,0)' })
]))),
// 定義運(yùn)動(dòng)過程(從right到left)
transition('right=>left', animate(1000, keyframes([
style({ transform: 'translate3d(-100%,0,0)' }),
]))),
]);
創(chuàng)建動(dòng)畫載體
在exp1.component.html文件中添加元素
<h1>動(dòng)畫實(shí)例1</h1>
<div style="height: 100px;width: 100px;background-color: black" (click)="start()" [@box]="boxState"></div>
修改exp1.component.ts文件如下
import { Component, OnInit } from '@angular/core';
import {boxAnimate} from "../animations"
@Component({
selector: 'app-exp1',
templateUrl: './exp1.component.html',
animations: [
boxAnimate
]
})
export class Exp1Component implements OnInit {
// 定義開始的狀態(tài)
private boxState: String = 'left';
private _isTrue: Boolean = true;
constructor() { }
ngOnInit() {
}
start(): void {
console.log('開始運(yùn)動(dòng)');
if (this._isTrue) {
this.boxState = 'right';
} else {
this.boxState = 'left';
}
this._isTrue = !this._isTrue;
}
}
總結(jié)
實(shí)現(xiàn)一個(gè)動(dòng)畫效果大致分為下面幾步
- 引入BrowserAnimationsModule
- 創(chuàng)建動(dòng)畫效果鳄乏。即一個(gè)trigger實(shí)例
- 使用
動(dòng)畫效果的核心是一個(gè)trigger實(shí)例跷车，可以參考官方api來使用，不過都是外文橱野，看起來真費(fèi)勁朽缴。不過通過以上例子大致我們也能明白動(dòng)畫實(shí)現(xiàn)的機(jī)制。
- 動(dòng)畫載體的[@box]綁定的狀態(tài)發(fā)生變化時(shí)水援，觸發(fā)我們定義的動(dòng)畫行為密强。
