AE交互動畫還原度差怎么辦？

引言

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

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

動效資源怎么輸出?

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

那如何解決這個問題呢?

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

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

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

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

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

提取碼：81sV

方法一：

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

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

方法二：

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)：雙擊運行一下Add Keys.reg

Mac系統(tǒng)：

終端運行下面代碼，按回車即可(訪達>前往>實用工具>終端 或者 應用程序>實用工具>終端)

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，在頂部菜單，窗口-擴展，就可以看到插件了

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

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

2)json文件預覽，打開插件點擊preview-browse-選擇導出的json

動畫資源交接

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

總結(jié)

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

猜你喜歡：

UI設計是什么?UI設計師有哪些職能?

色彩心理學：常見色彩的象征意義

色彩構(gòu)成概述

賽博朋克照片處理技法

傳智教育全鏈路UI/UE設計課程