在短時間內(nèi)制作「流暢感」動畫
動效（Motion）是大家非常熟悉的交互界面要素，每天瀏覽的大量界面中都包含著各種各樣的動效設(shè)計，相信很多設(shè)計師也都接觸過或設(shè)計過各種各樣的動效。作者通過這篇文章，帶我們了解動效設(shè)計背后的原理，從關(guān)鍵幀、屬性和值待基礎(chǔ)關(guān)鍵詞開始，深入淺出地講解了插值及其帶來的各種流暢舒適的緩動效果，以及如何通過修改和組合不同預(yù)設(shè)來設(shè)計一個有創(chuàng)意的動效，并在最后為我們提供了很多有價值的素材，相信這篇文章對大家會有所啟發(fā)和幫助。
01動效概述
盡管網(wǎng)上有大量的動效設(shè)計素材，但是我并沒有看到能夠清晰地介紹 “插值” 的相關(guān)資料，而這正是重慶動畫公司實現(xiàn) UI 動效設(shè)計最核心的理論 。
與其在黑暗中摸索，我決定寫一篇文章，詳細(xì)介紹那些基于時間軸的動畫程序的背后邏輯，例如 After Effects、Principle、Flinto 等等。
我相信，對于如今的任何一個產(chǎn)品設(shè)計師來說，學(xué)習(xí)動效設(shè)計都是有價值的。動效使我們能夠清楚地呈現(xiàn)微交互，注入愉悅感，并在設(shè)計中創(chuàng)造微妙的示能。
想要理解插值，我們需要理解它與傳統(tǒng) “逐幀” 動畫的區(qū)別。例如，過去的迪士尼動畫和 2D 電子游戲精靈（Sprite）都是典型的逐幀繪制的作品。
為小球反彈設(shè)置逐幀動畫的示例（來源未知）
這些動畫通常是手繪之后逐幀動起來的，類似于重慶動畫制作的翻頁書。資歷較深的畫師會先繪制出最重要的姿態(tài)，稱為“關(guān)鍵幀”，然后由資歷較淺的畫師補(bǔ)充“中間幀”，以創(chuàng)造平滑動畫。你肯定能夠想象到，這是一個非?？菰锏倪^程。
我們是幸運(yùn)的。隨著現(xiàn)代科技的發(fā)展，我們不再需要單獨(dú)繪制每一幀。你能想象這是多大的工作量嗎？如今我們可以利用前面提到的軟件中的插值技術(shù)來完成這項工作。
插值技術(shù)使電腦可以取代動畫師的工作。換句話說，可以幫助我們在關(guān)鍵幀之間插入中間幀。
UI動效插值示例，源自：Dribbble
在我們理解插值之前，首先需要了解一些基礎(chǔ)概念。
02關(guān)鍵幀
兩點之間的間距和時序
關(guān)鍵幀用于標(biāo)記開始幀和結(jié)束幀的樣子，以及它們何時出現(xiàn)在動畫過渡中。你至少需要設(shè)置兩個關(guān)鍵幀。然而在更復(fù)雜的重慶動畫制作中，你會需要添加更多關(guān)鍵幀。
我們可以按以下方式寫出關(guān)鍵幀：
關(guān)鍵幀 1: 位置 x = 0, 0ms
關(guān)鍵幀 2: 位置 x = 500, 100ms
這意味著如果我們設(shè)置了這兩個關(guān)鍵幀，動畫呈現(xiàn)的便是藍(lán)色方塊在 100毫秒 的時間內(nèi)從左（x=0）移動到右（x=500）。
一般來說，為了使用戶注意到這種過渡，UI 和重慶3D動畫中的時間間隔應(yīng)該足夠長，但是也不能長到要讓用戶等待。
