文主要介紹了動(dòng)畫的原理相關(guān)概念，對(duì)其他平臺(tái)的動(dòng)畫做了一個(gè)簡(jiǎn)要的梳理，并簡(jiǎn)要的介紹了Flutter動(dòng)畫的一些知識(shí)。

1. 動(dòng)畫介紹

動(dòng)畫對(duì)于App來說，非常的重要。很多App，正是因?yàn)橛辛藙?dòng)畫，所以才會(huì)覺得炫酷。移動(dòng)端的動(dòng)畫庫有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平臺(tái)的Lottie等。正是因?yàn)橛辛诉@些封裝好的動(dòng)畫庫，我們制作酷炫的效果方便了不少。當(dāng)然了，這些庫都是基于各平臺(tái)基礎(chǔ)的動(dòng)畫API實(shí)現(xiàn)的，筆者今天要聊的，也就是基礎(chǔ)的動(dòng)畫及背后的原理。

1.1 動(dòng)畫的本質(zhì)

動(dòng)畫顧名思義，就是動(dòng)起來的畫面。畫面為什么會(huì)動(dòng)起來了呢？在回答這個(gè)問題之前，我們先引入一個(gè)概念。

人眼在觀察景物時(shí)，光信號(hào)傳入大腦神經(jīng)，需經(jīng)過一段短暫的時(shí)間，光的作用結(jié)束后，視覺形象并不立即消失，這種殘留的視覺稱“后像”，視覺的這一現(xiàn)象則被稱為“視覺暫留”。

視覺暫留被認(rèn)為是電影的最重要的一個(gè)理論基礎(chǔ)。我們看到的動(dòng)畫，實(shí)際上是一連串的畫面組成，只不過是以很快的速度去播放，人眼在下一個(gè)畫面出來之前，還殘留著上一個(gè)畫面的視覺，看起來就像是在沒有間隔的播放這一系列的圖片，也就是我們稱之為的動(dòng)畫。

1.2 相關(guān)概念

動(dòng)畫會(huì)有很多相關(guān)的概念，理解了這些概念，會(huì)對(duì)實(shí)際的使用更有幫助。

1.2.1 幀

剛才在介紹動(dòng)畫本質(zhì)的時(shí)候，用到了畫面這個(gè)詞匯，只是方便讀者去理解，這個(gè)畫面，在學(xué)術(shù)上叫做幀。

幀就是影像動(dòng)畫中最小單位的單幅影像畫面，一幀就是一副靜止的畫面。

幀里面又分為關(guān)鍵幀和過渡幀，這兩概念是理解一些動(dòng)畫的基礎(chǔ)，例如Android中的補(bǔ)間動(dòng)畫。在一些場(chǎng)景中，我們可能不會(huì)給出一個(gè)動(dòng)畫的所有幀，所以將幀分成關(guān)鍵幀和過渡幀。關(guān)鍵幀可以理解為一個(gè)動(dòng)畫的起始狀態(tài)，而過渡幀則是系統(tǒng)自動(dòng)完成插在關(guān)鍵幀之間的部分。

我們知道Android中的補(bǔ)間動(dòng)畫，基礎(chǔ)的有四種類型，平移、縮放、旋轉(zhuǎn)、透明度。而我們?cè)O(shè)置動(dòng)畫的時(shí)候，通常只是設(shè)置起始的狀態(tài)，也就是關(guān)鍵幀，中間過程其實(shí)我們并不需要去考慮，如果關(guān)注動(dòng)畫速率的話，頂多加一個(gè)差值器去控制，但是中間生成的幀我們并沒有提供。

系統(tǒng)為什么能夠補(bǔ)齊過渡幀呢？我們看下這四種基本的動(dòng)畫類型，給定起始狀態(tài)，中間狀態(tài)我們其實(shí)是可以通過計(jì)算推演出來的，這也是系統(tǒng)為什么能夠補(bǔ)齊的原因。

是不是只有這四種才可以通過系統(tǒng)填補(bǔ)過渡幀呢？顯然不是的，例如一個(gè)跳躍前進(jìn)的動(dòng)畫，添加一些限制條件，就可以推演出中間的狀態(tài)。系統(tǒng)提供的只是比較常見的四種，并不是說只有這四種，而是絕大部分動(dòng)畫都可以通過這四種組合實(shí)現(xiàn)。當(dāng)然了，肯定也是有實(shí)現(xiàn)不了的，這個(gè)時(shí)候有一個(gè)辦法就是通過canvas畫出來。

另外再插一嘴，Android系統(tǒng)提供的四種動(dòng)畫操作，也是變換矩陣是四維的原因，具體的就不多說了，之前文章也有介紹過。

最后一嘴，此處講解幀的概念，拿了很多Android相關(guān)的知識(shí)去講解，只是希望讀者能夠通過一些已知的概念，去理解一些未知的。動(dòng)畫的原理都一樣，具體到某個(gè)平臺(tái)，可能頂多就是實(shí)現(xiàn)或者叫法不一樣罷了。

1.2.2 幀數(shù)與FPS

小時(shí)候很多人都玩過書角動(dòng)畫。在書或者本子的一角，每一頁都畫上一個(gè)畫面，然后撥書角，不同速度撥，動(dòng)畫的感受不一樣，撥的越快，動(dòng)畫越流暢。這是為什么呢？這就牽扯到幀數(shù)與FPS了。

幀數(shù)，幀的數(shù)量。FPS（Frame per Second），即每秒顯示幀數(shù)。

這兩個(gè)概念，主要是FPS有什么作用呢？這是因?yàn)槿搜凵順?gòu)造的原因。人眼殘留鏡像的時(shí)間是有限的，如果過了這個(gè)時(shí)間，下一幀還沒有變化，就會(huì)感覺不流暢。但也不是幀數(shù)越大越好，畢竟人眼也是有極限的。

1.2.3 插值器

如果動(dòng)畫播放一直都是這種勻速的進(jìn)行，那表現(xiàn)形式就太單一了。那如何實(shí)現(xiàn)非線性的動(dòng)畫效果呢，這個(gè)時(shí)候就需要用到插值器了。

插值器其實(shí)并不復(fù)雜，就是一個(gè)數(shù)學(xué)函數(shù)，設(shè)置屬性值從初始值過渡到結(jié)束值的變化規(guī)律。每個(gè)平臺(tái)都有自己定義好的一系列插值器，可以供開發(fā)者選擇使用，也提供自定義的接口，本質(zhì)上是一個(gè)貝塞爾函數(shù)。

一個(gè)勻速插值器如下：

屬性值百分比=時(shí)間百分比

1.3 如何實(shí)現(xiàn)

動(dòng)畫的基本原理和一些基本概念都介紹了一下，現(xiàn)在來聊一下動(dòng)畫的實(shí)現(xiàn)。

先拋開系統(tǒng)層級(jí)的各種渲染優(yōu)化，也僅僅是以補(bǔ)間動(dòng)畫為例，假設(shè)以現(xiàn)有的移動(dòng)平臺(tái)基礎(chǔ)上，去實(shí)現(xiàn)一套簡(jiǎn)單的動(dòng)畫框架，該如何去實(shí)現(xiàn)呢？

以Android的為例，要實(shí)現(xiàn)平移、縮放、旋轉(zhuǎn)、透明度這四種基礎(chǔ)的補(bǔ)間動(dòng)畫，可以看到，這些都是基于某個(gè)屬性的動(dòng)畫，平移是基于point、縮放是基于scale、旋轉(zhuǎn)是基于angle、透明度是基于alpha。

結(jié)合插值器，提煉出一個(gè)通用的動(dòng)畫類，這個(gè)類的作用是根據(jù)插值器，得到視圖某個(gè)時(shí)間點(diǎn)的屬性變化的狀態(tài)。

既然各個(gè)時(shí)間點(diǎn)的狀態(tài)已經(jīng)有了，剩下來的就是讓各個(gè)狀態(tài)渲染出來。底層的機(jī)制在此處不去討論，這個(gè)地方就需要一個(gè)定時(shí)器，定時(shí)器的作用是每隔一段時(shí)間就把素材渲染到屏幕上。

至此，一個(gè)簡(jiǎn)易的動(dòng)畫框架就出來了。如果對(duì)各平臺(tái)比較了解的話，就知道我說的是視圖動(dòng)畫，真正的動(dòng)畫引擎不是這么簡(jiǎn)單，涉及到的技術(shù)也比較復(fù)雜，但是大體的思想不會(huì)有錯(cuò)，不管是哪種動(dòng)畫，都是跟時(shí)間相關(guān)的幀序列，只是實(shí)現(xiàn)方式不同。

這也是筆者為什么花這么多篇幅去介紹動(dòng)畫相關(guān)的概念，知道一些底層原理后，不管什么平臺(tái)，怎么去實(shí)現(xiàn)，底層的思想肯定都差不多，只是實(shí)現(xiàn)上的不同。

2. 其他平臺(tái)的動(dòng)畫

Flutter動(dòng)畫，與Android、iOS等平臺(tái)對(duì)比，其實(shí)本身并沒有什么特別之處。基本的原理是一樣的，只是提供的種類以及實(shí)現(xiàn)的方式不同罷了。

2.1 Android動(dòng)畫

Android的動(dòng)畫，大的分類有兩種：

• 視圖動(dòng)畫（View Animation）
• 屬性動(dòng)畫（Property Animation）

視圖動(dòng)畫又可以分為兩類：

• 補(bǔ)間動(dòng)畫（Tween Animation）
• 逐幀動(dòng)畫（Frame Animation）

這之間的差別是什么呢？它們只有實(shí)現(xiàn)上的差別

• 補(bǔ)間動(dòng)畫是根據(jù)初始狀態(tài)，系統(tǒng)自動(dòng)補(bǔ)充中間狀態(tài)；
• 逐幀動(dòng)畫則是需要我們提供每一幀；
• 視圖動(dòng)畫只是作用于視圖上，而不會(huì)改變控件的屬性；
• 屬性動(dòng)畫則是會(huì)實(shí)實(shí)在在的更改控件的屬性。

可以看出Android的動(dòng)畫分類還是比較明晰的。

2.2 iOS動(dòng)畫

iOS很久沒弄了，在這里也簡(jiǎn)單說下，不對(duì)的話還請(qǐng)各位指正。

• 隱式動(dòng)畫
• 顯式動(dòng)畫

顯式動(dòng)畫又可以分為兩類：

• 基礎(chǔ)動(dòng)畫
• 關(guān)鍵幀動(dòng)畫

這些動(dòng)畫類別之間的差別是什么呢？

• 隱式動(dòng)畫，顧名思義是不指定動(dòng)畫類型，更改某個(gè)屬性，Core Animation來決定如何且何時(shí)去做動(dòng)畫；
• 基礎(chǔ)動(dòng)畫，根據(jù)起始值來做動(dòng)畫；
• 關(guān)鍵幀動(dòng)畫，則是定義一系列關(guān)鍵幀，系統(tǒng)自動(dòng)補(bǔ)齊中間的過渡幀。

通過動(dòng)畫這一塊兒，可以看出iOS的分類其實(shí)是比較的模糊的，有一些歷史包袱。

2.3 css動(dòng)畫

css動(dòng)畫大體上有兩種：

• Transition
• Animation

web中的動(dòng)畫分類簡(jiǎn)單的多了

• Transition動(dòng)畫，給定起始值，可以結(jié)合插值器做動(dòng)畫；
• Animation動(dòng)畫，則是定義一系列關(guān)鍵幀，系統(tǒng)補(bǔ)齊中間的過渡幀。

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

犸良是什么？

“犸良” 是一款基于 Lottie 的動(dòng)效設(shè)計(jì)平臺(tái)。能夠快速生成設(shè)計(jì)師想要的動(dòng)態(tài)效果，并交付給開發(fā)，極大地提高了設(shè)計(jì)效率和設(shè)計(jì)還原度。作為一站式動(dòng)效制作平臺(tái)，通過海量的動(dòng)效素材以及可視化編輯能力，幫助零基礎(chǔ)的用戶輕松完成動(dòng)效制作。

上面說到了 Lottie ，那 Lottie 你了解嘛？

什么是Lottie ？

能夠解析渲染通過 AE 上的 Bodymovin 插件將 AE 中制作好的動(dòng)畫導(dǎo)出成的 json 文件 (1)、數(shù)據(jù)源多樣性—可從assets,sdcard,網(wǎng)絡(luò)加載動(dòng)畫資源，動(dòng)態(tài)更新 (2)、跨平臺(tái)—設(shè)計(jì)稿導(dǎo)出一份動(dòng)畫描述文件，android,ios,react native通用

Lottie動(dòng)畫Json結(jié)構(gòu) 分為4層：

1. 結(jié)構(gòu)層：可以讀取到動(dòng)畫畫布的寬高，幀數(shù)，背景色，時(shí)間，起始關(guān)鍵幀，結(jié)束幀等
2. asset:圖片資源信息集合，這里放置的是 制作動(dòng)畫時(shí)引用的圖片資源
3. layers:圖層集合，這里可以獲取到多少圖層，每個(gè)圖層的開始幀 結(jié)束幀等
4. shapes：元素集合，可以獲取到每個(gè)圖層都包含多個(gè)動(dòng)畫元素。通過這樣的層級(jí)去讀取文件信息 然后映射成JavaBean對(duì)象，然后通過關(guān)鍵類LottieDrawable將JavaBean分層渲染繪制到Canvas的畫布上去

ok，回歸正題。

犸良的應(yīng)用場(chǎng)景

有了 Lottie 的支撐，犸良支持全平臺(tái) iOS、Android、H5、小程序。無論是營(yíng)銷展位、活動(dòng)頁面、空狀態(tài)還是產(chǎn)品icon。犸良編輯器對(duì)接投放平臺(tái)，一站式完成動(dòng)效創(chuàng)意制作和投放。

“我”就是這么強(qiáng)大！！！

相信大家一定急于知道，犸良 如何使用？其實(shí)也簡(jiǎn)單。

犸良怎么用？

我們來到犸良 首頁，有很多個(gè)按鈕“創(chuàng)建動(dòng)畫”，可以點(diǎn)擊，我們只需要登錄支付寶賬號(hào)即可。

基于模版直接制作

1、選擇模版

2、從動(dòng)畫倉(cāng)庫選擇動(dòng)畫進(jìn)行當(dāng)前動(dòng)畫的替換

3、通過替換圖片或修改顏色來自定義動(dòng)畫

4、自定義模板文字內(nèi)容

5、選擇模板背景圖片

6、完成編輯選擇是否帶背景（banner模版默認(rèn)帶背景）

7、導(dǎo)出成功下載 json

有了這個(gè)JSON文件，我們?nèi)绻褂茫肯旅嬷饕v講web前端如何使用，給出簡(jiǎn)單示例。

Lottie 使用

我們?cè)谛枰捻撁嬉胠ottie.js文件。

<script src="js/lottie.js" type="text/javascript"></script>

<script> 
lottie.loadAnimation({
 container: element, // 動(dòng)畫的dom元素
 renderer: 'svg', // 設(shè)置渲染器(svg/canvas/html)
 loop: true, // 是否循環(huán)播放
 autoplay: true, // 是否自動(dòng)播放
 path: 'data.json' // 動(dòng)畫json文件路徑
});
</script>

lottie.loadAnimation還提供，播放、暫停、停止等事件。

然后對(duì)Vue鐘情的小伙伴，也可以來試試vue中如果使用lottie？

如上代碼事件可以控制動(dòng)畫。

npm install --save vue-lottie

<template>
 <div id="app">
 <lottie 
 :options="defaultOptions" 
 :height="400" :width="400" 
 v-on:animCreated="handleAnimation"
 />
 </div>
</template>

<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/pinjump.json';

export default {
 name: 'app',
 components: {
 'lottie': Lottie
 },
 data() {
 return {
 defaultOptions: {
 animationData: animationData
 },
 animationSpeed: 1
 }
 },
 methods: {
 handleAnimation: function (anim) {
 this.anim=anim;
 },
 stop: function () {
 this.anim.stop();
 },
 play: function () {
 this.anim.play();
 },
 pause: function () {
 this.anim.pause();
 },
 onSpeedChange: function () {
 this.anim.setSpeed(this.animationSpeed);
 }
 }
}
</script>

如上代碼事件可以控制動(dòng)畫。

總結(jié)

有了lottie，前端再?gòu)?fù)雜的動(dòng)畫只需要有設(shè)計(jì)師也是可以搞定的，而且不用費(fèi)時(shí)費(fèi)力的寫CSS了。設(shè)計(jì)師小伙伴們可以去好好學(xué)習(xí)一下，相信這也是未來的方向，畢竟阿里在做，前途應(yīng)該還可以的。

喜歡小編或者覺得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！