需求與場景

最近我們因為要在直播加上打賞功能，所以要做一些送禮時的動畫
需求就是

1. 在我們的 react native 的 app 裡加入動畫
2. 疊加在直播畫面之上看起來有質感

目前我們考慮過三個做法。

用 JavaScript 刻

目前我們 App 裡的動畫就是這樣做的。
動畫不多，就是一些轉場跟 Loading，而且也偏簡單。
如果我們要畫煙火星星之類的，就會非常複雜而且花時間。
考慮到以後可能會想加很多不同種類的動畫，這個方法感覺不太可行。

用 GIF 檔

於是我們開始去找現成的動畫，很直覺的就是找 GIF。
插入 GIF 檔顯然比自己刻還快很多，也很多免費資源，但我們遇到幾個問題是：

1. fps （frame per second）低，所以動畫看起來卡卡的
2. 不能半透明。這點非必須，但因為送禮畫面是要疊加在直播畫面上，所以如果可以分透明系數，可以有比較多變化。

Lottie

在評估 GIF 時，我們還發現有一個看起來很新的選項是 Airbnb 開發的新動畫格式：Lottie
官方介紹如下：

Easily add high-quality animation to any native app.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Reference: Lottie (airbnb.design)

因為 Airbnb 在幾年前為止是native 跟 React Native 混用的形式，所以有支援 React Native。這點非常有符合我們的需求。
而且看起來動畫非常滑順，fps比GIF高，而且可以隨意調整半透明度，適合疊加在畫面上，這些也符合我們送禮動畫的需求。

結論

我們決定使用 Lottie，目前開發中用起來感覺不錯，還沒實際release，目前的隱憂是高FPS不知道會不會影響效能。如果之後有發現問題會再分享。

最新文章會分享在臉書：https://www.facebook.com/gigi.wuwu/
歡迎留言討論