本篇文章帶大家深入了解一下angular中的狀態(tài)和動(dòng)畫，簡(jiǎn)單介紹一下創(chuàng)建動(dòng)畫的方法，并聊聊關(guān)鍵幀動(dòng)畫、動(dòng)畫回調(diào)、可重用動(dòng)畫、交錯(cuò)動(dòng)畫等知識(shí)點(diǎn)，希望對(duì)大家有所幫助！
1、什么是狀態(tài)
狀態(tài)表示的是要進(jìn)行運(yùn)動(dòng)的元素在運(yùn)動(dòng)的不同時(shí)期所呈現(xiàn)的樣式。
(資料圖片)
2、狀態(tài)的種類
在 Angular 中，有三種類型的狀態(tài)，分別為：void、*、customvoid：當(dāng)元素在內(nèi)存中創(chuàng)建好但尚未被添加到 DOM 中或?qū)⒃貜?DOM 中刪除時(shí)會(huì)發(fā)生此狀態(tài) 【相關(guān)教程推薦：《angular教程》】
*：元素被插入到 DOM 樹之后的狀態(tài)，或者是已經(jīng)在DOM樹中的元素的狀態(tài)，也叫默認(rèn)狀態(tài)
custom：自定義狀態(tài)，元素默認(rèn)就在頁(yè)面之中，從一個(gè)狀態(tài)運(yùn)動(dòng)到另一個(gè)狀態(tài)，比如面板的折疊和展開。
3、進(jìn)出場(chǎng)動(dòng)畫
進(jìn)場(chǎng)動(dòng)畫是指元素被創(chuàng)建后以動(dòng)畫的形式出現(xiàn)在用戶面前，進(jìn)場(chǎng)動(dòng)畫的狀態(tài)用 void => *表示，別名為 :enter
出場(chǎng)動(dòng)畫是指元素在被刪除前執(zhí)行的一段告別動(dòng)畫，出場(chǎng)動(dòng)畫的狀態(tài)用 * => void，別名為 :leave
1、在使用動(dòng)畫功能之前，需要引入動(dòng)畫模塊，即 BrowserAnimationsModule
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"@NgModule({ imports: [BrowserAnimationsModule],})export class AppModule {}2、默認(rèn)代碼解析，todo 之刪除任務(wù)和添加任務(wù)
<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" />
<div class="container"> <h2>Todos</h2> <div class="form-group"> <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" /> </div> <ul class="list-group"> <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item"> {{ item }} </li> </ul></div>import { Component } from "@angular/core"@Component({ selector: "app-root", templateUrl: "./app.component.html", styles: []})export class AppComponent { // todo 列表 todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]// 添加 todo addItem(input: HTMLInputElement) { this.todos.push(input.value) input.value = "" }// 刪除 todo removeItem(index: number) { this.todos.splice(index, 1) }}3、創(chuàng)建動(dòng)畫
trigger 方法用于創(chuàng)建動(dòng)畫，指定動(dòng)畫名稱
transition 方法用于指定動(dòng)畫的運(yùn)動(dòng)狀態(tài)，出場(chǎng)動(dòng)畫或者入場(chǎng)動(dòng)畫，或者自定義狀態(tài)動(dòng)畫。
style 方法用于設(shè)置元素在不同的狀態(tài)下所對(duì)應(yīng)的樣式
animate 方法用于設(shè)置運(yùn)動(dòng)參數(shù)，比如動(dòng)畫運(yùn)動(dòng)時(shí)間，延遲事件，運(yùn)動(dòng)形式
@Component({ animations: [ // 創(chuàng)建動(dòng)畫, 動(dòng)畫名稱為 slide trigger("slide", [ // 指定入場(chǎng)動(dòng)畫 注意: 字符串兩邊不能有空格, 箭頭兩邊可以有也可以沒有空格 // void => * 可以替換為 :enter transition("void => *", [ // 指定元素未入場(chǎng)前的樣式 style({ opacity: 0, transform: "translateY(40px)" }), // 指定元素入場(chǎng)后的樣式及運(yùn)動(dòng)參數(shù) animate(250, style({ opacity: 1, transform: "translateY(0)" })) ]), // 指定出場(chǎng)動(dòng)畫 // * => void 可以替換為 :leave transition("* => void", [ // 指定元素出場(chǎng)后的樣式和運(yùn)動(dòng)參數(shù) animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ]) ]) ]})注意：入場(chǎng)動(dòng)畫中可以不指定元素的默認(rèn)狀態(tài)，Angular 會(huì)將 void 狀態(tài)清空作為默認(rèn)狀態(tài)
trigger("slide", [ transition(":enter", [ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]), transition(":leave", [ animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ])])注意：要設(shè)置動(dòng)畫的運(yùn)動(dòng)參數(shù)，需要將 animate 方法的一個(gè)參數(shù)更改為字符串類型
// 動(dòng)畫執(zhí)行總時(shí)間 延遲時(shí)間 (可選) 運(yùn)動(dòng)形式 (可選)animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))關(guān)鍵幀動(dòng)畫使用 keyframes方法定義
transition(":leave", [ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) )])Angular 提供了和動(dòng)畫相關(guān)的兩個(gè)回調(diào)函數(shù)，分別為動(dòng)畫開始執(zhí)行時(shí)和動(dòng)畫執(zhí)行完成后
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import { AnimationEvent } from "@angular/animations"start(event: AnimationEvent) { console.log(event)}done(event: AnimationEvent) { console.log(event)}1、將動(dòng)畫的定義放置在單獨(dú)的文件中，方便多組件調(diào)用。
import { animate, keyframes, style, transition, trigger } from "@angular/animations"export const slide = trigger("slide", [ transition(":enter", [ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]), transition(":leave", [ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) ) ])])import { slide } from "./animations"@Component({ animations: [slide]})2、抽取具體的動(dòng)畫定義，方便多動(dòng)畫調(diào)用。
import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"export const slideInUp = animation([ style({ opacity: 0, transform: "translateY(40px)" }), animate(250)])export const slideOutLeft = animation([ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) )])export const slide = trigger("slide", [ transition(":enter", useAnimation(slideInUp)), transition(":leave", useAnimation(slideOutLeft))])3、調(diào)用動(dòng)畫時(shí)傳遞運(yùn)動(dòng)總時(shí)間，延遲時(shí)間，運(yùn)動(dòng)形式
export const slideInUp = animation( [ style({ opacity: 0, transform: "translateY(40px)" }), animate("{{ duration }} {{ delay }} {{ easing }}") ], { params: { duration: "400ms", delay: "0s", easing: "ease-out" } })transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))Angular 中提供了 query方法查找元素并為元素創(chuàng)建動(dòng)畫
import { slide } from "./animations"animations: [ slide, trigger("todoAnimations", [ transition(":enter", [ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), // 查詢子級(jí)動(dòng)畫 使其執(zhí)行 query("@slide", animateChild()) ]) ])]<div class="container" @todoAnimations> <h2>Todos</h2> <ul class="list-group"> <li @slide (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item" > {{ item }} </li> </ul></div>默認(rèn)情況下，父級(jí)動(dòng)畫和子級(jí)動(dòng)畫按照順序執(zhí)行，先執(zhí)行父級(jí)動(dòng)畫，再執(zhí)行子級(jí)動(dòng)畫，可以使用 group方法讓其并行
trigger("todoAnimations", [ transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", animateChild()) ]) ])])Angular 提供了 stagger 方法，在多個(gè)元素同時(shí)執(zhí)行同一個(gè)動(dòng)畫時(shí)，讓每個(gè)元素動(dòng)畫的執(zhí)行依次延遲。
transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", stagger(200, animateChild())) ])])注意：stagger 方法只能在 query 方法內(nèi)部使用
Angular 提供了 state方法用于定義狀態(tài)。
1、默認(rèn)代碼解析
<div class="container"> <div class="panel panel-default"> <div class="panel-heading" (click)="toggle()"> 一套框架, 多種平臺(tái), 移動(dòng)端 & 桌面端 </div> <div class="panel-body"> <p> 使用簡(jiǎn)單的聲明式模板，快速實(shí)現(xiàn)各種特性。使用自定義組件和大量現(xiàn)有組件，擴(kuò)展模板語(yǔ)言。在幾乎所有的 IDE 中獲得針對(duì) Angular 的即時(shí)幫助和反饋。所有這一切，都是為了幫助你編寫漂亮的應(yīng)用，而不是絞盡腦汁的讓代碼“能用”。 </p> <p> 從原型到全球部署，Angular 都能帶給你支撐 Google 大型應(yīng)用的那些高延展性基礎(chǔ)設(shè)施與技術(shù)。 </p> <p> 通過 Web Worker 和服務(wù)端渲染，達(dá)到在如今(以及未來(lái)）的 Web 平臺(tái)上所能達(dá)到的最高速度。 Angular 讓你有效掌控可伸縮性?；? RxJS、Immutable.js 和其它推送模型，能適應(yīng)海量數(shù)據(jù)需求。 </p> <p> 學(xué)會(huì)用 Angular 構(gòu)建應(yīng)用，然后把這些代碼和能力復(fù)用在多種多種不同平臺(tái)的應(yīng)用上 —— Web、移動(dòng) Web、移動(dòng)應(yīng)用、原生應(yīng)用和桌面原生應(yīng)用。 </p> </div> </div></div><style> .container { margin-top: 100px; } .panel-heading { cursor: pointer; }</style>import { Component } from "@angular/core"@Component({ selector: "app-root", templateUrl: "./app.component.html", styles: []})export class AppComponent { isExpended: boolean = false toggle() { this.isExpended = !this.isExpended }}2、創(chuàng)建動(dòng)畫
trigger("expandCollapse", [ // 使用 state 方法定義折疊狀態(tài)元素對(duì)應(yīng)的樣式 state( "collapsed", style({ height: 0, overflow: "hidden", paddingTop: 0, paddingBottom: 0 }) ), // 使用 state 方法定義展開狀態(tài)元素對(duì)應(yīng)的樣式 state("expanded", style({ height: "*", overflow: "auto" })), // 定義展開動(dòng)畫 transition("collapsed => expanded", animate("400ms ease-out")), // 定義折疊動(dòng)畫 transition("expanded => collapsed", animate("400ms ease-in"))])<div class="panel-body" [@expandCollapse]="isExpended ? "expanded" : "collapsed""></div>
1、為路由添加狀態(tài)標(biāo)識(shí)，此標(biāo)識(shí)即為路由執(zhí)行動(dòng)畫時(shí)的自定義狀態(tài)
const routes: Routes = [ { path: "", component: HomeComponent, pathMatch: "full", data: { animation: "one" } }, { path: "about", component: AboutComponent, data: { animation: "two" } }, { path: "news", component: NewsComponent, data: { animation: "three" } }]2、通過路由插座對(duì)象獲取路由狀態(tài)標(biāo)識(shí)，并將標(biāo)識(shí)傳遞給動(dòng)畫的調(diào)用者，讓動(dòng)畫執(zhí)行當(dāng)前要執(zhí)行的狀態(tài)是什么
<div class="routerContainer" [@routerAnimations]="prepareRoute(outlet)"> <router-outlet #outlet="outlet"></router-outlet></div>
import { RouterOutlet } from "@angular/router"export class AppComponent { prepareRoute(outlet: RouterOutlet) { return ( outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation ) }}3、將 routerContainer 設(shè)置為相對(duì)定位，將它的直接一級(jí)子元素設(shè)置成絕對(duì)定位
/* styles.css */.routerContainer { position: relative;}.routerContainer > * { position: absolute; left: 0; top: 0; width: 100%;}4、創(chuàng)建動(dòng)畫
trigger("routerAnimations", [ transition("one => two, one => three, two => three", [ query(":enter", style({ transform: "translateX(100%)", opacity: 0 })), group([ query( ":enter", animate( "0.4s ease-in", style({ transform: "translateX(0)", opacity: 1 }) ) ), query( ":leave", animate( "0.4s ease-out", style({ transform: "translateX(-100%)", opacity: 0 }) ) ) ]) ]), transition("three => two, three => one, two => one", [ query( ":enter", style({ transform: "translateX(-100%)", opacity: 0 }) ), group([ query( ":enter", animate( "0.4s ease-in", style({ transform: "translateX(0)", opacity: 1 }) ) ), query( ":leave", animate( "0.4s ease-out", style({ transform: "translateX(100%)", opacity: 0 }) ) ) ]) ])])更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程視頻??！
以上就是angular學(xué)習(xí)之深入聊聊狀態(tài)和動(dòng)畫的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞：
營(yíng)業(yè)執(zhí)照公示信息