整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文主要介紹了動畫的原理相關概念，對其他平臺的動畫做了一個簡要的梳理，并簡要的介紹了Flutter動畫的一些知識。
1. 動畫介紹
動畫對于App來說，非常的重要。很多App，正是因為有了動畫，所以才會覺得炫酷。移動端的動畫庫有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平臺的Lottie等。正是因為有了這些封裝好的動畫庫，我們制作酷炫的效果方便了不少。當然了，這些庫都是基于各平臺基礎的動畫API實現的，筆者今天要聊的，也就是基礎的動畫及背后的原理。
1.1 動畫的本質
動畫顧名思義，就是動起來的畫面。畫面為什么會動起來了呢？在回答這個問題之前，我們先引入一個概念。
人眼在觀察景物時，光信號傳入大腦神經，需經過一段短暫的時間，光的作用結束后，視覺形象并不立即消失，這種殘留的視覺稱“后像”，視覺的這一現象則被稱為“視覺暫留”。
視覺暫留被認為是電影的最重要的一個理論基礎。我們看到的動畫，實際上是一連串的畫面組成，只不過是以很快的速度去播放，人眼在下一個畫面出來之前，還殘留著上一個畫面的視覺，看起來就像是在沒有間隔的播放這一系列的圖片，也就是我們稱之為的動畫。
1.2 相關概念
動畫會有很多相關的概念，理解了這些概念，會對實際的使用更有幫助。
1.2.1 幀
剛才在介紹動畫本質的時候，用到了畫面這個詞匯，只是方便讀者去理解，這個畫面，在學術上叫做幀。
幀就是影像動畫中最小單位的單幅影像畫面，一幀就是一副靜止的畫面。
幀里面又分為關鍵幀和過渡幀，這兩概念是理解一些動畫的基礎，例如Android中的補間動畫。在一些場景中，我們可能不會給出一個動畫的所有幀，所以將幀分成關鍵幀和過渡幀。關鍵幀可以理解為一個動畫的起始狀態，而過渡幀則是系統自動完成插在關鍵幀之間的部分。
我們知道Android中的補間動畫，基礎的有四種類型，平移、縮放、旋轉、透明度。而我們設置動畫的時候，通常只是設置起始的狀態，也就是關鍵幀，中間過程其實我們并不需要去考慮，如果關注動畫速率的話，頂多加一個差值器去控制，但是中間生成的幀我們并沒有提供。
系統為什么能夠補齊過渡幀呢？我們看下這四種基本的動畫類型，給定起始狀態，中間狀態我們其實是可以通過計算推演出來的，這也是系統為什么能夠補齊的原因。
是不是只有這四種才可以通過系統填補過渡幀呢？顯然不是的，例如一個跳躍前進的動畫，添加一些限制條件，就可以推演出中間的狀態。系統提供的只是比較常見的四種，并不是說只有這四種，而是絕大部分動畫都可以通過這四種組合實現。當然了，肯定也是有實現不了的，這個時候有一個辦法就是通過canvas畫出來。
另外再插一嘴，Android系統提供的四種動畫操作，也是變換矩陣是四維的原因，具體的就不多說了，之前文章也有介紹過。
最后一嘴，此處講解幀的概念，拿了很多Android相關的知識去講解，只是希望讀者能夠通過一些已知的概念，去理解一些未知的。動畫的原理都一樣，具體到某個平臺，可能頂多就是實現或者叫法不一樣罷了。
1.2.2 幀數與FPS
小時候很多人都玩過書角動畫。在書或者本子的一角，每一頁都畫上一個畫面，然后撥書角，不同速度撥，動畫的感受不一樣，撥的越快，動畫越流暢。這是為什么呢？這就牽扯到幀數與FPS了。
幀數，幀的數量。FPS（Frame per Second），即每秒顯示幀數。
這兩個概念，主要是FPS有什么作用呢？這是因為人眼生理構造的原因。人眼殘留鏡像的時間是有限的，如果過了這個時間，下一幀還沒有變化，就會感覺不流暢。但也不是幀數越大越好，畢竟人眼也是有極限的。
1.2.3 插值器
如果動畫播放一直都是這種勻速的進行，那表現形式就太單一了。那如何實現非線性的動畫效果呢，這個時候就需要用到插值器了。
插值器其實并不復雜，就是一個數學函數，設置屬性值從初始值過渡到結束值的變化規律。每個平臺都有自己定義好的一系列插值器，可以供開發者選擇使用，也提供自定義的接口，本質上是一個貝塞爾函數。
一個勻速插值器如下：
屬性值百分比=時間百分比
1.3 如何實現
動畫的基本原理和一些基本概念都介紹了一下，現在來聊一下動畫的實現。
先拋開系統層級的各種渲染優化，也僅僅是以補間動畫為例，假設以現有的移動平臺基礎上，去實現一套簡單的動畫框架，該如何去實現呢？
以Android的為例，要實現平移、縮放、旋轉、透明度這四種基礎的補間動畫，可以看到，這些都是基于某個屬性的動畫，平移是基于point、縮放是基于scale、旋轉是基于angle、透明度是基于alpha。
結合插值器，提煉出一個通用的動畫類，這個類的作用是根據插值器，得到視圖某個時間點的屬性變化的狀態。
既然各個時間點的狀態已經有了，剩下來的就是讓各個狀態渲染出來。底層的機制在此處不去討論，這個地方就需要一個定時器，定時器的作用是每隔一段時間就把素材渲染到屏幕上。
至此，一個簡易的動畫框架就出來了。如果對各平臺比較了解的話，就知道我說的是視圖動畫，真正的動畫引擎不是這么簡單，涉及到的技術也比較復雜，但是大體的思想不會有錯，不管是哪種動畫，都是跟時間相關的幀序列，只是實現方式不同。
這也是筆者為什么花這么多篇幅去介紹動畫相關的概念，知道一些底層原理后，不管什么平臺，怎么去實現，底層的思想肯定都差不多，只是實現上的不同。
2. 其他平臺的動畫
Flutter動畫，與Android、iOS等平臺對比，其實本身并沒有什么特別之處?；镜脑硎且粯拥?，只是提供的種類以及實現的方式不同罷了。
2.1 Android動畫
Android的動畫，大的分類有兩種：
視圖動畫又可以分為兩類：
這之間的差別是什么呢？它們只有實現上的差別
可以看出Android的動畫分類還是比較明晰的。
2.2 iOS動畫
iOS很久沒弄了，在這里也簡單說下，不對的話還請各位指正。
顯式動畫又可以分為兩類：
這些動畫類別之間的差別是什么呢？
通過動畫這一塊兒，可以看出iOS的分類其實是比較的模糊的，有一些歷史包袱。
2.3 css動畫
css動畫大體上有兩種：
web中的動畫分類簡單的多了
計社區的免費資源可以為不同的電子商務網站增加價值。以下是2019年秋季發布的新Web工具和設計元素，其中包括設計師和開發人員的應用程序，編碼資源、顏色工具、字體等等。所有這些工具都是免費的，但也有一些工具提供了付費版本。
免費設計工具
1、Art of Symbols是Emotive Brand咨詢公司設計團隊對符號的探索成果。Art of Symbols是“100DayProject”（100天計劃）的一部分，在這個計劃中人們承諾用100天的時間探索自己的創造力。這個項目的重點是古代符號如何影響當代品牌設計。
2、Lordicon提供了一套50個免費的動畫圖標為網站添加設計。這些圖標是可擴展的、可定制的，并由Lottie（適用于Android和iOS的React JavaScript庫）提供支持。整套軟件包括500多個圖標，并提供免費更新，售價99美元。
3、Spectrum是Adobe的新設計系統，提供組件和工具幫助產品團隊更有效地工作，并使Adobe的應用程序更具凝聚力?？上螺d用戶界面工具包、Spectrum字體系列和圖標。使用Spectrum CSS，這是Adobe設計系統的開源實現。
4、Izmir是一個免費的迷你CSS庫，可以快速創建有吸引力的圖像懸停元素。將CSS庫加載到項目中，并將元素標記與所選的樣式類結合起來，可以構建自定義圖像懸停效果。
5、Hexometer Website Hygiene Attendant會定期掃描網站上大約2800個數據點，以確保這些數字資產能夠正常運行。它還提供了有關如何改善網站健康狀況以提高在線可見度和性能的提示和技巧。免費版本每周可掃描一個站點。付費版本每月8.25美元起。
6、HTTP Mock是HTTP Toolkit中的新工具，HTTP Toolkit是用于調試、測試和使用HTTP進行構建的一組開源工具。可捕獲HTTP進行搜索、瀏覽和檢查。實時編輯請求和響應，以測試API和客戶端?？赡MHTTP(S)錯誤、超時和連接失敗。付費版本為1400多個API提供深入的bug工具、驗證和文檔。
7、Facebook Design Devices是一組流行設備的圖片和草圖文件。每個文件都帶有設備的位圖(帶陰影和不帶陰影)以及該設備的原始Sketch文件。
8、Claro是一款全新的在線待辦事項應用程序，設計是無干擾的?？梢荒苛巳坏夭榭茨愕墓ぷ魇马?。今天尚未完成的待辦事項會延續到第二天。拖放待辦事項，單擊以完成操作，然后拖動到垃圾箱進行刪除。注冊測試版，并邀請朋友可獲得免費的一年使用時長。
9、Fresh Folk是人物與對象的插圖庫。每個角色都有一系列的姿勢、服裝和膚色。可創建包含43個對象的多種場景。所有圖像均可免費用于商業或個人用途。
10、Fliplet用于構建自定義應用程序的預制工具。預制應用程序結合了拖放編輯器和可定制的開源組件?？墒褂矛F有的預制組件庫或創建自己的庫。為免費帳戶提供一個實時網絡應用程序。
11、Mozilla Developer視頻頻道提供的視頻可幫助Web設計師、開發人員或制作網站或應用程序有關的其他人員。探索設計技術，包括CSS樣式和針對Web專業人員的瀏覽器工具的Firefox系列。
12、Quark是一款軟件工具，可幫助創建用HTML、CSS和JavaScript格式的項目，并具有類似于桌面應用程序的功能。Quark建立在Electron框架之上。Quark簡單，易于學習，任何有基本編程技能的人都可以使用。
13、8b是一個免費、簡單的在線網站構建器，用于創建針對移動設備優化且對谷歌友好的網站。免費版本可使用8b.io子網域，付費版每月1.58美元起。
14、Doka.Photo是一個簡單免費的在線圖像編輯器，由Doka.js提供支持?？煽焖倬庉嫼筒眉魣D像、應用過濾器、旋轉、調整大小、翻轉、調整顏色，并添加標記。
15、Iubenda條款和條件生成器可輕松生成和管理專業的條款、條件文檔，該文檔可從100多個條款中進行定制，并由8種語言提供，由國際法律團隊起草，并與主要的國際法規保持一致。
16、Bootstrap模板和主題是由Designmodo提供的免費Bootstrap模板集合，可使用啟動應用程序進行下載和編輯?？蛇x擇主題以構建電子商務網站，登錄頁面，演示文稿或SaaS應用。
17、CopyPalette是用于生成一致的單色調色板工具?？蓜摻ú煌纳{和深度色調，單擊即可導出調色板。
免費字體
18、Recursive是一種五軸可變字體，可大大提高多功能性、控制力和性能。可從一系列預定義的樣式中進行選擇，或者為每個軸準確輸入所需的內容：比例、等寬線、粗細、傾斜和斜體。
19、Bridamount是一款平滑時尚的手寫字體工具。使用它可以為設計項目添加耀斑。
20、Krisha是一種粗體的全大寫字體，來自品牌設計師和印刷商Daler Mukhiddinov?？蔀槟愕漠a品或項目創建令人印象深刻的標題。
21、Leon Sans是由Jongmin Kim編寫的幾何無襯線字體。它允許用戶動態更改字體粗細，并在HTML5的Canvas元素中創建自定義動畫、效果和形狀。
22、Grifter是一款干凈自信的字體工具，尤其是針對粗體。使用它可以添加現代的極簡風格并具有強烈的基調。粗體版本可免費下載。
23、Camar是一款藝術裝飾風格的復古字體，起初是為一組明信片設計的。它包括了187個用于商業廣告、橫幅、標題、標志和商標的符號。
（來源：海外賣家兩三事）
以上內容屬作者個人觀點，不代表雨果網立場！本文經原作者獨家授權轉載，轉載需經雨果網授權同意。
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
“犸良” 是一款基于 Lottie 的動效設計平臺。能夠快速生成設計師想要的動態效果，并交付給開發，極大地提高了設計效率和設計還原度。作為一站式動效制作平臺，通過海量的動效素材以及可視化編輯能力，幫助零基礎的用戶輕松完成動效制作。
上面說到了 Lottie ，那 Lottie 你了解嘛？
能夠解析渲染通過 AE 上的 Bodymovin 插件將 AE 中制作好的動畫導出成的 json 文件 (1)、數據源多樣性—可從assets,sdcard,網絡加載動畫資源，動態更新 (2)、跨平臺—設計稿導出一份動畫描述文件，android,ios,react native通用
Lottie動畫Json結構 分為4層：
ok，回歸正題。
有了 Lottie 的支撐，犸良支持全平臺 iOS、Android、H5、小程序。無論是營銷展位、活動頁面、空狀態還是產品icon。犸良編輯器對接投放平臺，一站式完成動效創意制作和投放。
“我”就是這么強大?。?！
相信大家一定急于知道，犸良 如何使用？其實也簡單。
我們來到犸良 首頁，有很多個按鈕“創建動畫”，可以點擊，我們只需要登錄支付寶賬號即可。
基于模版直接制作
1、選擇模版
2、從動畫倉庫選擇動畫進行當前動畫的替換
3、通過替換圖片或修改顏色來自定義動畫
4、自定義模板文字內容
5、選擇模板背景圖片
6、完成編輯選擇是否帶背景（banner模版默認帶背景）
7、導出成功下載 json
有了這個JSON文件，我們如果使用？下面主要講講web前端如何使用，給出簡單示例。
我們在需要的頁面引用lottie.js文件。
<script src="js/lottie.js" type="text/javascript"></script>
<script>
lottie.loadAnimation({
container: element, // 動畫的dom元素
renderer: 'svg', // 設置渲染器(svg/canvas/html)
loop: true, // 是否循環播放
autoplay: true, // 是否自動播放
path: 'data.json' // 動畫json文件路徑
});
</script>
lottie.loadAnimation還提供，播放、暫停、停止等事件。
然后對Vue鐘情的小伙伴，也可以來試試vue中如果使用lottie？
如上代碼事件可以控制動畫。
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>
如上代碼事件可以控制動畫。
有了lottie，前端再復雜的動畫只需要有設計師也是可以搞定的，而且不用費時費力的寫CSS了。設計師小伙伴們可以去好好學習一下，相信這也是未來的方向，畢竟阿里在做，前途應該還可以的。
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
