Angular 2.x折騰記 ：(10) 初步瞭解動畫，以及一步一步寫個動畫效果

前言

過渡動畫這東西，在現代開發中是必不可少的，死板和酷炫與之息息相關；

ng2.x動畫相關的api是併入@angular/core這個核心模塊的，在angular4以後開始獨立

可是，寫法上差別不大，只是引入變了。

angular2+的過渡動畫簡介

Angular動畫是基於標準的Web動畫API(Web Animations API)構建的,

這API比較新，只有較新的瀏覽器才能支持(具體以下): Can I Use : Web Animations API

用起來本質上仍是css2.1&3,只不過是放在api封裝好的對象內，也就是說，css3的基礎必需要好！！

過渡動畫的相關理論

大致的概括一下有這麼幾點

1. 動畫的過渡用於轉場之間，轉場的狀態能夠自定義
2. 默認的轉場包括以下(狀態樣式的生效能夠經過傳遞對應的狀態值生效)
   • inactive => active : 待激活到激活
   • void => * : 進場，也能夠寫成:enter , *是匹配任何動畫狀態，* => *不會觸發轉場動畫
   • * => void : 離場,也能夠寫成:leave, void是表明元素還沒附加到視圖時候的特殊狀態

實戰

這裏拿一個最簡單的漸現過渡來演示，如圖

漸現代碼

import {
  trigger, // 動畫封裝觸發，外部的觸發器
  state, // 轉場狀態控制
  style, // 用來書寫基本的樣式
  transition, // 用來實現css3的 transition
  animate, // 用來實現css3的animations
  keyframes // 用來實現css3 keyframes的
} from '@angular/animations';


export const fadeIn = trigger('fadeIn', [
  state('in', style({ display: 'none' })), // 默認元素不展開
  transition('void => *', [ // 進場動畫
    animate(200, keyframes([
      style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隱藏(透明度爲0)，動畫幀在0%
      style({ height: '*', opacity: 1, offset: 1 }) // 200ms後高度自適應展開，元素展開(透明度爲1)，動畫幀在100%
    ]))
  ]),
  transition('* => void', [
    animate(200, keyframes([
      style({ height: '*', opacity: 1, offset: 0 }), // 與之對應，讓元素從顯示到隱藏一個過渡
      style({ height: '0', opacity: 0, offset: 1 })
    ]))
  ]),
]);


複製代碼

如何使用動畫？

用法很是簡單，在組件內調用便可; 具體有兩種；

1. 在animations內直接寫實現動畫，animations接受的是一個數組
2. 封裝好引入 =》 推薦

components.ts

// 這是寫法2;我是把動畫效果獨立封裝到對應的ts文件內，方便複用
import { fadeIn } from '../../../../../animation/fadeIn';
import { bounceIn } from '../../../../../animation/bounceIn';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn, bounceIn] 
})

// 有人說爲何不直接寫在代碼內，好比下面這種寫法
// 這種寫法推薦在獨立組件或者模塊內，就是給第三方用，組件內部實現一個本身的過渡效果
// 如果對應系統來講，下降耦合度更方便咱們維護，也就是我推薦上面那種寫法的緣由
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [
    trigger('fadeIn', [
      state('in', style({ display: 'none' })), // 默認元素不展開
      transition('void => *', [ // 進場動畫
        animate(200, keyframes([
          style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隱藏(透明度爲0)，動畫幀在0%
          style({ height: '*', opacity: 1, offset: 1 }) // 200ms後高度自適應展開，元素展開(透明度爲1)，動畫幀在100%
        ]))
      ]),
      transition('* => void', [
        animate(200, keyframes([
          style({ height: '*', opacity: 1, offset: 0 }), // 與之對應，讓元素從顯示到隱藏一個過渡
          style({ height: '0', opacity: 0, offset: 1 })
        ]))
      ]),
    ])]
})

複製代碼

html

<!--不傳遞狀態直接調用, 用@符號來引用對應的動畫-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>暫無相關數據信息!!!</h3>
  </div>
 
 
<!--傳遞狀態的，跟常規的綁定一致-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]="list.state">暫無相關數據信息!!!</h3>
複製代碼

總結

1. 動畫應該最大複用化，否則太多動畫，雖然效果挺炫的，那打包體積相對也大不少
2. 對於不支持web-animationsAPI的瀏覽器，應當引入對應的polyfill來兼容【web-animations】

謝謝閱讀，有不對之處請留言，會及時修正。