前言

我們?cè)谄匠５?UI 設(shè)計(jì)工作中，經(jīng)常需要通過 AE 來做一些小動(dòng)效，比如生長、毛玻璃等效果，這樣有利于刺激用戶去點(diǎn)擊，增強(qiáng)趣味感，從而提升轉(zhuǎn)化，助力業(yè)務(wù)達(dá)成等目標(biāo)。

其中有一些動(dòng)效技巧經(jīng)常能用到，也是我經(jīng)常反復(fù)去查看的知識(shí)點(diǎn)，在此整理了一波分享給大家，希望能幫助大家在工作中更加得心應(yīng)手。

一、APP 中常見動(dòng)效技巧

1. 數(shù)字遞增/遞減表達(dá)式

我們?cè)谧鲞M(jìn)度百分比、紅包中金額增長、放款金額時(shí)，經(jīng)常能用到一類“數(shù)字遞增/遞減效果；比如如下：

此類情況可使用表達(dá)式：

①數(shù)字遞增表達(dá)式

n=Math.floor(linear(time,0,5,0,2000))

時(shí)間從 0S～5S 數(shù)字從 0～2000 遞增

②數(shù)字遞減表達(dá)式

n=Math.floor(linear(time,0,5,1000,0))

時(shí)間從 0S～5S 數(shù)字從 1000～0 遞減

2. 文字逐個(gè)放大/打字機(jī)效果

在營銷活動(dòng)中，經(jīng)常會(huì)用到文案單個(gè)出現(xiàn)并放大的效果，來形成視覺焦點(diǎn)，吸引用戶目光；比如：

①可使用“縮放”功能：從有到逐個(gè)放大縮小

點(diǎn)擊“動(dòng)畫——縮放”按鈕，調(diào)整起始、縮放參數(shù)

②可打字機(jī)效果：從無到有

效果搜“打字機(jī)”，調(diào)整參數(shù)起始，從前到后依次出現(xiàn)

3. 如何做生長百分比效果

在常用的主要在 icon 制作上，比如：

可通過“修剪路徑”（路徑動(dòng)畫技術(shù)），來控制路徑的出現(xiàn)和消失；

點(diǎn)擊圖層下方“內(nèi)容”的“添加”按鈕，選擇“修剪路徑”，調(diào)節(jié)結(jié)束關(guān)鍵幀即可。

4. 如何做毛玻璃效果

毛玻璃效果在 UI 中很常見，為了提升頁面的品質(zhì)感和層次感；

主要知識(shí)點(diǎn)在于“快速模糊+調(diào)整圖層”

在圖片(需要模糊)上一層新建形狀圖層，給形狀圖層添加“快速方框模糊”效果；選“調(diào)整圖層”，并調(diào)節(jié)模糊半徑、迭代參數(shù)，來達(dá)到預(yù)期效果。（注意：調(diào)整層上的特效會(huì)做用于它之下的所有圖層）。

5. 預(yù)合成后放大不失真的辦法

我們?cè)谛陆祟A(yù)合成后，返回主頁面時(shí)，放大預(yù)合成圖層會(huì)發(fā)現(xiàn)，矢量圖像失真了，不知道大家有沒有遇到這種問題？

解決辦法其實(shí)很簡單：選中太陽這個(gè)按鈕，就可以將該預(yù)合成繼承原來圖層的矢量圖層性質(zhì)，即可進(jìn)行無限放大縮小；

6. 如何修改形狀的內(nèi)外描邊

有時(shí)會(huì)需要修改形狀的內(nèi)外描邊，發(fā)現(xiàn) AE 跟 sketch/PS 不一樣，沒有直接修改的入口，這個(gè)時(shí)候可通過“位移路徑”實(shí)現(xiàn)：

點(diǎn)擊圖層下方“內(nèi)容”的“添加”按鈕，選擇“位移路徑”，調(diào)整“數(shù)量”，減少可實(shí)現(xiàn)為內(nèi)描邊，增加為外描邊；

7. AE 如何導(dǎo)出 mp4 格式

在工作中有些情況下需要我們導(dǎo)出 MP4 格式，但 AE 好像不能直接渲染，可利用 Adobe 家族中的 AME (Adobe Media Encoder)

在 AE 中導(dǎo)出時(shí)選擇——添加到AME隊(duì)列；

打開 AME，在渲染隊(duì)列中會(huì)出現(xiàn)剛才的合成文件，將導(dǎo)出格式設(shè)置為“H.264”，這是 MP4 的一種編碼格式。其他參數(shù)都可以設(shè)置，最后點(diǎn)擊界面上的綠色渲染按鈕，開始導(dǎo)出視頻。

8. 空對(duì)象、調(diào)整層區(qū)別

①空對(duì)象：空?qǐng)D層，當(dāng)作控制器使用；

用關(guān)聯(lián)器將其它圖層與空對(duì)象進(jìn)行父子鏈接，當(dāng)你改變空對(duì)象的變化屬性時(shí)，其它圖層也會(huì)跟著變化。

（當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問題）。

②調(diào)整層：添加特效

一般用來做色彩校正，添加特效（比如高斯模糊、水波等），調(diào)整層上的特效會(huì)做用于它之下的所有圖層，不必為下面的層逐一添加特效了。

*調(diào)整層可以將特效賦予多個(gè)圖層，

*空對(duì)象則是將變化屬性賦予多個(gè)圖層。

二、AE 導(dǎo)出 Lottie 動(dòng)畫常見問題

1. 漸變填充丟失的解決方案

把中文“漸變填充”改為英文“Gradient Fill”，保存退出再打開軟件才生效哦

2. 當(dāng)描邊被切割時(shí)

是因?yàn)轭A(yù)合成里的畫布尺寸小于外部的畫布尺寸，所以還原時(shí)會(huì)自動(dòng)進(jìn)行切割，導(dǎo)致顯示不全，要注意這塊；

3. 圓角變直角問題

json 在還原時(shí)，不能識(shí)別圓角，所以形狀必須得轉(zhuǎn)曲（路徑合并），這樣才能識(shí)別圓角，否則識(shí)別出來的就是直角，雖然 demo 看著沒啥問題；

（常見于從 sketch 導(dǎo)至 AE 的素材）

結(jié)語

以上就是本文的全部分享內(nèi)容，熟練掌握可以讓設(shè)計(jì)師更快地完成設(shè)計(jì)任務(wù)，從而節(jié)省時(shí)間和精力，提高工作效率希望能在日常工作中對(duì)大家有所幫助。

若是大家還有更常見的動(dòng)效設(shè)計(jì)相關(guān)問題，也歡迎在評(píng)論區(qū)留言一起討論哦~

文章來源：優(yōu)設(shè)網(wǎng)    作者：設(shè)計(jì)渣渣

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。