http://airbnb.io/lottie/#/web
lottie-web一個适用于web，android，ios，react native和windows 的移動庫，
它可以使用bodymovin解析以json 格式導出的adobe after effects動畫，并在移動裝置上進行本地渲染.
通過一個叫 bodymovin 的開源 after effects 插件，以 json 檔案的形式進行輸出，lottie 通過 json 格式下載下傳動畫資料并實時提供給開發者。
① bodymovin插件下載下傳安裝
② 安裝并解壓bodymovin
③ 打開ae，添加bodymovin擴充
④ 導出data.json檔案，動畫的資料檔案 詳細可參考：炫酷神器，ae插件bodymovin.zxp的安裝與使用
⑤ api
暫停/停止/播放：
跳轉之某幀并播放：
設定fp：
事件監聽：
lottie方法方案是由設計師出動畫，導出為json，給前端播放。是以，使用lottie方案的好處在于：
① 動畫由設計使用專業的動畫制作工具adobe after effects來實作，使動畫實作更加友善，動畫效果也更好；
② 前端可以友善的調用動畫，并對動畫進行控制，減少前端動畫工作量；
③ 設計制作動畫，前端展現動畫，專業人做專業事，分工合理；
④ 賣家秀即買家秀，還原程度百分之百；
⑤ 使用lottie方案，json檔案大小會比gif檔案小很多，性能也會更好。
① lottie-web檔案本身仍然比較大，lottie.js大小為513k，輕量版壓縮後也有144k，經過gzip後，大小為39k。是以，需要注意lottie-web的加載。目前h5項目有離線包，pc項目也會上pwa，會對其進行緩存，保證加載速度。
② lottie動畫其實可以了解為svg動畫/canvas動畫，不能給已存在的html添加動畫效果；
③ 動畫json檔案的導出，目前是将ae裡面的參數一一導出成json内容，如果設計師建了很多的圖層，可能仍然有json檔案比較大（20kb）的問題。需要設計師遵循一定的規範。
④ 有很少量的ae動畫效果，lottie無法實作，有些是因為性能問題，有些是沒有做。比如：描邊動畫等。
一個小的練習
js
html
css
然後就是要和ui那邊商讨吧這樣的設計和動畫，是不是進階了呢 加油呀