雖然AE擁有優(yōu)秀的動(dòng)畫(huà)制作能力，但是想要用它來(lái)做界面設(shè)計(jì)稿還是很麻煩的，所以通常我們?cè)谠O(shè)計(jì)UI界面設(shè)計(jì)時(shí)都是通過(guò)、、來(lái)設(shè)計(jì)的。

那么，如何將這些文件導(dǎo)出到AE中方便地制作動(dòng)畫(huà)，相信看完這篇文章你不會(huì)感到困擾。

我之前寫(xiě)過(guò)兩篇關(guān)于如何將AI文件導(dǎo)出到AE的文章，如果你還沒(méi)有看過(guò)，請(qǐng)點(diǎn)擊傳送門(mén)：

如何將文件導(dǎo)入AE

以其輕量、高效、易用、海量的腳本，如今成為UI設(shè)計(jì)師最常用的軟件之一。 制作出日常使用的設(shè)計(jì)稿后，不僅要無(wú)縫導(dǎo)出和交互動(dòng)畫(huà)效果，有時(shí)還需要導(dǎo)出AE來(lái)做一些復(fù)雜的動(dòng)畫(huà)設(shè)計(jì)。

那么，我們來(lái)看看如何將文件導(dǎo)出到AE。

首先我們需要安裝一個(gè)來(lái)自AEUX團(tuán)隊(duì)開(kāi)發(fā)維護(hù)的插件（改名前命名），可以到腳本官網(wǎng)下載獲取腳本：

或者在公眾號(hào)“莫蘭動(dòng)效”后臺(tái)回復(fù)“腳本”即可下載莫蘭常用的腳本合集，包括本文中的所有腳本。

下載并解壓后，您將得到兩個(gè)文件，即“AEUX”。 和“AEUX.zxp”。

845b308825f2b9ae0095b24762957ae8

“艾克斯?！?是一個(gè)插件，直接雙擊安裝即可，比較簡(jiǎn)單。 “AEUX.zxp”文件是AE擴(kuò)展文件，安裝方法有點(diǎn)麻煩，可以通過(guò)使用擴(kuò)展安裝程序來(lái)完成。

我們?cè)贏E中使用的其他擴(kuò)展都可以使用這個(gè)安裝程序來(lái)安裝，比如Flow，用于動(dòng)效落地&切換，安裝方法是一樣的。 這里我們使用AEUX作為演示案例。

AE擴(kuò)展安裝程序可以通過(guò)以下網(wǎng)址下載：

可以聽(tīng)說(shuō)官網(wǎng)上都有兩個(gè)系統(tǒng)的版本，大家可以根據(jù)自己的系統(tǒng)下載。

安裝擴(kuò)展安裝程序后，打開(kāi)它sketch可以導(dǎo)入ai嗎，然后將“AEUX.zxp”文件拖到安裝程序窗口中進(jìn)行手動(dòng)安裝，或者使用快捷鍵“Cmd+O”打開(kāi)擴(kuò)展文件。

如上圖所示，安裝程序打開(kāi)后會(huì)有提示窗口。 這里不要忽視它。 您可以單擊“關(guān)閉”按鈕。 完成后會(huì)出現(xiàn)如下提示框，說(shuō)明安裝成功。

之后，您可以在AE的“窗口”菜單欄的“擴(kuò)展”選項(xiàng)中找到名為“AEUX”的擴(kuò)展，并且可以從“插件（）”中下載插件。

這里有兩種導(dǎo)出方式。 第一個(gè)是點(diǎn)擊“”，直接將選定的視口和畫(huà)板內(nèi)容導(dǎo)出到AE。 這個(gè)過(guò)程是在后臺(tái)傳輸?shù)?，比舊版本更快、更穩(wěn)定。

第二種方式是點(diǎn)擊“.json”，筆記本中會(huì)生成一個(gè)名為“AEUX.json”的文件。 此時(shí)，將“AEUX.json”文件推入AE中AEUX面板上方的白色區(qū)域，或者點(diǎn)擊面板中的“ ”按鈕加載“AEUX.json”文件。

兩種方法沒(méi)有太大區(qū)別。 第二種方法還有一個(gè)額外的目的，例如將導(dǎo)入的文件發(fā)送到?jīng)]有該文件的筆記本。

接下來(lái)介紹一下AEUX面板中的其他功能

插件 AEUX 面板

1.

()會(huì)以預(yù)合成的形式導(dǎo)出到AE中。 如果出現(xiàn)錯(cuò)位和變形，可以在導(dǎo)出之前使用此按鈕釋放（組件）。

2.

AEUX支持導(dǎo)出布爾運(yùn)算，并且在一組中混合不同的運(yùn)算符（例如加和除），AE可能無(wú)法正確還原它們，因此對(duì)于更復(fù)雜的布爾運(yùn)算圖形，可以先單擊合并布爾運(yùn)算圖形，然后導(dǎo)出到AE。

3.到

如果發(fā)現(xiàn)導(dǎo)出到AE的文件有裁剪和位移，需要點(diǎn)擊后再導(dǎo)入。 AEUX 只能導(dǎo)入它在畫(huà)板上看到的內(nèi)容。 如果內(nèi)部圖像的一部分超出了畫(huà)板的邊界，它將被刪除。 切。

AE 擴(kuò)展 AEUX 面板

可以看到，我導(dǎo)出了上圖首頁(yè)的設(shè)計(jì)稿，視口多達(dá)168個(gè)。 這么多視口對(duì)我來(lái)說(shuō)做動(dòng)效設(shè)計(jì)很不方便，所以我們來(lái)看看“AEUX”面板里的參數(shù)調(diào)整到合適的動(dòng)畫(huà)效果。

1. 新比較

“”選項(xiàng)是使用該文件創(chuàng)建新的合成。 選擇該選項(xiàng)后，將根據(jù)“”設(shè)置的多個(gè)圖像參數(shù)，手動(dòng)導(dǎo)出所選內(nèi)容并創(chuàng)建新的構(gòu)圖。

2.

其中“”是導(dǎo)出當(dāng)前構(gòu)圖中的文件。 如果已經(jīng)有一個(gè)作品或者已經(jīng)導(dǎo)出過(guò)一次，后續(xù)導(dǎo)出時(shí)選擇“”會(huì)更方便。

3.

該選項(xiàng)下共有三個(gè)參數(shù)：

“es”檢測(cè)形狀參數(shù)。 檢查后，導(dǎo)出的形狀將保留圓角和尺寸屬性。 你可以通過(guò)在AE中展開(kāi)形狀蒙版的“內(nèi)容”來(lái)看到它。

不檢查導(dǎo)出的形狀將以路徑的形式存在，且圓角屬性不可修改。 兩者都有各自的好處，這會(huì)在后續(xù)的AE章節(jié)中提到。

"" 創(chuàng)建一個(gè)組作為預(yù)合成。 經(jīng)過(guò)測(cè)試發(fā)現(xiàn)勾選和取消勾選沒(méi)有什么區(qū)別。 您無(wú)法手動(dòng)將組創(chuàng)建到預(yù)合成中。 這可能是這個(gè)版本的一個(gè)bug，只是和下一個(gè)版本是一樣的。 只有與選項(xiàng)“”配合使用才有效。

“”自動(dòng)創(chuàng)建畫(huà)板，勾選并點(diǎn)擊其中的“”，AE內(nèi)容將被手動(dòng)創(chuàng)建預(yù)合成，如果不勾選，“AEUX”底部的框中??會(huì)有文字提示” AE面板，如上圖所示。 要導(dǎo)出的視口數(shù)量。

此時(shí)，“”選項(xiàng)就起作用了。 勾選后，點(diǎn)擊底部的“”按鈕，其中的組就會(huì)被創(chuàng)建到預(yù)合成中。 如果未選中，視口將是一個(gè)展開(kāi)的列表。

4.

“”部分有四個(gè)選項(xiàng)：

“”：創(chuàng)建組合

該功能不是隨意選擇某個(gè)視口，一鍵構(gòu)建新的合成，而是在視口列表中選擇已經(jīng)制作成引導(dǎo)視口的父視口，即當(dāng)前視圖中的視口。右圖視口名稱(chēng)后帶有紅色“#”。

如果為整個(gè)合成上的所有視口創(chuàng)建預(yù)合成操作，則無(wú)需在 100 多個(gè)視口的列表中一一搜索。 您只需“Cmd+A”將它們?nèi)窟x中，然后單擊“”。 全做完了。

“Un-”：取消合成，制作視口列表

它與之前的功能正好相反。 有時(shí)可以單獨(dú)編輯合成的某些內(nèi)部?jī)?nèi)容。 不使用預(yù)合成更方便。 您可以選擇合成并讓它返回到視口列表。

""：所有父視口可一鍵隱藏和顯示

可以看到上圖中父視口后面的眼睛被照亮了，再次點(diǎn)擊“”就可以關(guān)閉這個(gè)功能。 這個(gè)功能的好處是，如果要為父視口制作動(dòng)畫(huà)，可以在打開(kāi)顯示后選擇父視口。 視口屏幕上會(huì)有一個(gè)邊界框，方便動(dòng)畫(huà)。

因?yàn)檫@里的父視口，即參考線視口上有紅色的“#”，雖然顯示出來(lái)了sketch可以導(dǎo)入ai嗎，但最終不會(huì)渲染導(dǎo)入，所以開(kāi)啟它不會(huì)影響最終的效果。

""：刪除父視口

該功能可以一鍵刪除合成中導(dǎo)出的父視口。 由于以上幾個(gè)功能都是基于父視口的，所以這里請(qǐng)謹(jǐn)慎操作。

可以看到，從最初的“”到現(xiàn)在的“AEUX”，經(jīng)過(guò)多次迭代&更新，已經(jīng)變得越來(lái)越強(qiáng)大，動(dòng)效設(shè)計(jì)的效率也得到了很大的提升。 相信“AEUX”在后續(xù)的版本更新中會(huì)更加強(qiáng)大。 更好更強(qiáng)。

最后我還對(duì)導(dǎo)出的文件做了一個(gè)小動(dòng)畫(huà)效果，嗯，就是下面這個(gè)~~

好了，明天的分享就到這里了。 如果覺(jué)得對(duì)你有幫助，不妨來(lái)一波轉(zhuǎn)發(fā)、留言、關(guān)注三聯(lián)~~~

更多動(dòng)感設(shè)計(jì)內(nèi)容，關(guān)注并star墨染動(dòng)效公眾號(hào)，方便您第一時(shí)間查看動(dòng)態(tài)~~~

近期課程推薦課程

—

往期文章精選

—

如有侵權(quán)請(qǐng)聯(lián)系刪除！