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