在短時(shí)間內(nèi)制作「流暢感」動(dòng)畫
動(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ā)和幫助。
01動(dòng)效概述
盡管網(wǎng)上有大量的動(dòng)效設(shè)計(jì)素材，但是我并沒有看到能夠清晰地介紹 “插值” 的相關(guān)資料，而這正是重慶動(dòng)畫公司實(shí)現(xiàn) UI 動(dòng)效設(shè)計(jì)最核心的理論 。
與其在黑暗中摸索，我決定寫一篇文章，詳細(xì)介紹那些基于時(shí)間軸的動(dòng)畫程序的背后邏輯，例如 After Effects、Principle、Flinto 等等。
我相信，對(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)起來的，類似于重慶動(dòng)畫制作的翻頁(yè)書。資歷較深的畫師會(huì)先繪制出最重要的姿態(tài)，稱為“關(guān)鍵幀”，然后由資歷較淺的畫師補(bǔ)充“中間幀”，以創(chuàng)造平滑動(dòng)畫。你肯定能夠想象到，這是一個(gè)非?？菰锏倪^程。
我們是幸運(yùn)的。隨著現(xiàn)代科技的發(fā)展，我們不再需要單獨(dú)繪制每一幀。你能想象這是多大的工作量嗎？如今我們可以利用前面提到的軟件中的插值技術(shù)來完成這項(xiàng)工作。
插值技術(shù)使電腦可以取代動(dòng)畫師的工作。換句話說，可以幫助我們?cè)陉P(guān)鍵幀之間插入中間幀。
UI動(dòng)效插值示例，源自：Dribbble
在我們理解插值之前，首先需要了解一些基礎(chǔ)概念?！?/p>
02關(guān)鍵幀
兩點(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 和重慶3D動(dòng)畫中的時(shí)間間隔應(yīng)該足夠長(zhǎng)，但是也不能長(zhǎng)到要讓用戶等待。
