提到動效，各位小夥伴想到的是什麼呢？讓珊珊猜猜，是它們嗎？
「特效」與「動效」傻傻分不清
話不多說，我們直奔主題，來瞧瞧動效到底是什麼，接著，珊珊會帶著大家做一些動效小案例Let's go！
首先，我們要區分清楚這三個名詞：特效、動效、動畫。
特效：指特殊的效果。通常是由電腦軟體製作出的現實中一般不會出現的特殊效果。
動效：顧名思義即動態效果，用戶界面上所有運動的效果。動效設計也可以視其為界面設計（UI design）與動態設計（motion design）的交集。合理的動效可以幫助引導、取悅用戶，減少等待時間，更能增加產品識別度、體驗舒適度和界面活力，描述層級關係，提供反饋、明確意向，簡單的說就是讓用戶更舒服的使用產品。
動畫：動畫的概念不同於一般意義上的動畫片，動畫是一種綜合藝術。簡單地說，動畫相對於上面的概念，是一個成熟的整體，是包含關係，也可以說是合作關係。
簡單區分好這個後，珊珊將針對動效做以下介紹：
例如搜索動效，我們會發現它的內容極其豐富，包含文字、音樂、APP、遊戲、交互、出場、Ui、點擊、等待、加載、場景、動效等等，但動效主要分為以下幾類：
MG動畫（Motion Graphics）MG動畫直接翻譯為動態圖形或者圖形動畫，通常指的是視頻設計、多媒體CG設計、電視包裝等等。表情包動圖 如今的微信表情平臺發展成了一個表情包行業，可以讓設計師發布自己設計的表情包供微信用戶使用，其中一部分表情包是帶有動效的，即逐幀動畫的產物，以小 gif 的格式呈現。UI 交互動效 UI交互動效包括 loading、轉場、點擊反饋等。現在越來越多專業化 UX 交互動效軟體助力實現 html 在手機上的實時操作反饋，就仿佛你不用代碼做了一個 app 出來。
針對UI 動效，珊珊整理出一份「常用核心技能盤點」請收好
Skill Point 1：緩動（彈動加變形）
交互動效的初衷是為了給產品帶來舒適的用戶體驗，那麼從本質上每一個交互動效的過渡都應該遵從物理曲線與緩動原則，比如：下拉的重力感、過場的緩入緩出，避免產品像機器般給用戶帶來生硬的感受。
AE應用
1.新建合成（Ctrl+N）
2.雙擊形狀工具，建立等大圖形
3.按住Alt鍵，雙擊鎖定比例圖標，建立正圓，按住Shift，等比例縮放，即可在合成正中心建立起一個正圓
4.移動關鍵幀，設置相關參數（大小，位置等）
5.全選關鍵幀，右鍵，關鍵幀輔助，緩動（F9）
6.打開圖形編輯器，使視圖適應所有曲線，拖動端點調整曲線（使之符合運動規律）
7.點擊大小設置，改變形狀
8.J鍵回到上一個關鍵幀，K鍵跳轉下一個關鍵幀
Skill Point 2：蒙版遮罩
遮罩功能可以解決許多你想不到的動效問題，達到一個比如魔術化的效果，也是 MG動畫轉場常用功能之一。簡單來說，就是將動效分為2層（底層是展示圖，頂層是遮罩），通過改變的遮罩大小，我們可以看到底層展示圖的不同部分。
AE應用
1.選中形狀工具
2.在純色層或合成的預合成（ctrl+shift+c）
3.畫一個形狀（即完成該圖層的遮罩 mask）
4.下拉遮罩屬性即可調整遮罩路徑、大小、羽化、透明度等數值
5.移動關鍵幀，設置蒙版擴展參數即可
Skill Point 3：值變
工具型 APP 中常用的數值變化動效，可以靈活展現數字變化的過程，在 MG動畫中使用也是一種數據的震撼表現方式。
AE應用
1.新建文本層
2.選中文字圖層右鍵點擊效果—文本—編號
3.移動關鍵幀位置
4.相關參數設置（數值位置隨機值）
Skill Point 4：3D翻轉
設置3D屬性可以讓物體擁有 XYZ軸空間，立體化表達物體概念。
AE應用
1.打開圖層3D圖層屬性
2.設置 XYZ軸屬性
3.移動關鍵幀位置，進行參數設置
Skill Point 5：毛玻璃效果
iOS 源生的毛玻璃效果在很多動效軟體上都受到限制，當然 AE 是無所不能的。這裡單獨作為一個技能點來和大家分享，還因為 AE 中毛玻璃效果的製作還會牽扯到一個關鍵點——「調節層」的使用，通過毛玻璃的應用大家應該可以舉一反三出它的更多用法，珊珊覺得這效果還挺有意思的。
AE應用
1.圖層—新建—調節層（注意該圖層需要位於需要被模糊的圖層之上）
2.選中調節層—效果—模糊與銳化—高斯模糊
3.建立一個遮罩圖層（遮罩形狀大小調整為毛玻璃展現區域形狀大小）
4.按照需求調節遮罩圖層的透明度屬性即可看到毛玻璃效果
Skill Point 6：修剪路徑（開放式）
UI 動效中高頻出現的路徑描繪動效實現技能，從 LOGO 到圖標都可以通過 AI 導入形狀路徑來完成路徑描繪動效。這裡只介紹比較實用的開放式修剪路徑（即線條路徑），封閉式修剪路徑應用不多（即形狀路徑）。
AE應用
1.新建純色圖層
2.新建形狀圖層，建立一個圓，不填充，描邊加粗，按住Ctrl雙擊錨點工具就可以居中錨點
3.Ctrl+D複製一層，更換顏色
4.在最上方圖層，找到線段端點，內容—橢圓—描邊—線段端點—圓頭端點
5.添加修剪路徑
6.設置結束、開始屬性，完成路徑動效
Skill Point 7：融合
圖形的融合變換，有很多種做法，這裡介紹效果最好的一種。
AE應用
1.新建形狀圖層，創建要融合的對象
2.新建調節層—效果—高斯模糊（注意調節層放置最上方）
3.模糊度參數調整
4.調出調整圖層—效果—顏色校正—曲線
5.調整至物體輪廓呈現清晰的狀態
6.移動關鍵幀，改變物體位置
7.即可完成虛擬融合效果
Skill Point 8：抖動
緩慢抖動是常在動態 mockup 中見到的效果，這裡應用到「表達式」的使用，也是屬於可以舉一反三應用於多種地方的重要技能點。其中可以使用表達式的除了抖動效果，還有頭尾相接的無限循環等。
AE應用
1.調出物體位置屬性（P）
2.按住Alt+位置屬性前的小秒表
3.在時間軸上出現的空間裡寫上表達式 wiggle（數值A，數值B）
4.調整數值A（每秒震動次數）、B（運動範圍像素值）達到自己想要的抖動效果，珊珊一般用（5,20）達到一個緩動的效果
今天的技能分享就到此結束了，最重要的知識點涉及兩個，它們分別是「調整圖層」和「表達式」，記得回顧知識點哦~~
小夥伴們在操作過程中如有疑問可以詢問珊珊，有問題的小夥伴可以留言交流，珊珊會耐心解答的呦~
1017設計，生活因設計而不同
合作請聯繫郵箱
962452076@qq.com
微信：wxid_ecnzy11v9elp2