[譯] 5 個可以立刻在你的 Ionic App 中用上的動畫包

lsvih發表於2019-01-30
APP動畫

使用 Ionic 與 Angular 有許多方法可以讓你在你的 app 中製作動畫。你可以直接使用 Angular Animations，也可以使用其它的包（僅需幾分鐘就能裝好）來實現動畫。

在本文中我們將介紹 5 個不同的動畫包，可以輕鬆地將它們引入你的 APP，使用它們預設的動畫或者利用這幾個框架輕鬆自定義動畫效果。

ionic-animation-packages-example

你可以使用以下程式碼初始化一個空白的 Ionic 4 App：

ionic start animationPackages blank --type=angular
複製程式碼

我們不會完整地摘錄這些包的文件，只會展示如何將它們整合進你的 App 這一重要部分。

1. Anime.js

只要安裝好這個包，不需要任何別的操作就能將它引入你的 App 中了。你只需要簡單地按照下列程式碼即可：

npm install animejs
複製程式碼

通過它你可以讓你在你的 Javascript 程式碼中建立動畫。這也是它與絕大多數包不同的地方：別的包大多是通過新增 CSS class，或者在你的 class 中用特定的語法來建立動畫的。

通過 Anime.js，你能輕鬆地為螢幕中的元素設定動畫並移動它們。下面是建立一個小方塊，並用一個函式來建立動畫效果的程式碼（我們給小方塊加了一些 CSS 樣式，這樣它才能在螢幕上有一定的大小）：

// HTML
<div class="animate-me" #box></div>
  
// SCSS
 
.animate-me {
    width: 50px;
    height: 50px;
    padding: 20px;
    background: #0000ff;
}
 
// TS
import * as anime from 'animejs';
 
callAnime() {
    anime({
      targets: '.animate-me',
      translateX: [
        { value: 100, duration: 1200 },
        { value: 0, duration: 800 }
      ],
      rotate: '1turn',
      backgroundColor: '#ff00ff',
      duration: 2000
    });
}
複製程式碼

我們可以用元素的 CSS class 來輕鬆指定應用動畫效果的目標（即 target 引數），其它的引數都不言自明。這也是這個包的強大之處：

你可以輕鬆理解這個包的一些基本命令，快速上手並建立強大的動畫效果。如果選擇用這個包來建立動畫，你不需要學習又臭又長的 API。

2. Magic CSS

這個包依賴於預設好的 CSS 動畫，你可以將這些動畫加入到元素中。安裝方式與前文相同：

npm install magic.css
複製程式碼

不過此時你需要從 node module 將實際的 CSS 檔案匯入進來，因此你得用類似下面的方法來修改你的 src/global.scss：

@import '~magic.css/magic.min.css';
複製程式碼

現在可以在你的 app 中用 Magic CSS 了。你可以直接在元素上新增動畫的 class，或者用下面這種方式通過 @ViewChild() 標註將動畫 class 加入到元素的 classList 中去，這樣就能在特定的時間來建立動畫了：

// HTML
<div class="animate-me" #box></div>
 
// TS
@ViewChild('box') box: ElementRef;
 
doMagic() {
    this.box.nativeElement.classList.add('magictime');
    this.box.nativeElement.classList.add('foolishIn');
}
複製程式碼

每次你都要先加入 magictime class，然後加入你要用的動畫的 class 名。

這個包沒有提供那麼多的自定義選項，不過如果你只需要簡單且快速的 CSS 動畫，試試它準沒錯！

3. Number Flip

這是一個小巧的包。我最近才發現它，非常喜歡它的動畫。不過只有在一種特定的情景下，你才會需要將它加入你的 app（你可以看看它的 Github page，那裡面的效果就是它唯一的效果）。安裝方式很簡單，依然是：

npm install number-flip
複製程式碼

假設你的 Ionic app 的頂欄上有一些計數器，現在你希望通過動畫效果來修改它的數字。

這個情景中，number flip 包就非常好用，你可以用帥帥的動畫效果讓一個元素翻轉，並在翻轉時修改元素裡面的數字。我用一些程式碼建立了對該元素的引用，當觸發 flip() 函式的時候會直接呼叫動畫包裡面的 flipTo() 函式：

// HTML
<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Animations
    </ion-title>
    <ion-buttons slot="end">
      <div #numberbtn></div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
 
// TS
import { Flip } from 'number-flip';
 
@ViewChild('numberbtn', { read: ElementRef }) private btn: ElementRef;
 
flip() {
  if (!this.flipAnim) {
    this.flipAnim = new Flip({
      node: this.btn.nativeElement,
      from: '9999',
    });
  }
 
  this.flipAnim.flipTo({
    to: Math.floor((Math.random() * 1000) + 1)
  });
}
複製程式碼

當然這個包沒有任何別的高階動畫效果，它僅僅在這種特殊情景下特別好用。如果你要使用計時器或者建立數字動畫，考慮考慮它吧！

4. Animate CSS

它可是一位重磅玩家，在這幾個包中就屬它的 Github star 最多。它的口號是“像倒水一樣新增 CSS 動畫”，事實上它的用法確特別簡單。安裝方法和前文一樣：

npm install animate.css
複製程式碼

由於這個包依賴於 CSS，因此使用它前我們也要通過下面的方式將 CSS 檔案匯入 src/global.scss 中：

@import '~animate.css/animate.min.css';
複製程式碼

現在，我們就可以享受這個包各種預設好的超帥的 CSS 動畫了（每個用例都對應著一種動畫）。我們還可以新增一些其它的 class，比如說 infinite 讓動畫迴圈播放，或者讓動畫延遲一段時間播放。

在下面的例子中，我們 ngFor 和它的 index 來定義不同的動畫延遲（當然在真實的 app 中不會有這麼慢的動畫），然後用 ViewChildren 列表來為需要飛出來的元素增加相應的動畫 class：

// HTML
<h1 text-center class="animated infinite rubberBand delay-1s">Example</h1>
 
<ion-list>
    <ion-item *ngFor="let val of ['First', 'Second', 'Third']; let i = index;" 
    class="animated fadeInLeft delay-{{ i }}s" #itemlist>
      {{ val }} Item
    </ion-item>
</ion-list>
 
// TS
@ViewChildren('itemlist', { read: ElementRef }) items: QueryList<ElementRef>;
 
animateItems() {
  let elements = this.items.toArray();
  elements.map(elem => {
    return elem.nativeElement.classList.add('zoomOutRight')
  })
}
複製程式碼

如果你想要個預設好大量 CSS 動畫的武器庫，你一定要試試它。雖然它已經預設好了很多東西，但你也可以根據你的需要來進行組合！

5. Bounce.js

最後，我想測試這個特別靈活的包。它也可以用 Javascript 來編寫動畫。這個包的安裝方法和其它幾個包一樣：

npm install bounce.js
複製程式碼

這個包的文件非常完整，你可能要多花一點時間來探索所有的配置，比如下面是他們頁面廣告中的一個片段：

// HTML
<ion-button expand="block" (click)="bounce()" #bouncebtn>Bounce</ion-button>
 
// TS
import * as Bounce from 'bounce.js';
 
@ViewChild('bouncebtn', { read: ElementRef })bouncebtn: ElementRef;
 
bounce() {
  var bounce = new Bounce();
  bounce
    .translate({
      from: { x: -300, y: 0 },
      to: { x: 0, y: 0 },
      duration: 600,
      stiffness: 4
    })
    .scale({
      from: { x: 1, y: 1 },
      to: { x: 0.1, y: 2.3 },
      easing: "sway",
      duration: 800,
      delay: 65,
      stiffness: 2
    })
    .scale({
      from: { x: 1, y: 1 },
      to: { x: 5, y: 1 },
      easing: "sway",
      duration: 300,
      delay: 30,
    })
    .applyTo(this.bouncebtn.nativeElement);
}
複製程式碼

如你所見，所有步驟都在你的 Javascript 程式碼中。你可以用這個包在任何粒度上建立複雜的關鍵幀動畫。

不過這種靈活性是要付出代價的，你需要深入地研究它的文件，因此比起其它的包你需要更多的時間才能入門。不過，如果你付出了時間，它也會回報你的付出：你可以用它在 app 中建立任何你想要的動畫！

總結

在推薦的這幾個包中，有一些包可以讓你快速做出產品，有些包則需要你學習它們的語法；有些包已經預設好了一切動畫，而有些包則可以讓你建立更靈活的動畫；有些包是純 CSS，還有一些是純 JS。

沒有哪個是真正“最好的”，因為它們在不同的場景下有著各自的優勢。另外，注意這些包的大小也是一件重要的事，你也不希望加太多的東西影響 app 的下載時間吧。

最後打個廣告，除了這些包之外你也可以使用標準的 Angular animations 來製作動畫。Ionic Academy 有一個特別課程專門介紹這塊內容哦！

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章