前言

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

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

一、APP 中常見動效技巧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 如何做毛玻璃效果

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

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

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

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

我們在新建了預(yù)合成后，返回主頁面時，放大預(yù)合成圖層會發(fā)現(xiàn)，矢量圖像失真了，不知道大家有沒有遇到這種問題？

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

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

有時會需要修改形狀的內(nèi)外描邊，發(fā)現(xiàn) AE 跟 sketch/PS 不一樣，沒有直接修改的入口，這個時候可通過“位移路徑”實(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)出時選擇——添加到AME隊列；

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

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

①空對象：空圖層，當(dāng)作控制器使用；

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

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

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

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

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

*空對象則是將變化屬性賦予多個圖層。

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

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

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

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

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

3. 圓角變直角問題

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

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

結(jié)語

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

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

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

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

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

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

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