Lottie
是Airbnb最近開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的動畫庫。具體內(nèi)容可以見github。
通過安裝在AE上的一款名叫bodymovin的插件,能夠?qū)E中的動畫工程文件轉(zhuǎn)換成通用的json格式描述文件,bodymovin插件本身是用于在網(wǎng)頁上呈現(xiàn)各種AE效果的一個開源庫,lottie做的事情就是實現(xiàn)了一個能夠在不同移動端平臺上呈現(xiàn)AE動畫的方式.
在此不多做解釋可以去github看使用以及支持。
github地址：https://github.com/airbnb/lottie-ios
本文重點在解析動畫以及動畫庫。
1） 首先是動畫定義
每幀圖像都是由人工或計算機產(chǎn)生的。根據(jù)人眼的特性，用15幀/秒~20幀/秒的以上速度順序地播放靜止圖像幀纠脾，產(chǎn)生運動的感覺的圖像。
2）動畫形成原理：
是因為人眼有視覺暫留的特性所謂視覺暫留就是在看到一個物體后即時該物體快速消失也還是會在眼中留下一定時間的持續(xù)影像蜕青。
<1>下面我們了解幾個名詞（對沒錯苟蹈，讓你自己去搞明白，我就不和你說了）
1）FPS ( Frames Per Second)
2）逐幀（Frame By Frame）
3）關(guān)鍵幀（Keyframe Animation）
3）以iOS為例談一談Core Animation：
?? 核心動畫類有以下分類:提供顯示內(nèi)容的圖層類右核。動畫和計時類慧脱。布局和約束類。事務(wù)類贺喝，在原子更新的時候組合圖層類菱鸥。
圖層類是核心動畫的核心基礎(chǔ)，它提供了一套抽象的概念躏鱼，CALayer 是整個圖層類的基礎(chǔ)氮采，它是所 有核心動畫圖層類的父類。 和視圖類(NSView 或 UIView)一樣,CALayer 有自己的父圖層類,同時也擁有自 己子圖層類的集合染苛，它們構(gòu)成了一個圖層樹的層次結(jié)構(gòu)鹊漠。圖層繪制類似視圖一樣自底 向上，并指定其幾何形狀相對他們 superlayer，創(chuàng)建一個相對的局部坐標(biāo)系躯概。然而圖 層類通過合并變換矩陣允許你旋轉(zhuǎn)登钥、偏移、拉伸對應(yīng)的圖層內(nèi)容楞陷。
?? 核心動畫的動畫類使用基本的動畫和關(guān)鍵幀動畫把圖層的內(nèi)容和選取的屬性動 畫的顯示出來。所有核心動畫的動畫類都是從 CAAnimation 類繼承而來茉唉。CAAnimation 實現(xiàn)了 CAMediaTiming 協(xié)議固蛾，提供了動畫的持續(xù)時間，速度度陆，和重復(fù)計數(shù)艾凯。 （關(guān)于CAMediaTiming可以看圖）
CAAnimation 也實現(xiàn)了 CAAction 協(xié)議。該協(xié)議為圖層觸發(fā)一個動畫動作提供了提供 標(biāo)準(zhǔn)化響應(yīng)懂傀。
動畫類同時定義了一個使用貝塞爾曲線來描述動畫改變的時間函數(shù)趾诗。例如，一個 勻速時間函數(shù)(linear timing function)在動畫的整個生命周期里面一直保持速度不變蹬蚁， 而漸緩時間函數(shù)(ease-out timing function)則在動畫接近其生命周期的時候減慢速度恃泪。
核心動畫額外提供了一系列抽象的和細(xì)化的動畫類，比如:
CATransition 提供了一個圖層變化的過渡效果犀斋，它能影響圖層的整個內(nèi)容贝乎。 動畫進(jìn)行的時候淡入淡出(fade)、推(push)叽粹、顯露(reveal)圖層的內(nèi)容览效。這些過渡效 果可以擴展到你自己定制的 Core Image 濾鏡。
?? CAAnimationGroup 允許一系列動畫效果組合在一起虫几，并行顯示動畫锤灿。
?? CAPropertyAnimation 是一個抽象的子類，它支持動畫的顯示圖層的關(guān)鍵路 徑中指定的屬性
?? CABasicAnimation 簡單的為圖層的屬性提供修改辆脸。 CAKeyframeAnimation 支持關(guān)鍵幀動畫但校，你可以指定的圖層屬性的關(guān)鍵路徑
?? 動畫，包括動畫的每個階段的價值啡氢，以及關(guān)鍵幀時間和計時功能的一系列值始腾。在 動畫運行是，每個值被特定的插入值替代空执。
?? CATransaction 是核心動畫 里面負(fù)責(zé)協(xié)調(diào)多個動畫原子更新顯示操作浪箭。事務(wù)支持嵌套使用。 核心動畫支持兩種事務(wù):隱式事務(wù)和顯式事務(wù)辨绊。在圖層的動畫屬性被一個線程修 改奶栖，同時該線程下次迭代的時候自動提交該修改的時候隱式事務(wù)自動創(chuàng)建。顯式事務(wù) 發(fā)生在程序在修改動畫屬性之前給 CATransaction 發(fā)送了一個開始消息，在動畫屬性 修改之后提交該消息宣鄙。
<2> Lottie庫介紹袍镀。
1）類結(jié)構(gòu)
2）流程概述
里面有兩點簡單說一下。
一冻晤、cache是最少使用原則苇羡，利用NSDictionary和NSarray實現(xiàn)，最多存50個json數(shù)組
二鼻弧、是動畫合成過程设江，解析json數(shù)組每個數(shù)組生成相應(yīng)的layer組合layer生成完整動畫。
<3>性能測試
1）CPU波動和幀動畫對比會差一些
2）內(nèi)存占用會有一定優(yōu)勢
3）解析普通動畫耗時大概在0.03秒左右攘轩，比較理想叉存。
所以綜上 Lottie可用性還是不錯的。
