更新時(shí)間:2021-02-04 來源:傳智教育 瀏覽量:
引言
日常工作中,動(dòng)效是UI設(shè)計(jì)和用戶體驗(yàn)的重要組成部分?,F(xiàn)在一個(gè)設(shè)計(jì)如果不加入動(dòng)效,那么就像是沒有完成一樣。
本文就UI工作中常見的動(dòng)效資源輸出方式做了一些整理,希望對各位小伙伴們有所助益。
動(dòng)效資源怎么輸出?
其實(shí)有很多方法可以輸出打造動(dòng)效,比如:UI設(shè)計(jì)師,經(jīng)常做一些界面交互動(dòng)畫,比如刷新,加載,以及微動(dòng)效等等…常見的資源輸出包括png序列圖,gif圖,隨之而來的問題就是動(dòng)畫時(shí)間節(jié)點(diǎn)不好把控,落地還原度差。
那如何解決這個(gè)問題呢?
Bodymovin和Lottie,把AE動(dòng)畫轉(zhuǎn)換成json原生動(dòng)畫文件,跨平臺(tái)適配!JSON(Javascript Object Notation的縮寫)將你的圖片和動(dòng)畫轉(zhuǎn)換成代碼。JSON動(dòng)畫的優(yōu)點(diǎn)是,大小比GIF小很多,而且支持全透明(不需要BG),并且可以跨平臺(tái)適配。
幾年前,Airbnb的人創(chuàng)建了一個(gè)名為Lottie的工具,使用JSON文件,讓小動(dòng)畫制作變得非常簡單。Lottie是一個(gè)適用于iOS、Android和React Native的開源庫,可以實(shí)時(shí)渲染動(dòng)畫。如果你還沒有嘗試過它,一定要給它一個(gè)機(jī)會(huì)。
接下來我們需要安裝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文件夾,如果沒有的話就手動(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.打開AE,在頂部菜單,窗口-擴(kuò)展,就可以看到插件了
動(dòng)畫資源怎么輸出json代碼?把做好的動(dòng)畫文件執(zhí)行下面步驟
1)準(zhǔn)備好做好的動(dòng)畫文件,然后從窗口-擴(kuò)展-打開bodymovin插件
2)json文件預(yù)覽,打開插件點(diǎn)擊preview-browse-選擇導(dǎo)出的json
動(dòng)畫資源交接
設(shè)計(jì)師只需要把此文件給工程師,就可以完成交接了。相比文章開頭我們說的一些png序列或者GIF,json文件的優(yōu)勢顯而易見,可以大大提高動(dòng)畫還原度的問題,節(jié)約開發(fā)成本。
總結(jié)
以上就是本次分享的關(guān)于動(dòng)畫落地效果還原度差的解決方案,另外任何工具插件都是輔助我們設(shè)計(jì)的,json也不是萬能的,它不支持表達(dá)式和3D動(dòng)畫,多跟工程師溝通才是王道,作為一名合格的UI設(shè)計(jì)師我們也要學(xué)會(huì)抵制無聊的動(dòng)效。(界面內(nèi)絕大部分動(dòng)畫形式它都能很好的進(jìn)行實(shí)現(xiàn),讓你的動(dòng)效完美落地)
猜你喜歡:
ui設(shè)計(jì)是什么?UI設(shè)計(jì)行業(yè)前景怎么樣?