最近在學習梳理動效落地，了解了很多方法，有很多小夥伴沒有實際需求也很少知道具體有哪些法子，今天我整理一些落地的工具，方便學習。
最常輸出的方式為：gif、png序列幀、json、svga、apng、webp、svg動畫，這些都比較常用的實現方式。
ae裡選擇選單合成》adobe media encoder佇列。
2.使用ae外掛程式gifgun，一鍵匯出gif圖，方便快捷。
總結：gif最大的問題是色彩最高僅256，有雜色，透明底會周圍有鋸齒毛邊。
1.序列幀：用ae設計好的動效後匯出序列幀，再用壓縮工具，壓縮下檔案的大小，壓縮工具：tinypng、智圖等。
2.雪碧圖：使用ae外掛程式 css sprite exporter(by bigxixi) 直接匯出，裡面包含開發所需的**和雪碧圖(雪碧圖常用網頁，定位起來會比較準確、簡單)。
用ae設計好的動效後使用bodymovin的外掛程式，渲染匯出json檔案，json檔案可以放到官網預覽：
總結：檔案小，可以製作向量和位圖動效，但是lottie暫不支援ae中任何表示式和效果，不支援陰影、顏色疊加效果等，匯出的有可能會有損失，會出現失真等現象，所以匯出後，可以替換成清晰的。
2.(複雜動效)製作一些很複雜的效果，會一些svga無法識別的型別，可以通過ae先導出序列幀，然後把序列幀匯入ae在通過svgaconverter的外掛程式，渲染匯出svga檔案。
總結：svga 除了使用簡單，效能卓越，可以支援其中的大部分效果，設計師使用匯出工具即可生成動畫檔案，適用於複雜的動畫和動效。
1.用ae設計好的動效後匯出序列幀，再把序列幀檔案用isparta軟體生成apng。
2.用ae設計好的動效後使用bx-webp/apng exporter外掛程式，直接匯出apng。
總結：apng色彩完美支援1600萬種顏色，品質大大超越gif圖，並且相對gif記憶體也非常更低，但是相容性會沒那麼好，很多時候會在開發環節就不能很好的支援，移動端可以相容，web瀏覽器相容性差。
1.用ae設計好的動效後匯出序列幀，再把序列幀檔案用isparta軟體生成webp。
2.用ae設計好的動效後使用bx-webp/apng exporter外掛程式，直接匯出webp。
使用keyshape軟體製作svg動畫，匯出svg檔案。
總結：檔案小，可以製作向量動畫，可匯出多個平台的動畫，成本需要學習keyshape軟體使用，上手不難，只有mac版本，付費軟體。
工具只是工具，具體怎麼選擇，先跟開發商量，畢竟有的到開發實現就不能很好的支援等等問題。
文章中涉及的外掛程式安裝教程，網上資源一堆了，我就不做詳細說明了。
還有什麼實現方法歡迎補充~
每天學一點，你學廢了麼。
謝謝**~
Vue路由的切換動效
如果需要路由有過渡動畫，需要在 router view 標籤的外部新增 transition 標籤，如果有多個 router view 標籤則需在外部新增 transition group 同時標籤還需要乙個name屬性並為每乙個元件設定乙個key值。元件過渡過程中，會有css類名進行切換，類名與t...
Qt實現控制項的漸隱漸現動效
主要用到兩個類 qgraphicsopacityeffect和qpropertyanimation qgraphicsopacityeffect opacity newqgraphicsopacityeffect this opacity setopacity 0.5 設定透明度0.5,透明範圍 0...
vue工程全域性設定ajax的等待動效
最近在做vue的專案，使用了element ui作為ui元件庫，採用vuex進行狀態管理，與後台的請求互動採用axios庫實現，原本做的頁面，ajax請求個數也只有三個，將等待動畫的顯示和隱藏通過mutation去控制，但是專案越來越大，請求也越來越多，能否將這個等待動畫與ajax的請求相關聯呢？在...