▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 3846 字，預(yù)計(jì)閱讀 10 分鐘

TCC 情報(bào)局的 第 43 篇 干貨分享

2021 年的 第 31 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是張聿彤。動(dòng)效（Motion）是大家非常熟悉的交互界面要素，每天瀏覽的大量界面中都包含著各種各樣的動(dòng)效設(shè)計(jì)，相信很多設(shè)計(jì)師也都接觸過或設(shè)計(jì)過各種各樣的動(dòng)效。作者通過這篇文章，帶我們了解動(dòng)效設(shè)計(jì)背后的原理，從關(guān)鍵幀、屬性和值待基礎(chǔ)關(guān)鍵詞開始，深入淺出地講解了插值及其帶來的各種流暢舒適的緩動(dòng)效果，以及如何通過修改和組合不同預(yù)設(shè)來設(shè)計(jì)一個(gè)有創(chuàng)意的動(dòng)效，并在最后為我們提供了很多有價(jià)值的素材，相信這篇文章對(duì)大家會(huì)有所啟發(fā)和幫助。

動(dòng)效概述

Motion overview

盡管網(wǎng)上有大量的動(dòng)效設(shè)計(jì)素材，但是我并沒有看到能夠清晰地介紹 “插值” 的相關(guān)資料，而這正是 實(shí)現(xiàn) UI 動(dòng)效設(shè)計(jì)最核心的理論 。

與其在黑暗中摸索，我決定寫一篇文章，詳細(xì)介紹那些基于時(shí)間軸的動(dòng)畫程序的背后邏輯，例如 After Effects、Principle、Flinto 等等。

      圖片來自 Arpit Agarwal

我相信，對(duì)于如今的任何一個(gè)產(chǎn)品設(shè)計(jì)師來說，學(xué)習(xí)動(dòng)效設(shè)計(jì)都是有價(jià)值的。動(dòng)效使我們能夠清楚地呈現(xiàn)微交互，注入愉悅感，并在設(shè)計(jì)中創(chuàng)造微妙的示能。

想要理解插值，我們需要理解它與傳統(tǒng) “逐幀” 動(dòng)畫的區(qū)別。例如，過去的迪士尼動(dòng)畫和 2D 電子游戲精靈（Sprite）都是典型的逐幀繪制的作品。

為小球反彈設(shè)置逐幀動(dòng)畫的示例（來源未知）

這些動(dòng)畫通常是手繪之后逐幀動(dòng)起來的，類似于翻頁(yè)書。資歷較深的畫師會(huì)先繪制出最重要的姿態(tài)，稱為 “關(guān)鍵幀”，然后由資歷較淺的畫師補(bǔ)充 “中間幀”，以創(chuàng)造平滑動(dòng)畫。你肯定能夠想象到，這是一個(gè)非?？菰锏倪^程。

圖片來自 Nash Vail

我們是幸運(yùn)的。隨著現(xiàn)代科技的發(fā)展，我們不再需要單獨(dú)繪制每一幀。你能想象這是多大的工作量嗎？如今我們可以利用前面提到的軟件中的插值技術(shù)來完成這項(xiàng)工作。

插值技術(shù)使電腦可以取代動(dòng)畫師的工作。換句話說，可以幫助我們?cè)陉P(guān)鍵幀之間插入中間幀。

       UI動(dòng)效插值示例，源自：Dribbble

在我們理解插值之前，首先需要了解一些基礎(chǔ)概念。

關(guān)鍵幀

Keyframes

兩點(diǎn)之間的間距和時(shí)序

關(guān)鍵幀用于標(biāo)記開始幀和結(jié)束幀的樣子，以及它們 何時(shí)出現(xiàn)在動(dòng)畫過渡中。你至少需要設(shè)置兩個(gè)關(guān)鍵幀。然而在更復(fù)雜的動(dòng)畫中，你會(huì)需要添加更多關(guān)鍵幀。

我們可以按以下方式寫出關(guān)鍵幀：

• 關(guān)鍵幀 1: 位置 x = 0, 0ms

• 關(guān)鍵幀 2: 位置 x = 500, 100ms

這意味著如果我們?cè)O(shè)置了這兩個(gè)關(guān)鍵幀，動(dòng)畫呈現(xiàn)的便是藍(lán)色方塊在 100毫秒 的時(shí)間內(nèi)從左（x=0）移動(dòng)到右（x=500）。  

一般來說，為了使用戶注意到這種過渡，UI 動(dòng)畫中的時(shí)間間隔應(yīng)該足夠長(zhǎng)，但是也不能長(zhǎng)到要讓用戶等待。

        圖片來自 Taras

原則上，標(biāo)準(zhǔn)的 UI 動(dòng)畫時(shí)長(zhǎng)是在大約 200ms 到 500ms 之間。小于 100ms 的動(dòng)畫是瞬時(shí)的，不會(huì)被用戶注意到，但是如果大于 1000ms（1s），則會(huì)讓人感覺遲鈍，給人一種拖泥帶水的感覺。

        圖片來自微軟 docs

屬性和值

Properties and Values

屬性是對(duì) UI 元素運(yùn)動(dòng)規(guī)律的描述。為了使兩個(gè)關(guān)鍵幀之間能夠產(chǎn)生動(dòng)畫，我們必須為它們?cè)O(shè)置不同的值。

在上面的例子中，我設(shè)置的動(dòng)畫屬性是元素所在位置的 X 坐標(biāo)，關(guān)鍵幀 1 的值是 0，關(guān)鍵幀 2 的值是 500 。如果兩個(gè)關(guān)鍵幀的值完全相同，是不可能生成動(dòng)畫的。

我在下面列出了一些可以設(shè)置動(dòng)畫的常見屬性。

當(dāng)然，在現(xiàn)代的 UI 設(shè)計(jì)軟件里，你可以修改任何可編輯的屬性，使元素動(dòng)起來。

• 顏色、透明度

• 尺寸

• X 坐標(biāo)、Y 坐標(biāo)

• 旋轉(zhuǎn)角度

• 寬度、高度

現(xiàn)在我們知道了什么是關(guān)鍵幀、屬性以及什么是值，那么就可以來定義插值了。

插值是指兩個(gè)關(guān)鍵幀之間，某一屬性值的動(dòng)態(tài)變化。

這么說有些拗口，讓我們用例子來分解它。要使藍(lán)色正方形從左向右移動(dòng)，我們需要在 100ms 的時(shí)間內(nèi)，將正方形的 X 坐標(biāo)屬性值從 0（關(guān)鍵幀1，0ms）增加到 500（關(guān)鍵幀2，100ms）。

當(dāng)定義兩個(gè)關(guān)鍵幀之間的動(dòng)畫時(shí)，我們只需指定要更改的屬性值。

在這個(gè)例子中，由于位置屬性的 X 坐標(biāo)值是唯一改變的值，因此不需要為正方形的其他屬性指定值，因?yàn)檫@兩個(gè)關(guān)鍵幀的其它屬性是相同的。

緩動(dòng)

Easing

當(dāng)元素動(dòng)起來之后，你會(huì)發(fā)現(xiàn)它看起來很死板，并不生動(dòng)。這是因?yàn)槲覀儧]有加入緩動(dòng)函數(shù)。緩動(dòng)函數(shù)可以為關(guān)鍵幀之間變化的屬性值設(shè)置加速度或減速度。

       Source

換句話說，它允許我們?cè)趧?dòng)畫的持續(xù)時(shí)間內(nèi)改變?cè)氐倪\(yùn)動(dòng)速度。注意，你可以為關(guān)鍵幀之間的每一種屬性變化賦予不同的緩動(dòng)函數(shù)。

如果沒有緩動(dòng)函數(shù)，動(dòng)畫就會(huì)勻速（加速度為 0）運(yùn)動(dòng)，這不符合現(xiàn)實(shí)生活中的物體運(yùn)動(dòng)規(guī)律。

現(xiàn)實(shí)中的物體往往會(huì)受到重力、慣性和阻力的影響。為了使動(dòng)畫更加真實(shí)，我們需要模擬出這些因素是如何影響緩動(dòng)函數(shù)的。

緩動(dòng)函數(shù)可以表示為 “三次貝塞爾函數(shù)”，它使用兩組坐標(biāo)來表示初始和結(jié)束狀態(tài)，即（x1、y1、x2、y2）。三次貝塞爾曲線的默認(rèn)線性運(yùn)動(dòng)函數(shù)是（0.0，0.0，1.0，1.0）。

幸運(yùn)的是，我們不需要從頭開始創(chuàng)建這些緩動(dòng)函數(shù)，因?yàn)槿缃袼械膭?dòng)畫軟件都包含以下緩動(dòng)函數(shù)預(yù)設(shè)。

1）線性勻速

不受物理力（重量、慣性和阻力）影響的對(duì)象可以設(shè)置沒有加速度的線性動(dòng)畫。

勻速曲線使用較少，但在更改對(duì)象狀態(tài)（如顏色、透明度）時(shí)非常有效，因?yàn)檫@些屬性的變化不需要改變對(duì)象的位置或比例。

2）淡入或加速曲線

淡入函數(shù)會(huì)從 初始關(guān)鍵幀 開始影響屬性值。當(dāng)物體全速出現(xiàn)時(shí)可以使用該函數(shù)，例如 toast 提示。想象一輛汽車駛出時(shí)，它的速度從 0 開始逐漸增加，然后在駛出幀達(dá)到峰值。

        加速曲線 圖片來自Taras

3）淡出或減速曲線

淡出函數(shù)會(huì)在 到達(dá)結(jié)束關(guān)鍵幀時(shí) 影響屬性值。當(dāng)物體全速進(jìn)入時(shí)，應(yīng)使用該函數(shù)。例如，單擊漢堡包導(dǎo)航圖標(biāo)并使菜單進(jìn)入幀時(shí)。想象一個(gè)雪橇從山頂滑到山底，它的起始速度為峰值，并在進(jìn)入幀時(shí)減到零。

        減速曲線 圖片來自Taras

4）淡入淡出或標(biāo)準(zhǔn)曲線

淡入淡出函數(shù)會(huì)在 初始關(guān)鍵幀到結(jié)束關(guān)鍵幀 之間影響屬性值。當(dāng)對(duì)象從幀的一個(gè)部分移動(dòng)到另一個(gè)部分，但在整個(gè)過程中始終保持在幀中時(shí)，應(yīng)使用此功能，例如，點(diǎn)擊卡片后擴(kuò)展填充整個(gè)屏幕。想象一個(gè)鐘擺，它的速度從峰值開始，緩慢減速到 0 ，然后再次加速。

當(dāng)你拿捏不準(zhǔn)的時(shí)候，大可以放心使用這個(gè)函數(shù)，這就是為什么它會(huì)被稱為標(biāo)準(zhǔn)曲線。

也有更復(fù)雜的緩動(dòng)函數(shù)，像是 “漸隱為黑色、彈性、反彈” 等，這些用的都比較少。你可以在 easings.net 上找到一些其他常用的函數(shù)。那么更復(fù)雜的動(dòng)效是什么樣子的呢？不同于在 兩個(gè)關(guān)鍵幀之間設(shè)置單個(gè)特性的動(dòng)效 ，你也可以使用跨多個(gè)關(guān)鍵幀的不同的緩動(dòng)曲線來設(shè)置具有多個(gè)特性的動(dòng)效 。

        Uplabs 上使用了我們剛才所學(xué)的函數(shù)原則的復(fù)雜動(dòng)效示例

需要強(qiáng)調(diào)的是，每個(gè)插值都可以在動(dòng)效過程中的不同點(diǎn)開始和結(jié)束 。舉個(gè)例子，如果你需要為你的 UI 元素的 X 坐標(biāo)設(shè)置超過 800ms 的插值，同時(shí)還要為它的尺寸設(shè)置插值，那么起始點(diǎn)和結(jié)束點(diǎn)可以設(shè)置在這 800ms 期間的任意位置。

這意味著兩個(gè)關(guān)鍵幀之間動(dòng)畫的持續(xù)時(shí)間由元素屬性的最長(zhǎng)插值決定 。因此，如果要為多個(gè)屬性設(shè)置動(dòng)效，則可以在動(dòng)效期間的任何點(diǎn)開始和結(jié)束該屬性，以創(chuàng)建各種效果，例如交錯(cuò)。這就是所謂的編排（choreography），是一個(gè)有點(diǎn)高級(jí)的主題，我們繼續(xù)說。

不過，我建議初學(xué)者盡量保持簡(jiǎn)單。你往往很少需要為關(guān)鍵幀之間的每個(gè)屬性都設(shè)置動(dòng)畫。當(dāng)你對(duì)所有東西進(jìn)行插值時(shí)，用戶的眼睛也會(huì)被動(dòng)效搞得暈頭轉(zhuǎn)向。

動(dòng)效預(yù)設(shè)

Animation Presets

如果你以前使用過原型工具，除了你的模板外，你可能還注意到了某些動(dòng)畫預(yù)設(shè)，比如 “彈出、滑動(dòng)、漸變、交叉漸變” 等等。       

 UI 切換動(dòng)效預(yù)設(shè)示例 圖片來自 Arun

這些動(dòng)效預(yù)設(shè)是 UI 設(shè)計(jì)中常用的過渡動(dòng)效，但也可以使用我們剛剛學(xué)到的內(nèi)容對(duì)其進(jìn)行解釋。

讓我們以 “彈出” 為例，其實(shí)就是為 “尺寸” 屬性設(shè)置插值，緩動(dòng)函數(shù)為 “反彈” 的動(dòng)效。舉另一個(gè)例子，“交叉漸變” 只是用 “淡出” 函數(shù)加上 “透明度” 屬性插值而已。這樣理解這些預(yù)設(shè)和模板就直觀多了吧？現(xiàn)在就可以試著使用現(xiàn)有的模板，并為其適當(dāng)?shù)夭迦雽傩圆逯怠?/span>

從建立一個(gè)文件夾開始，收集你覺得有意思的 UI 動(dòng)效，并試著通過調(diào)整現(xiàn)有的動(dòng)效預(yù)設(shè)來重新創(chuàng)建它們。慢慢的，你就可以隨心所欲地使用動(dòng)效屬性和值來創(chuàng)建各種動(dòng)效了。

UI 動(dòng)效的世界是廣闊而令人興奮的 。每當(dāng)我看到那些使用基本原則制作出的新穎的應(yīng)用時(shí)，我總是被設(shè)計(jì)界純粹的創(chuàng)造力所震撼。

原文：https://uxdesign.cc/get-started-with-motion-design-in-8-minutes-3c21889ec28b

作者：Richard Yang

譯者：邵俊森

審核：劉倩茹、張聿彤

編輯：孫淑雅

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

往期精選文章：

英雄聯(lián)盟設(shè)計(jì)師揭秘游戲行業(yè)的用戶體驗(yàn)設(shè)計(jì)師角色

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析

- 設(shè)計(jì)師自習(xí)社區(qū) -

TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～

添加小助手微信，備注「社群」，即可加入讀者群。