在短時間內制作「流暢感」動畫
動效(xiao)（Motion）是大家非常(chang)熟悉的(de)交互界(jie)面要素，每天瀏覽(lan)的(de)大量(liang)界(jie)面中都(dou)包(bao)含(han)著(zhu)各種各樣的(de)動效(xiao)設(she)(she)計(ji)，相信(xin)(xin)很多設(she)(she)計(ji)師也都(dou)接觸過或設(she)(she)計(ji)過各種各樣的(de)動效(xiao)。作者通(tong)過這篇文章(zhang)，帶(dai)我(wo)們了(le)解(jie)動效(xiao)設(she)(she)計(ji)背后的(de)原(yuan)理(li)，從(cong)關鍵幀(zhen)、屬性和值待基礎關鍵詞開始，深(shen)入淺出地(di)講解(jie)了(le)插值及其帶(dai)來(lai)的(de)各種流暢舒適(shi)的(de)緩動效(xiao)果(guo)，以及如何通(tong)過修改和組合(he)不同預設(she)(she)來(lai)設(she)(she)計(ji)一個(ge)有(you)創意的(de)動效(xiao)，并在(zai)最后為(wei)我(wo)們提供了(le)很多有(you)價(jia)值的(de)素材，相信(xin)(xin)這篇文章(zhang)對大家會(hui)有(you)所啟發和幫(bang)助。
01動效概述
盡管網上有大量的動效設計素材，但是我并沒有看到能夠清晰地介紹 “插值” 的相關資料，而這正是重慶動畫公司實現(xian) UI 動(dong)效設(she)計最核心的理論 。
與其在黑暗中摸索，我決定寫一篇文章，詳細介紹那些基于時間軸的動畫程序的背后邏輯，例如 After Effects、Principle、Flinto 等等。
我相信，對于如今的任何一個產品設計師來說，學習動效設計都是有價值的。動效使我們能夠清楚地呈現微交互，注入愉悅感，并在設計中創造微妙的示能。
想要理解插值，我們需要理解它與傳統 “逐幀” 動畫的區別。例如，過去的迪士尼動畫和 2D 電子游戲精靈（Sprite）都是典型的逐幀繪制的作品。
為小球反(fan)彈設(she)置(zhi)逐(zhu)幀動畫的(de)示例(li)（來源未知）
這些動畫通常是手繪之后逐幀動起來的，類似于重慶動畫制作的(de)翻(fan)頁書(shu)。資歷較(jiao)深的(de)畫師會先繪制出(chu)最(zui)重(zhong)要的(de)姿態，稱為“關鍵幀(zhen)(zhen)”，然(ran)后(hou)由資歷較(jiao)淺(qian)的(de)畫師補充“中(zhong)間幀(zhen)(zhen)”，以創造平滑動畫。你肯定能夠想象到(dao)，這是一個非常枯燥的(de)過程。
我們是幸運的。隨著現代科技的發展，我們不再需要單獨繪制每一幀。你能想象這是多大的工作量嗎？如今我們可以利用前面提到的軟件中的插值技術來完成這項工作。
插值技術使電腦可以取代動畫師的工作。換句話說，可以幫助我們在關鍵幀之間插入中間幀。
UI動效插值(zhi)示(shi)例，源(yuan)自：Dribbble
在我們理解插值之前，首先需要了解一些基(ji)礎概念。
02關鍵幀
兩(liang)點(dian)之(zhi)間的間距和時序
關鍵幀用于標記開始幀和結束幀的樣子，以及它們何時出現在動畫過渡中。你至少需要設置兩個關鍵幀。然而在更復雜的重慶動畫制作中(zhong)，你會需要添加更(geng)多關鍵(jian)幀。
我們可以按以下方式寫出關鍵幀：
關(guan)鍵幀 1: 位置 x = 0, 0ms
關(guan)鍵幀 2: 位(wei)置 x = 500, 100ms
這意味著如果(guo)我們設置了(le)這兩個關鍵幀，動(dong)畫呈(cheng)現的便是藍色方塊(kuai)在 100毫秒 的時(shi)間內從左（x=0）移動(dong)到(dao)右（x=500）。
一般來說，為了使用戶注意到這種過渡，UI 和重慶3D動畫中的時間間隔應該足夠(gou)長，但是也不能(neng)長到要讓用戶(hu)等待(dai)。
下一篇：動畫UI 元素運動規律的描述