這篇文章帶大家深入了解angular中的狀態和動畫,簡單介紹一下創建動畫的方法,並聊聊關鍵幀動畫、動畫回調、可重用動畫、交錯動畫等知識點,希望對大家有所幫助!
#1、什麼是狀態
狀態表示的是要進行運動的元素在運動的不同時期所呈現的樣式。
2、狀態的種類
在Angular 中,有三種類型的狀態,分別為:void
、*
、custom
#void
:當元素在記憶體中創建好但尚未被加入到DOM 中或將元素從DOM 中刪除時會發生此狀態 【相關教學推薦:《angular教學》】
*
:元素被插入到DOM 樹之後的狀態,或是已經在DOM樹中的元素的狀態,也叫預設狀態
custom
:自訂狀態,元素預設就在頁面之中,從一個狀態運動到另一個狀態,例如面板的折疊和展開。
3、進出場動畫
進場動畫是指元素被創造後以動畫的形式出現在使用者面前,進場動畫的狀態以void => *
表示,別名為:enter
# 出場動畫是指元素在刪除前執行的一段告別動畫,出場動畫的狀態用* => void
,別名:leave
1、在使用動畫功能之前,需要引入動畫模組,即BrowserAnimationsModule
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" @NgModule({ imports: [BrowserAnimationsModule], }) export class AppModule {}
2、預設程式碼解析,todo之刪除任務與新增任務
<!-- 在 index.html 文件中引入 bootstrap.min.css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<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、建立動畫
#trigger 方法用於建立動畫,指定動畫名稱
#transition 方法用於指定動畫的運動狀態,出場動畫或入場動畫,或自訂狀態動畫。
style 方法用來設定元素在不同的狀態下所對應的樣式
animate 方法用於設定運動參數,例如動畫運動時間,延遲事件,運動形式
@Component({ animations: [ // 创建动画, 动画名称为 slide trigger("slide", [ // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格 // void => * 可以替换为 :enter transition("void => *", [ // 指定元素未入场前的样式 style({ opacity: 0, transform: "translateY(40px)" }), // 指定元素入场后的样式及运动参数 animate(250, style({ opacity: 1, transform: "translateY(0)" })) ]), // 指定出场动画 // * => void 可以替换为 :leave transition("* => void", [ // 指定元素出场后的样式和运动参数 animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ]) ]) ] })
注意:入場動畫中可以不指定元素的預設狀態,Angular 會將void 狀態清空為預設狀態
trigger("slide", [ transition(":enter", [ style({ opacity: 0, transform: "translateY(40px)" }), animate(250) ]), transition(":leave", [ animate(600, style({ opacity: 0, transform: "translateX(100%)" })) ]) ])
注意:要設定動畫的運動參數,需要將animate 方法的一個參數變更為字串類型
// 动画执行总时间 延迟时间 (可选) 运动形式 (可选) animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))
關鍵影格動畫使用keyframes
方法定義
transition(":leave", [ animate( 600, keyframes([ style({ offset: 0.3, transform: "translateX(-80px)" }), style({ offset: 1, transform: "translateX(100%)" }) ]) ) ])
Angular 提供了和動畫相關的兩個回呼函數,分別為動畫開始執行時和動畫執行完成後
<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、將動畫的定義放置在單獨的檔案中,方便多組件調用。
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、抽出具體的動畫定義,方便多動畫呼叫。
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、呼叫動畫時傳遞運動總時間,延遲時間,運動形式
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
方法查找元素並為元素創建動畫
import { slide } from "./animations" animations: [ slide, trigger("todoAnimations", [ transition(":enter", [ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), // 查询子级动画 使其执行 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>
預設情況下,父級動畫和子級動畫按照順序執行,先執行父級動畫,再執行子等級動畫,可以使用group
方法讓其並行
trigger("todoAnimations", [ transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", animateChild()) ]) ]) ])
Angular 提供了stagger 方法,在多個元素同時執行同一個動畫時,讓每個元素動畫的執行依序延遲。
transition(":enter", [ group([ query("h2", [ style({ transform: "translateY(-30px)" }), animate(300) ]), query("@slide", stagger(200, animateChild())) ]) ])
注意:stagger 方法只能在query 方法內部使用
Angular 提供了state
方法用於定義狀態。
1、預設程式碼解析
<div class="container"> <div class="panel panel-default"> <div class="panel-heading" (click)="toggle()"> 一套框架, 多种平台, 移动端 & 桌面端 </div> <div class="panel-body"> <p> 使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。 </p> <p> 从原型到全球部署,Angular 都能带给你支撑 Google 大型应用的那些高延展性基础设施与技术。 </p> <p> 通过 Web Worker 和服务端渲染,达到在如今(以及未来)的 Web 平台上所能达到的最高速度。 Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。 </p> <p> 学会用 Angular 构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。 </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、建立動畫
trigger("expandCollapse", [ // 使用 state 方法定义折叠状态元素对应的样式 state( "collapsed", style({ height: 0, overflow: "hidden", paddingTop: 0, paddingBottom: 0 }) ), // 使用 state 方法定义展开状态元素对应的样式 state("expanded", style({ height: "*", overflow: "auto" })), // 定义展开动画 transition("collapsed => expanded", animate("400ms ease-out")), // 定义折叠动画 transition("expanded => collapsed", animate("400ms ease-in")) ])
<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1、为路由添加状态标识,此标识即为路由执行动画时的自定义状态
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、通过路由插座对象获取路由状态标识,并将标识传递给动画的调用者,让动画执行当前要执行的状态是什么
<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 设置为相对定位,将它的直接一级子元素设置成绝对定位
/* styles.css */ .routerContainer { position: relative; } .routerContainer > * { position: absolute; left: 0; top: 0; width: 100%; }
4、创建动画
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 }) ) ) ]) ]) ])
更多编程相关知识,请访问:编程视频!!
以上是angular學習之深入聊聊狀態與動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!