需求与场景

最近我们因为要在直播加上打赏功能，所以要做一些送礼时的动画
需求就是

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/
欢迎留言讨论