AE動效資源怎么高保真輸出？

引言

日常工作中，動效是UI設(shè)計和用戶體驗的重要組成部分。現(xiàn)在一個設(shè)計如果不加入動效，那么就像是沒有完成一樣。

本文就UI工作中常見的動效資源輸出方式做了一些整理，希望對各位小伙伴們有所助益。

動效資源怎么輸出?

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

那如何解決這個問題呢?

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

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

接下來我們需要安裝bodymovin插件

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

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

提取碼：81sV

方法一：

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

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

方法二：

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

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

Mac : ~/資源庫/Application Support/Adobe/CEP/extensions

MAC如何找到extensions文件夾?

打開Finder，Shift+Commad+G，前往文件夾，輸入：~/Library/Application Support/Adobe/,然后找到CEP/extensions文件夾，如果沒有的話就手動新建一個

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.打開AE，在頂部菜單，窗口-擴(kuò)展，就可以看到插件了

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

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

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

動畫資源交接

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

總結(jié)

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

猜你喜歡：

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

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

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

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