我的博客地址：www.viggoz.com
上篇文章簡單總結了一下網頁和移動App中借助bodymovin實現動畫的方法，但是此方法并不是適用實際項目中的所有動效，很多動效還是需要設計師制作效果視頻，交給研發寶寶手動去做，本文主要簡單講一下貝塞爾曲線在動效設計與實現中的作用。
1. 關于
首先介紹最重要的兩個概念：
-
動畫（Animation）
某個界面控件在一段時間內的變化即產生動畫。產生動畫的維度可以是它的形狀、位置、大小、顏色、透明度等，抑或是它們的疊加。
下面這個是我做的一個非常簡單的應用開屏引導動畫，滑動時候是元素位移透明度變化。
-
過渡（Transition）
那這個控件在兩個狀態之間是如何變化的呢？定義這個變化的概念即是過渡。不同的過渡曲線會產生截然不同的效果。通常被提到的有ease in、ease out、bounce等，當然Axure也提供這些效果。以位置為例，一個矩形由下至上移動300px，不同的運動曲線所對應的動效之間有非常明顯的區別。
下面借助Google的MD規范動畫解釋過渡的作用。
一個動畫一般有這些參數 —— 動畫時間、屬性變化量、以及貝塞爾插值曲線。在動效標注的時候，也只需要標注這些參數就可以完整的給UI研發寫動效了。一個動效所涉及的元素屬性變化，也就是'動畫'在設計輸出的效果視頻中就可以很明確的表述，而'過渡'使用貝塞爾插值和函數來描述可以說是最有效最直觀的方法了。
2. 貝塞爾曲線
一階貝塞爾曲線（兩點），繪制成一條直線
二階貝塞爾曲線（三點）
三階貝塞爾曲線（四點）
四階貝塞爾曲線（五點）
五階貝塞爾曲線（六點）
貝塞爾的原理可以通過這個視頻來學習
也可以看看這個貝塞爾曲線掃盲
3. 貝塞爾函數曲線怎么用
設計師怎么用
動畫的曲線實現問題是使用感覺和動畫體驗的核心。往往設計者給到研發的動效預覽視頻是不能讓研發準確知道動畫中元素的運動曲線規則（這個深有體會，研發大哥有可能做出的動畫全部是線性運動，實現的動畫顯得非常生硬）。在主流的動畫設計中（After Effect、Origami、Principle、FramerJS），由于動畫引擎不同的緣故，導致同樣的設計效果不同。不過，其中的貝塞爾插值和函數在開發過程中具有相當的借鑒意義。也能很好的兼容Android/iOS/Web多平臺動效的實現。
設計師 做好動效之后，只需要把在制作動畫時使用的貝塞爾插值曲線參數值交給研發寶寶就可以。我在標注動效的時候會標注不同元素在不同時間所對應的動畫運動曲線參數。
這里是開源的一些常用緩動曲線，前端同學可以直接拿來用，在一些網頁動畫中可以直接加入這些緩動函數。動畫效果在執行時的速度，使其看起來更加真實。
下面這個是我做的一個簡單的動畫，漸變效果加上緩動函數看上去會自然很多。
上面的開屏引導動畫使用principle做的，基本使用默認的貝塞爾的緩入緩出曲線(25,.1,.25,1)，看上去才會非常自然。
在這里我們主要利用貝塞爾曲線描述某元素的緩動效果。設計師在動效制作軟件中獲取想要的曲線數值? cubic-bezier.com
研發寶寶怎么用
- Android開發者
可以使用EaseCubicInterpolator這個開源插值器實現；我司研發寶寶親測可用；
findViewById(R.id.imageView).setY(1200);
findViewById(R.id.imageView).animate().setInterpolator(new android.view.animation.EaseCubicInterpolator(0f,1.5f,0.53f,0.02f)).yBy(-900).setDuration(500).start();
- 前端開發者
可以參考google：自定義緩動 | Web | Google Developers
如何讓你的動畫更自然 騰訊ISUX寫的這篇文章主要講述的是前端使用曲線的方法，寫的過于繁瑣，全篇不用細看，只需要參考使用js、css實現曲線動畫效果部分就可以，
如果不想重復造輪子的話，可以使用動畫曲線實現庫jstween和GreenSock。兩個庫都是挺容易上手使用的，而且還擴展了很多功能，例如按運動曲線同時改變多個屬性、動畫播放時或完成時執行回調函數等。
可以用這個在線生成工具也是可以用的 CSS cubic-bezier Builder
示例代碼：
div {
-webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
- iOS開發者
可以利用 Core Animation 中的代碼來實現動畫的還原，本人沒有仔細研究，請左轉百度右轉Google搜索；
下一篇文章我會寫關于設計師怎么產出一份 動效標注文檔 ，方便研發寶寶更直觀的理解設計師做的動畫。
注：本文轉載請注明原文地址：http://viggoz.com/2017/08/15/2017-08-18-Bezier/
本文參考：
Bezier Curves and Picasso | Math ∩ Programming
? cubic-bezier.com
如何把AE的動效DEMO準確表達給軟件工程師？ - 知乎
緩動函數速查表
貝塞爾曲線之購物車動畫效果 - 簡書
MartinRGB/MTGuideline: Some Design Guideline I made.
