深入淺析Angular怎麼使用動畫

這篇文章帶大家了解Angular 動畫，希望對大家有幫助！ ！

1.  狀態

1.1  什麼是狀態

狀態表示的是運動的元素在運動的不同時期所呈現的樣式。 【相關教學推薦：《angular教學》】

#1.2  狀態的類型

在Angular 中，有三種類型的狀態，分別為：void、*、custom

##void：當元素在記憶體中建立好但尚未被加入到DOM 或將元素從DOM 中刪除時會發生此狀態

*：元素被插入到

DOM 樹之後的狀態，或是已經在DOM樹中的元素的狀態，也叫預設狀態

custom：自訂狀態，元素預設就在頁面之中，從一個狀態移動到另一個狀態，例如面板的折疊和展開。

1.3  進出場​​動畫

進場動畫是指元素被創造後以動畫的形式出現在使用者面前，進場動畫的狀態用

void => * 表示，別名為:enter

出場動畫是指元素在刪除前執行的一段告別動畫，出場動畫的狀態用

* => void，別名:leave

#2.  快速上手

在使用動畫功能之前，需要引入動畫模組，即

BrowserAnimationsModule

import { BrowserAnimationsModule } from "@angular/platform-browser/animations"

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

預設程式碼解析，

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 id="Todos">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)
  }
}

創建動畫

• 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%)" }))
        ])
      ])
    ]
  })

  <li @slide></li>

注意：入場動畫中可以不指定元素的預設狀態，

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%)" }))

3.  關鍵影格動畫

關鍵影格動畫使用

keyframes

方法定義<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>transition(&quot;:leave&quot;, [ animate( 600, keyframes([ style({ offset: 0.3, transform: &quot;translateX(-80px)&quot; }), style({ offset: 1, transform: &quot;translateX(100%)&quot; }) ]) ) ])</pre><div class="contentsignin">登入後複製</div></div>4.  動畫回呼

Angular

提供了和動畫相關的兩個回呼函數，分別為動畫開始執行時和動畫執行完成後<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;li @slide (@slide.start)=&quot;start($event)&quot; (@slide.done)=&quot;done($event)&quot;&gt;&lt;/li&gt;</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { AnimationEvent } from &quot;@angular/animations&quot; start(event: AnimationEvent) { console.log(event) } done(event: AnimationEvent) { console.log(event) }</pre><div class="contentsignin">登入後複製</div></div>#5.  創建可重複使用動畫

將動畫的定義放置在單獨的檔案中，方便多元件呼叫。

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]
})

抽取具體的動畫定義，方便多動畫呼叫。

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))
])

呼叫動畫時傳遞運動總時間，延遲時間，運動形式

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"}}))

6.  查詢元素執行動畫

Angular

中提供了query 方法尋找元素並為元素建立動畫<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { slide } from &quot;./animations&quot; animations: [ slide, trigger(&quot;todoAnimations&quot;, [ transition(&quot;:enter&quot;, [ query(&quot;h2&quot;, [ style({ transform: &quot;translateY(-30px)&quot; }), animate(300) ]), // 查询子级动画 使其执行 query(&quot;@slide&quot;, animateChild()) ]) ]) ]</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;container&quot; @todoAnimations&gt; &lt;h2 id=&quot;Todos&quot;&gt;Todos&lt;/h2&gt; &lt;ul class=&quot;list-group&quot;&gt; &lt;li @slide (click)=&quot;removeItem(i)&quot; *ngFor=&quot;let item of todos; let i = index&quot; class=&quot;list-group-item&quot; &gt; {{ item }} &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre><div class="contentsignin">登入後複製</div></div>預設情況下，父級動畫和子級動畫依照順序執行，先執行父級動畫，再執行子級動畫，可以使用 

group

方法讓其並行<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>trigger(&quot;todoAnimations&quot;, [ transition(&quot;:enter&quot;, [ group([ query(&quot;h2&quot;, [ style({ transform: &quot;translateY(-30px)&quot; }), animate(300) ]), query(&quot;@slide&quot;, animateChild()) ]) ]) ])</pre><div class="contentsignin">登入後複製</div></div>7.  交錯動畫

Angular

提供了stagger 方法，在多個元素同時執行同一個動畫時，讓每個元素動畫的執行依序延遲。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>transition(&quot;:enter&quot;, [ group([ query(&quot;h2&quot;, [ style({ transform: &quot;translateY(-30px)&quot; }), animate(300) ]), query(&quot;@slide&quot;, stagger(200, animateChild())) ]) ])</pre><div class="contentsignin">登入後複製</div></div>

注意：

stagger

方法只能在query 方法內部使用

8.  自訂狀態動畫

Angular

提供了state 方法用於定義狀態。

預設程式碼解析

<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
  }
}

建立動畫

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 ? &#39;expanded&#39; : &#39;collapsed&#39;"></div>

9. 路由动画

为路由添加状态标识，此标识即为路由执行动画时的自定义状态

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"
    }
  }
]

通过路由插座对象获取路由状态标识，并将标识传递给动画的调用者，让动画执行当前要执行的状态是什么

<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
    )
  }
}

将 routerContainer 设置为相对定位，将它的直接一级子元素设置成绝对定位

/* styles.css */
.routerContainer {
  position: relative;
}

.routerContainer > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

创建动画

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中文網其他相關文章！