2023-11-14 高勁
前言
我們在平常的 UI 設計工作中，經(jīng)常需要通過 AE 來做一些小動效，比如生長、毛玻璃等效果，這樣有利于刺激用戶去點擊，增強趣味感，從而提升轉(zhuǎn)化，助力業(yè)務達成等目標。
其中有一些動效技巧經(jīng)常能用到，也是我經(jīng)常反復去查看的知識點，在此整理了一波分享給大家，希望能幫助大家在工作中更加得心應手。
1. 數(shù)字遞增/遞減表達式
我們在做進度百分比、紅包中金額增長、放款金額時，經(jīng)常能用到一類“數(shù)字遞增/遞減效果；比如如下：
此類情況可使用表達式：
①數(shù)字遞增表達式
n=Math.floor(linear(time,0,5,0,2000))
時間從 0S～5S 數(shù)字從 0～2000 遞增
②數(shù)字遞減表達式
n=Math.floor(linear(time,0,5,1000,0))
時間從 0S～5S 數(shù)字從 1000～0 遞減
2. 文字逐個放大/打字機效果
在營銷活動中，經(jīng)常會用到文案單個出現(xiàn)并放大的效果，來形成視覺焦點，吸引用戶目光；比如：
①可使用“縮放”功能：從有到逐個放大縮小
點擊“動畫——縮放”按鈕，調(diào)整起始、縮放參數(shù)
②可打字機效果：從無到有
效果搜“打字機”，調(diào)整參數(shù)起始，從前到后依次出現(xiàn)
3. 如何做生長百分比效果
在常用的主要在 icon 制作上，比如：
可通過“修剪路徑”（路徑動畫技術），來控制路徑的出現(xiàn)和消失；
點擊圖層下方“內(nèi)容”的“添加”按鈕，選擇“修剪路徑”，調(diào)節(jié)結(jié)束關鍵幀即可。
4. 如何做毛玻璃效果
毛玻璃效果在 UI 中很常見，為了提升頁面的品質(zhì)感和層次感；
主要知識點在于“快速模糊+調(diào)整圖層”
在圖片(需要模糊)上一層新建形狀圖層，給形狀圖層添加“快速方框模糊”效果；選“調(diào)整圖層”，并調(diào)節(jié)模糊半徑、迭代參數(shù)，來達到預期效果。（注意：調(diào)整層上的特效會做用于它之下的所有圖層）。
5. 預合成后放大不失真的辦法
我們在新建了預合成后，返回主頁面時，放大預合成圖層會發(fā)現(xiàn)，矢量圖像失真了，不知道大家有沒有遇到這種問題？
解決辦法其實很簡單：選中太陽這個按鈕，就可以將該預合成繼承原來圖層的矢量圖層性質(zhì)，即可進行無限放大縮小；
6. 如何修改形狀的內(nèi)外描邊
有時會需要修改形狀的內(nèi)外描邊，發(fā)現(xiàn) AE 跟 sketch/PS 不一樣，沒有直接修改的入口，這個時候可通過“位移路徑”實現(xiàn)：
點擊圖層下方“內(nèi)容”的“添加”按鈕，選擇“位移路徑”，調(diào)整“數(shù)量”，減少可實現(xiàn)為內(nèi)描邊，增加為外描邊；
7. AE 如何導出 mp4 格式
在工作中有些情況下需要我們導出 MP4 格式，但 AE 好像不能直接渲染，可利用 Adobe 家族中的 AME (Adobe Media Encoder)
在 AE 中導出時選擇——添加到AME隊列；
打開 AME，在渲染隊列中會出現(xiàn)剛才的合成文件，將導出格式設置為“H.264”，這是 MP4 的一種編碼格式。其他參數(shù)都可以設置，最后點擊界面上的綠色渲染按鈕，開始導出視頻。
8. 空對象、調(diào)整層區(qū)別
①空對象：空圖層，當作控制器使用；
用關聯(lián)器將其它圖層與空對象進行父子鏈接，當你改變空對象的變化屬性時，其它圖層也會跟著變化。
（當我們想調(diào)整的元素已經(jīng)打上過關鍵幀，這時直接調(diào)整元素的位置或縮放屬性，就會影響到原本的效果，使用空對象就可以解決這一問題）。
②調(diào)整層：添加特效
一般用來做色彩校正，添加特效（比如高斯模糊、水波等），調(diào)整層上的特效會做用于它之下的所有圖層，不必為下面的層逐一添加特效了。
*調(diào)整層可以將特效賦予多個圖層，
*空對象則是將變化屬性賦予多個圖層。
1. 漸變填充丟失的解決方案
把中文“漸變填充”改為英文“Gradient Fill”，保存退出再打開軟件才生效哦
2. 當描邊被切割時
是因為預合成里的畫布尺寸小于外部的畫布尺寸，所以還原時會自動進行切割，導致顯示不全，要注意這塊；
3. 圓角變直角問題
json 在還原時，不能識別圓角，所以形狀必須得轉(zhuǎn)曲（路徑合并），這樣才能識別圓角，否則識別出來的就是直角，雖然 demo 看著沒啥問題；
（常見于從 sketch 導至 AE 的素材）
以上就是本文的全部分享內(nèi)容，熟練掌握可以讓設計師更快地完成設計任務，從而節(jié)省時間和精力，提高工作效率希望能在日常工作中對大家有所幫助。
若是大家還有更常見的動效設計相關問題，也歡迎在評論區(qū)留言一起討論哦~
文章來源：優(yōu)設網(wǎng) 作者：設計渣渣
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計(m.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。
關鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
