簡單易學出效果!11個工作常用的AE小技巧|北京藍藍UI設計公司

2023-11-14    周周

簡單易學出效果!11個工作常用的AE小技巧

前言

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

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

一、APP 中常見動效技巧

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

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

簡單易學出效果!11個工作常用的AE小技巧

此類情況可使用表達式:

①數(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 遞減

簡單易學出效果!11個工作常用的AE小技巧

2. 文字逐個放大/打字機效果

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

簡單易學出效果!11個工作常用的AE小技巧

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

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

簡單易學出效果!11個工作常用的AE小技巧

②可打字機效果:從無到有

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

簡單易學出效果!11個工作常用的AE小技巧

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

在常用的主要在 icon 制作上,比如:

簡單易學出效果!11個工作常用的AE小技巧

可通過“修剪路徑”(路徑動畫技術),來控制路徑的出現(xiàn)和消失;

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

簡單易學出效果!11個工作常用的AE小技巧

4. 如何做毛玻璃效果

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

簡單易學出效果!11個工作常用的AE小技巧

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

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

簡單易學出效果!11個工作常用的AE小技巧

5. 預合成后放大不失真的辦法

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

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

簡單易學出效果!11個工作常用的AE小技巧

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

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

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

簡單易學出效果!11個工作常用的AE小技巧

7. AE 如何導出 mp4 格式

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

在 AE 中導出時選擇——添加到AME隊列;

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

簡單易學出效果!11個工作常用的AE小技巧

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

①空對象:空圖層,當作控制器使用;

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

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

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

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

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

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

二、AE 導出 Lottie 動畫常見問題

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

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

簡單易學出效果!11個工作常用的AE小技巧

2. 當描邊被切割時

是因為預合成里的畫布尺寸小于外部的畫布尺寸,所以還原時會自動進行切割,導致顯示不全,要注意這塊;

3. 圓角變直角問題

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

(常見于從 sketch 導至 AE 的素材)

簡單易學出效果!11個工作常用的AE小技巧

結語

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

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

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

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

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

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(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ā)

 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔