欧美操逼电影,亚洲熟女一区,亚洲无码免费视频,欧美成人在线三级片,做爱片一黄级,亚洲成人人体艺术在线观看,亚洲男人的天堂在线视频,国产精品99久久久精品无码

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

轉(zhuǎn)自：騰訊 ISUX

編輯：章欣怡

共 6151 字 35 圖預(yù)計(jì)閱讀 16 分鐘

導(dǎo)語(yǔ)

動(dòng)效是用戶(hù)體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如 Framer、Principle、Flinto、Protopie 等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢(shì)，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對(duì)性的人群。

而 After Effects 作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛(ài)，不論是 UI、運(yùn)營(yíng)還是多媒體類(lèi)型的設(shè)計(jì)都能滿(mǎn)足，無(wú)疑是目前最具有普適性的動(dòng)效軟件。

本文從 AE 的 插件、操作以及落地 三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。

01. 便捷靈活

不容錯(cuò)過(guò)的精品插件

工欲善其事必先利其器，不論是 AE 還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款 AE 上不容錯(cuò)過(guò)的精品插件。

1.1 文件導(dǎo)入

AE 與 PS 有很好的兼容性，PS 的圖層以及各種樣式都能無(wú)偏差的導(dǎo)入到 AE，但同樣是 Adobe 家族的 AI，要導(dǎo)入 AE 卻特別麻煩，更不用說(shuō)沒(méi)有血緣的 Sketch 了。偏偏 AI 和 Sketch 卻經(jīng)常需要和 AE 打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。

| Overlord：AI 與 AE 互導(dǎo)

Overlord 不僅可以實(shí)現(xiàn) AI 導(dǎo)入 AE，還能隨時(shí)從 AE 導(dǎo)回 AI 修改，這對(duì)本身不適合用于繪制圖形的 AE 來(lái)說(shuō)，無(wú)疑是補(bǔ)上了一個(gè)短板。

官網(wǎng)鏈接：https://www.battleaxe.co/overlord

最新的 Overlord 支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無(wú)偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說(shuō)是非常方便了。

| AEUX：Sketch 導(dǎo)入 AE

如果說(shuō) Overlord 是 AI 和 AE 之間的一座橋梁，那 AEUX 就是 Sketch 和 AE 之間的一座橋梁。導(dǎo)入前在 Sketch 里將圖層整理好，導(dǎo)入 AE 后圖層關(guān)系也是一目了然。

官網(wǎng)鏈接：https://aeux.io/

1.2 使用過(guò)程

| Motion Tools：常用功能合輯

如果說(shuō) AE 只能裝一款插件，那必然是 Motion Tools 了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過(guò)繁瑣的常規(guī)操作。包括快速調(diào)整曲線(xiàn)、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能：

快速調(diào)整速度緩動(dòng)曲線(xiàn)。

不用再通過(guò)輸入表達(dá)式，做出操控便捷又靈活的回彈效果。

錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools 不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作。

官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/

| Auto Crop：預(yù)合成裁切

新轉(zhuǎn)成的預(yù)合成尺寸總是占滿(mǎn)畫(huà)布，不方便做動(dòng)畫(huà)且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話(huà)會(huì)影響元素的位置、位移等屬性，Auto Crop 很好地解決了這個(gè)問(wèn)題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。

官網(wǎng)鏈接：https://aescripts.com/auto-crop

最關(guān)鍵的是，即使是帶有動(dòng)畫(huà)的預(yù)合成，效果也完全不會(huì)被影響。

| Auto Sway：飄動(dòng)效果

Auto Sway 能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營(yíng)設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來(lái)。

官網(wǎng)鏈接：https://aescripts.com/autosway

| Trapcode Particular：粒子效果

AE 自身帶有粒子效果器，點(diǎn)擊 “效果 → 模擬 → CC Particle World ” 就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件 —— Red Giant 旗下 Trapcode 插件包里的 “Particular”。

很多運(yùn)營(yíng)或游戲頁(yè)面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular 都可以快速做出。

除了運(yùn)營(yíng)設(shè)計(jì)，粒子在很多 UI 場(chǎng)景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場(chǎng)景。

官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite

1.3 高品質(zhì)導(dǎo)出

| Bodymovin：Lottie 格式輸出

Bodymovin 能夠?qū)?AE 中矢量圖形做成的動(dòng)效導(dǎo)成 json 文件，變成一串純粹的代碼，再被 Lottie 渲染還原出來(lái)。這就讓 “尺寸” 和 “幀率” 擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。

（在 “Bodymovin” 選中需要導(dǎo)出的合成，點(diǎn)擊 “Render” 渲染導(dǎo)出即可）

QQ 最新的 Q 彈超清表情，就是用 Lottie 實(shí)現(xiàn)的，大家可以在手機(jī) QQ 上親自體驗(yàn)這種爽滑 Q 彈的感覺(jué)哦。

官網(wǎng)鏈接：https://aescripts.com/bodymovin/

| PAG：完整的動(dòng)畫(huà)工作流

PAG （Portable Animated Graphics ）是一套完整的動(dòng)畫(huà)工作流，在動(dòng)畫(huà)導(dǎo)出與渲染方面和 Lottie 相似，但更進(jìn)一步的是，PAG 還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了 PAG 能支持 AE 的所有特性和效果。

另外 PAG 還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開(kāi)發(fā)之間，從創(chuàng)作到素材交付上線(xiàn)的流程。

官網(wǎng)鏈接：https://pag.io/

| Gifgun：導(dǎo)出小巧高清的 Gif 圖

Gif 格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開(kāi)發(fā)中已經(jīng)有了 Apng、Lottie 等很多更好的替代方案，但在網(wǎng)頁(yè)瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用 Gif 來(lái)演示動(dòng)效或者作為封面縮略圖。AE 從 2014 版本后就不支持 Gif 導(dǎo)出了，而 Gifgun 就是一款能很好地導(dǎo)出 Gif 格式的插件。

官網(wǎng)鏈接：https://aescripts.com/gifgun/

Gifgun 導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。

| Aftercodecs：導(dǎo)出小巧高清的 MP4

AE 本身不支持直接導(dǎo)出 MP4，很多時(shí)候只能先導(dǎo)出體積龐大的 MOV 格式，再通過(guò)第三方軟件轉(zhuǎn)成 MP4，操作繁瑣不說(shuō)，還損失畫(huà)質(zhì)。

Adobe 自家的多媒體編碼軟件 Media Encoder，也可以完美導(dǎo)出 MP4 格式，不過(guò)這款軟件本身體積較大，每次打開(kāi)都要運(yùn)行很久。

這里推薦使用更實(shí)用的 MP4 導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的 MP4 也是小巧高清的。

官網(wǎng)鏈接：https://aescripts.com/aftercodecs/

02. 高效操作

效率翻倍的小技巧和快捷鍵

2.1 實(shí)用小技巧

小技巧這部分，整理了 AE 高頻操作經(jīng)常會(huì)遇見(jiàn)的一些問(wèn)題，以及對(duì)應(yīng)比較高效的解決方案。

| 用空對(duì)象調(diào)整元素

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

| 整體拉伸關(guān)鍵幀

關(guān)鍵幀比較多時(shí)，按住 “Option” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。

| 快速定位圖層中心錨點(diǎn)

新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫(huà)時(shí)就特別不方便，按住 “Command” 雙擊 “平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。

還有更直接的方法，就是在 “首選項(xiàng)” 里將 “在新形狀圖層上居中放置錨點(diǎn)” 打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。

| 中英文 AE 快速切換

AE 的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國(guó)外案例，所以其實(shí)直接用英文版的 AE 是最好的。但是難免也有跟我一樣看見(jiàn)英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種 AE 快速切換中英文的方法，對(duì) 2018 以上的版本都適用。

以 macOS 系統(tǒng)為例，在以下路徑找到：

前往 \ 電腦 \ Macintosh HD \ 資源庫(kù) \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

將 “application.xml” 這個(gè)文件用 “文本編輯” 打開(kāi)，然后按 “Command + F” 使用查找命令，將 “zh_CN” 文本替換為 “en_US”，保存后重啟 AE 就是英文版了。

Windows 也是同理，對(duì)應(yīng)路徑為：

C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml

然后將 “application.xml” 這個(gè)文件用 “記事本” 打開(kāi)，同樣的查找 “zh_CN” 后替換 “en_US” 就好。

之后可以將 “application.xml” 文件分別存一份“zh_CN” 中文和 “en_US” 英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的 “application.xml” 文件復(fù)制到原路徑替換即可。

| 視頻素材循環(huán)

新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過(guò)時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇 “解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。

2.2 高效快捷鍵

雖然 AE 的全部快捷鍵可以寫(xiě)滿(mǎn)長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受 “鍵步如飛” 的感覺(jué)了。

以最常用的 “添加關(guān)鍵幀” 為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè) “位置” 關(guān)鍵幀，需要至少 3 個(gè)步驟：

而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開(kāi)不相關(guān)的屬性：

（此處 “P” 為 “位置” 屬性的快捷鍵，添加其他屬性的關(guān)鍵幀時(shí)，

將 “P” 替換成對(duì)應(yīng)屬性的快捷鍵即可）

這對(duì)于一個(gè)工程里需要用到成百上千次的 k 幀操作來(lái)說(shuō)，著實(shí)可以省下不少時(shí)間，可以說(shuō)是不得不用的一個(gè)快捷操作。

秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！

因?yàn)樽髡呤?MacOS 系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ；Command 對(duì)應(yīng) Windows 的 Control 。

| 五大基礎(chǔ)變換屬性

在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開(kāi)或收起對(duì)應(yīng)屬性。

位置：P （Position）

縮放：S （Scale）

旋轉(zhuǎn)：R （Rotation）

不透明度：T （Transparency）

錨點(diǎn)：A （Anchor）

| 常用工具選擇

選擇工具：V

形狀工具：Q

鋼筆工具：P

攝像機(jī)工具：C

| 關(guān)鍵幀操作

快速添加關(guān)鍵幀：Option + Shift + “ * ” （ * = 對(duì)應(yīng)屬性快捷鍵）

向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭

向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭

向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭

向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭

緩動(dòng)關(guān)鍵幀：F9

| 時(shí)間指針操作

定位到上一可見(jiàn)關(guān)鍵幀：J

定位到下一可見(jiàn)關(guān)鍵幀：K

定位到圖層入點(diǎn)：I

定位到圖層出點(diǎn)：O

設(shè)置當(dāng)前為工作區(qū)開(kāi)始：B

設(shè)置當(dāng)前為工作區(qū)結(jié)束：N

| 圖層操作

將圖層拆分：Shift + Command + D

裁去時(shí)間線(xiàn)左側(cè)圖層：Option + [

裁去時(shí)間線(xiàn)右側(cè)圖層：Option + ]

設(shè)置當(dāng)前為入點(diǎn)：[

設(shè)置當(dāng)前為出點(diǎn)： ]

復(fù)制圖層：Command + D

| 其他常用操作

展開(kāi)/收起帶關(guān)鍵幀的屬性：U

展開(kāi)/收起所有屬性：UU

展開(kāi)/收起遮罩屬性：M

展開(kāi)/收起音頻屬性：L

轉(zhuǎn)為預(yù)合成：Shift + Command + C

圖像自適應(yīng)合成寬高：Shift + Option + F

After Effects 官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

03. 實(shí)際落地

動(dòng)效輸出與標(biāo)注

設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開(kāi)發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類(lèi)型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。

3.1 播放型動(dòng)效輸出

播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿(mǎn)足觸發(fā)條件后播放出來(lái)，過(guò)程中并不會(huì)有影響效果的元素。

例如常見(jiàn)的 APP 底部導(dǎo)航點(diǎn)擊效果，icon 動(dòng)效在用戶(hù)點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。

播放型動(dòng)效有以下幾種比較常見(jiàn)的輸出格式：

Gif、Apng、Webp 本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而 Lottie 則是基于代碼層面的動(dòng)畫(huà)渲染，PAG 則結(jié)合了兩者的特性。目前一般使用 Apng、Lottie、和 PAG 就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以?xún)?yōu)先考慮的動(dòng)圖格式。

3.2 交互型動(dòng)效標(biāo)注

交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無(wú)法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶(hù)的頭像、名稱(chēng)等。

比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶(hù)的余額和綁卡信息，這些信息是無(wú)法由設(shè)計(jì)師輸出的。

這種動(dòng)效需要開(kāi)發(fā)在代碼側(cè)還原。如果只是輸出視頻 demo，開(kāi)發(fā)同學(xué)很難將其中的細(xì)節(jié) （例如時(shí)間出入點(diǎn)、曲線(xiàn)速率等）還原出來(lái)。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開(kāi)發(fā)更好的明確下來(lái)。

一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面：

觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長(zhǎng)按等；

對(duì)象：發(fā)生變換的對(duì)象，例如按鈕、列表、文字等；

屬性：具體變換的屬性，例如位移、縮放、不透明度等；

參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從 0 到 1；

時(shí)長(zhǎng)：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；

曲線(xiàn)：變換的速率曲線(xiàn)，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；

以上圖的支付面板首次切換過(guò)程為例，我們的標(biāo)注文檔是這樣的：

第一步定義好頁(yè)面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元。

第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚。

結(jié)語(yǔ)

以上就是本文的全部?jī)?nèi)容，希望能幫助大家在日常設(shè)計(jì)工作中有所幫助或從中獲得更多啟發(fā)。對(duì)文中提到的插件感興趣的朋友，也可以通過(guò)附上的鏈接去官網(wǎng)了解更多詳細(xì)介紹。

— The end —

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計(jì)系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評(píng)估設(shè)計(jì)質(zhì)量，提升設(shè)計(jì)技能

你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝

一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)

游戲新手指導(dǎo)怎么做？一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship

?? 我們一起聊設(shè)計(jì) ???♂?

高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群

期待與更多優(yōu)秀用戶(hù)體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）

玩轉(zhuǎn) AE丨動(dòng)效設(shè)計(jì)必備指南.PDF