移動端動畫方案
- 2019 年 12 月 4 日
- 筆記
本文作者：IMWeb 袁飛翔 原文出處：IMWeb社區 未經同意，禁止轉載
前言
花樣直播項目客服端的動畫基本已都使用web來做，總結分享一下
方案列表
- css3動畫
- canvas 動畫
- 播圖片
- gif圖片
各個方案的優缺點
css3動畫
- 優點：啟用css3的3d加速，能夠滿足性能要求；資源文件最小；
- 缺點：元素量多、複雜的動畫難以實現
案例：
canvas 動畫
- 優點：可以用swf文件直接導出生成，在線導出Google Swiffy (感謝Flash大神龍哥的指導）
- 缺點：性能不佳。如果不用swf導出，人工繪製canvas性能也不是很好，況且複雜的動畫很難繪製，能人工繪製的基本就可以使用css3去搞
PS: 最初想用覺得完美，但性能問題被測試叼得不行，之後加班加點換播圖片
播圖片
- 優點：能夠解決一切性能、複雜度的問題
- 缺點： 因為每一幀都需要一張圖片，加載資源較多，不適合持續時間長、尺寸大的動畫
- 注意點：動畫的幀率８幀／秒即可，動畫的尺寸儘可能小，png圖片必須經過無損壓縮，最好使用離線包資源
案例：
- 花樣直播爵位進入動畫1 6.5秒 640*360 400k
- 花樣直播爵位進入動畫7 6.5秒 720*600 2.1M
gif圖片
- 優點： 容易、簡單！貌似可以為所欲為的做動畫了
- 致命點：webview透明的時候很有可能出現鋸齒，透明效果很差（PS： 僅此一點你會被產品批的不行，改其它方案吧。）
案例：
結尾
具備離線包功能的客服端，盡量使用播圖片方案。否則性能問題是一個很難踏過的大坑
