這一次是一個非常非常干的干貨，手把手教你如何配合開發將小動效在頁面中展示出來。主要分為小程序端和APP端，包含APNG格式的圖片和JOSN動畫文件，大家可以在日常工作中選擇自己項目適合的方式。
關于如何做動效，網上有相關的課程和文章，我在這里就不說了，因為我可能做的也沒人家好（偷笑），但是當你做完之后如何交付給開發，如何調試出比較好的效果，我這里可以分享一下我的經驗和踩過的雷。
當然，如果和你配合的開發是個很厲害的大佬，你也可以直接跳過了，因為厲害的大佬可以自己寫動效，寫的可能還比你做的好（我就這樣被虐過）。
巴拉巴拉廢話一堆，現在進入正題，我會分別告訴大家小動效在小程序端和APP端如何導出，配合開發去落地，主要就是使用APNG格式的圖片和JOSN動畫文件。
小程序端
首先小程序是基于各個平臺的開發框架進行開發的，實現技術類似于HTML，和APP在技術上有本質的區別，所以在APP上適用的方法不一定在小程序上適用。雖然有些簡單的小動效開發可以自己直接寫出來，但是開發大大說，寫太多會影響小程序的性能，那就需要我們來幫忙解決了。
APNG圖片介紹
一般情況下我們會使用GIF動圖來實現動效，但是GIF圖片的缺點就是不清晰、有鋸齒、不支持半透明。這里給大家介紹另外一種圖片格式「APNG圖片」。
下載地址：http://isparta.github.io/index.html
實操案例
下面我會用一個小案例來演示怎么制作ANPG動圖。
第一步：導出序列幀
如果你是用PS制作動效，做的是幀動畫，那么需要你把每一幀都單獨導出一張圖片。
如果你是用AE制作動效，那么就需要你將AE的動效導出成PNG序列。
☆注意點
1、選擇導出【png序列】，通道要選擇【RGB+Alpna】
2、可以設置幀序列的數量
導出結果對比
幀速率越高動畫就會越流暢，但是針對簡單的小動效，適當降低幀速率也不會有特別大的影響，所以可以根據實際情況來選擇導出的幀速率。
第二步：將序列幀導入軟件
將已經導出的序列幀再導入到iSparta軟件中，序列幀要按順序命名好。
☆注意點
導入之后需要設置幀頻，控制動效速度的快慢。
最后，導出的文件后綴仍然是「文件名.png」，所以在交付的時候要區分清楚。
如果想要預覽，可以在之前的下載網站，有一個在線查看器，可以預覽效果。
☆壓縮小技巧
導出之后的文件在對比之后，發現雖然效果比GIF圖片要好，但是文件的體積卻比GIF圖片大一點，這里可以直接使用「iSparta」中自帶的壓縮設置來壓縮，但是有時候我會覺得壓縮的質量不太好。那么重點來了，我會先把序列幀圖片在「tinypng」壓縮網站上進行壓縮，然后再導入到「iSparta」軟件中進行APNG圖片制作，過程雖然麻煩，但是效果好。
上面一切都完成之后，就可以直接把這個圖片交付給開發了，小程序端可以直接使用，親測可用。
APP端
APP端的小動效可以通過GIF圖、序列幀、Lottie庫等方式來實現，GIF圖和序列幀開發都很容易使用，但是Lottie庫需要開發去看一下文檔，學習一下如何使用這個庫。
之前項目中，開發都以項目時間緊張為由，讓我們導出GIF圖或者序列幀來實現小動畫，最近在一次優化Loding動畫的需求中，終于說服了開發試一試Lottie庫。
Lottie庫介紹
那么如何用AE制作JSON動畫文件呢？我們需要用到一個AE插件【Bodymovin】，這個插件可以幫助我們直接導出JSON文件。
至于下載及安裝的辦法我也是看的網上大佬的教程，跟著大佬的步驟一步一步來的。
這是學習下載及安裝帖子：https://zhuanlan.zhihu.com/p/26304609
如果不能下載和安裝的話，另外再推薦一個AE插件的網站：https://www.lookae.com/?s=bodymovin
現在我們默認已經下載和安裝好了，就可以開始動手導出JSON文件了。
實操案例
下面我會用之前的小案例來演示怎么導出JSON文件。
第一步：設計制作動效
首先你要先用AE制作好你需要的動效。
☆注意點
1、動效需要都是矢量圖形繪制，最好不要引入位圖文件，如果引入要注意將圖片一起給到開發
2、AE中有些效果Bodymovin導出并不支持，所以小動效不要過于復雜
第二步：導出文件
動效設計好之后就可以啟動Bodymovin插件，直接導出。
我們雖然可以使用demo進行查看，但是還是不知道線上的效果，如果你和開發大大關系好，可以直接發給開發在真機上看一下效果，如果你不想麻煩開發大大，可以自己用下面這個網址，自己在瀏覽器中在線預覽。
一個預覽網站：https://lottiefiles.com/preview
再一個預覽網站：https://svgsprite.com/tools/lottie-player/?render=canvas
對比之后發現JSON文件體積最小，而且開發可以控制大小、速度、循環次數之類的，方便又智能，是比較推薦在APP端使用的。
小結
轉載請注明：學UI網 » 居然還有人問動效怎么實現？我再教最后一次
