AE動(dòng)效資源怎么高保真輸出？

引言

日常工作中，動(dòng)效是UI設(shè)計(jì)和用戶體驗(yàn)的重要組成部分?，F(xiàn)在一個(gè)設(shè)計(jì)如果不加入動(dòng)效，那么就像是沒(méi)有完成一樣。

本文就UI工作中常見(jiàn)的動(dòng)效資源輸出方式做了一些整理，希望對(duì)各位小伙伴們有所助益。

動(dòng)效資源怎么輸出?

其實(shí)有很多方法可以輸出打造動(dòng)效，比如：UI設(shè)計(jì)師，經(jīng)常做一些界面交互動(dòng)畫(huà)，比如刷新，加載，以及微動(dòng)效等等…常見(jiàn)的資源輸出包括png序列圖，gif圖，隨之而來(lái)的問(wèn)題就是動(dòng)畫(huà)時(shí)間節(jié)點(diǎn)不好把控，落地還原度差。

那如何解決這個(gè)問(wèn)題呢?

Bodymovin和Lottie，把AE動(dòng)畫(huà)轉(zhuǎn)換成json原生動(dòng)畫(huà)文件，跨平臺(tái)適配!JSON(Javascript Object Notation的縮寫(xiě))將你的圖片和動(dòng)畫(huà)轉(zhuǎn)換成代碼。JSON動(dòng)畫(huà)的優(yōu)點(diǎn)是，大小比GIF小很多，而且支持全透明(不需要BG)，并且可以跨平臺(tái)適配。

幾年前，Airbnb的人創(chuàng)建了一個(gè)名為L(zhǎng)ottie的工具，使用JSON文件，讓小動(dòng)畫(huà)制作變得非常簡(jiǎn)單。Lottie是一個(gè)適用于iOS、Android和React Native的開(kāi)源庫(kù)，可以實(shí)時(shí)渲染動(dòng)畫(huà)。如果你還沒(méi)有嘗試過(guò)它，一定要給它一個(gè)機(jī)會(huì)。

接下來(lái)我們需要安裝bodymovin插件

資源鏈接地址：復(fù)制這段內(nèi)容后打開(kāi)百度網(wǎng)盤App，操作更方便哦。

鏈接：https://pan.baidu.com/s/14yawhLwdbvwHK_qUTN0NhA（PS：如果資源失效加QQ：435946716獲取最新鏈接。）

提取碼：81sV

方法一：

1.復(fù)制zxp文件到桌面，拖拽zxp文件到ExtensionManager軟件或者ZXPInstaller即可安裝，如下圖

2.打開(kāi)AE軟件，在頂部菜單欄，窗口>擴(kuò)展下即可找到

方法二：

1.把zxp后綴改為zip，解壓，然后拷貝文件夾到一下位置:

Win : C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

Mac : ~/資源庫(kù)/Application Support/Adobe/CEP/extensions

MAC如何找到extensions文件夾?

打開(kāi)Finder，Shift+Commad+G，前往文件夾，輸入：~/Library/Application Support/Adobe/,然后找到CEP/extensions文件夾，如果沒(méi)有的話就手動(dòng)新建一個(gè)

Win系統(tǒng)：雙擊運(yùn)行一下Add Keys.reg

Mac系統(tǒng)：

終端運(yùn)行下面代碼，按回車即可(訪達(dá)>前往>實(shí)用工具>終端 或者 應(yīng)用程序>實(shí)用工具>終端)

defaults write com.adobe.CSXS.5 PlayerDebugMode 1

defaults write com.adobe.CSXS.6 PlayerDebugMode 1

defaults write com.adobe.CSXS.7 PlayerDebugMode 1

defaults write com.adobe.CSXS.8 PlayerDebugMode 1

defaults write com.adobe.CSXS.9 PlayerDebugMode 1

2.打開(kāi)AE，在頂部菜單，窗口-擴(kuò)展，就可以看到插件了

動(dòng)畫(huà)資源怎么輸出json代碼?把做好的動(dòng)畫(huà)文件執(zhí)行下面步驟

1)準(zhǔn)備好做好的動(dòng)畫(huà)文件，然后從窗口-擴(kuò)展-打開(kāi)bodymovin插件

2)json文件預(yù)覽，打開(kāi)插件點(diǎn)擊preview-browse-選擇導(dǎo)出的json

動(dòng)畫(huà)資源交接

設(shè)計(jì)師只需要把此文件給工程師，就可以完成交接了。相比文章開(kāi)頭我們說(shuō)的一些png序列或者GIF，json文件的優(yōu)勢(shì)顯而易見(jiàn)，可以大大提高動(dòng)畫(huà)還原度的問(wèn)題，節(jié)約開(kāi)發(fā)成本。

總結(jié)

以上就是本次分享的關(guān)于動(dòng)畫(huà)落地效果還原度差的解決方案，另外任何工具插件都是輔助我們?cè)O(shè)計(jì)的，json也不是萬(wàn)能的，它不支持表達(dá)式和3D動(dòng)畫(huà),多跟工程師溝通才是王道，作為一名合格的UI設(shè)計(jì)師我們也要學(xué)會(huì)抵制無(wú)聊的動(dòng)效。(界面內(nèi)絕大部分動(dòng)畫(huà)形式它都能很好的進(jìn)行實(shí)現(xiàn)，讓你的動(dòng)效完美落地)

猜你喜歡：

UI設(shè)計(jì)之色彩的心理效應(yīng)

ui設(shè)計(jì)是什么?UI設(shè)計(jì)行業(yè)前景怎么樣?

UI設(shè)計(jì)原則：匯總深入人心的UI設(shè)計(jì)原則

黑馬程序員全鏈路UI/UI設(shè)計(jì)課程