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