亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

如何讓動效完美還原？送你兩個超厲害的免費插件！

2019-3-20 資深UI設計者

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

作為視覺設計師你是否會遇到這樣的問題，當需要做一個 loading 或者其他動效的時候，總會或多或少的出現(xiàn)一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉(zhuǎn)到 AE 制作動效，如何不再受 GIF 導出的失真問題困擾，如何讓開發(fā)完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。

AEUX

AEUX 是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在 AE 里解決圖形分組和分層的問題，減少導出圖片或者轉(zhuǎn)入 Illustrator 處理帶來的不必要的重復動作。

以下是我做的一個簡單小案例，通過此次案例將介紹怎么更好的使用這個插件：

首先在 Sketch 內(nèi)將圖層進行分組，在多圖層的情況下，需要在前期進行動效構(gòu)思，根據(jù)構(gòu)思在 Sketch 里對圖層進行分組，所做的分組將會是你在 AE 里的合成分組。

分好組后該如何導入才能讓兩者圖層統(tǒng)一？

方法一：直接復制選中圖層

安裝好插件后，打開 AEUX，選擇你將導入到 AE 里的圖層，點擊 Send selection to Ae，同時在AE里打開安裝的 AEUX插件，在 BUILD COMP 區(qū)域出現(xiàn)了從 Sketch 導入的圖層數(shù)量，勾選 Precomp groups，點擊將自動加載入 AE 合成里。

方法二：導出json文件

從 Sketch 的 AEUX 面板里點擊 Export AEUX.json 導出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導出的 json 拖入到 BUILD COMP 區(qū)域，或者點擊「曲別針」icon打開 json 文件。

這樣導入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。

避坑指南

如果在 sketch 內(nèi)，分組圖層不在同一組內(nèi)，導入 AE 后會出現(xiàn)變形和位移的情況。

如果 sketch 內(nèi)形狀圖層有投影/漸變/point type 的編輯形狀時，導入 AE 后將出現(xiàn)投影消失，漸變消失，形狀變形的情況，在遇到這種情況時，會通過導出圖片的方式處理。

導入 AE 的 AEUX 面板時如果沒有勾選 Precomp groups，多圖層導入的情況下，組內(nèi)的圖層都會生成在 AE 中的同一個合成中。

Sketch的AEUX面板其他功能介紹

1. Detach symbols

這是一個解除 symbol 的功能，在 sketch 內(nèi)如果沒有解除 symbol，導入到 AE 里將出現(xiàn)圖形位移和變形的情況。

2. Flatten shapes

AEUX 支持布爾運算，但是在一個組中混合不同的運算符（如添加然后減去）對于Ae來說比較困難。點擊 Flatten shapes 可以合并布爾運算圖形。

3. Images to symbols

Sketch 只能導出它在畫板上看到的內(nèi)容。如果在 sketch 內(nèi)圖像的一部分超出畫板邊界，復制到 AE 內(nèi)部的圖像將出現(xiàn)位移的情況。導出前點擊 Images to symbols 不會發(fā)生被裁剪和位移的情況。

AE的AEUX面板其他功能介紹

1. Come size multiplier：切換倍數(shù)

可以設置 sketch 畫板的倍數(shù)合成。

2. Auto build artboards：自動構(gòu)建合成

導入前勾選此功能，在 sketch 的 AEUX面板中復制圖層后，在 AE 里不需要任何操作，它會自動復制圖層導入到創(chuàng)建合成中。

3. Convert to precomp：創(chuàng)建合成

同時選中單一圖層，可以將他們建立一個新的合成。

4. Un-Precomp group：解除合成分組

點擊可以解除合成的分組，變成單一的一個一個的圖層

5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層

6. Delete group layers：刪除父級圖層

雖然現(xiàn)在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用 sketch 畫插圖的設計師提高動效制作效率，減少不必要的操作步驟。

Bodymovin

在動效制作好后，通常我們會導出 mov 然后導入 PS 里生成 gif 格式，但是 gif 會出現(xiàn)質(zhì)量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發(fā)的 lottie 動效可以完美的解決這些問題，而實現(xiàn) lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。

Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在制作動效時導出 json 文件直接給到開發(fā)，可以幫助提高實現(xiàn)動效效率，同時提高動效質(zhì)量。

1. 它還有很多的優(yōu)點

它可以支持 Android、iOS平臺；
導出的文件體積小，方便開發(fā)使用；
實現(xiàn)效果佳，可以支持漸變等效果。

2. 在使用中有幾點注意

在使用前期，這種方法是否適合你現(xiàn)在所做的動效，lottie 是針對矢量動畫開發(fā)的，不太適合圖片過多的情況，圖片過多會增加文件負荷，所以最好是將圖片轉(zhuǎn)化為路徑動畫。
在 AE 里導入到 Lottie 的圖層不能識別矢量漸變。
不能支持外置插件的效果，比如粒子、光效等。
需要與前端開發(fā)溝通，他們是否愿意使用。
導出給開發(fā)的文件中需要有完整視頻參考，開發(fā)可以通過完整視頻知道 loading 位置和效果，同時如果出現(xiàn) json 導出錯誤的情況，開發(fā)可以查看，遇到不一樣的地方可以詢問設計師。
開發(fā)完成后需要走查，看是否與你預期一致。

3. 所需軟件

ZXP installer