好的APP用戶界面動畫如果通過精準的設計就能極大地提升用戶體驗。這也常常是區(qū)分APP優(yōu)秀與否的一個重要標準官套。實現(xiàn)與設計一個有意義且實用的動畫是同樣困難的，尤其是當動畫或者視圖切換非常復雜時记焊，對iOS開發(fā)者來說是很難將這個動畫在APP中實現(xiàn)的芳杏。
假設你不是一個獨立開發(fā)者豫领，而是在一個開發(fā)者或者UI/UX的設計師團隊抡柿。有多少次設計師向你展示一個很好很酷的動畫并希望能置入應用時，你也覺得這個動畫很好很漂亮啊等恐，但是卻真的很難而且程序也非常長洲劣。
但有了Airbnb開發(fā)的Lottie，開發(fā)者就可以免去寫一行一行的代碼而非常容易地渲染動畫了课蔬。你可以直接把 Adobe After Effects的動畫用在你的Xcode 項目中囱稽。這真的非常實用并且還能把你實現(xiàn)動畫的大量時間節(jié)省下來。
在這個教程中二跋，我將向你展示如下：
什么是Lottie战惊？
你可以從哪兒獲取Lottie動畫文件？
在你的iOS項目中你可以如何使用它扎即？
什么是Lottie吞获？
首先要說的是：什么是Lottie呢？由Airbnb開發(fā)的Lottie是一個將After Effects動畫提供給任意一個iOS谚鄙，macOS各拷，Android還有React Native原生APP的文件庫。這些動畫通過一個叫Bodymovin的開源After Effects插件闷营，以JSON文件的形式進行輸出烤黍。Lottie通過JSON格式下載動畫數(shù)據(jù)并實時提供給開發(fā)者。
換句話說傻盟，你也可以通過設計器直接把JSON文件放入Xcode project速蕊，讓Lottie幫你下載動畫。當然別誤會，你還是需要為你的動畫寫一些代碼，但是你會發(fā)現(xiàn)Lottie的確將為你的動畫編碼節(jié)省大量的時間。
Lottie現(xiàn)在不僅在GitHub上已經(jīng)開源，而且還提供一個示例項目和一系列的示例動畫吨铸，看看下面有沒有你能用在iOS Apps當中示例動畫吧。
Lottie 動畫文件
在使用Lottie之前枫弟，你需要一個以JSON文件形式輸出的動畫數(shù)據(jù)庫阳掐。如果你已經(jīng)有了一個After Effects動畫，用Bodymovin插件來創(chuàng)建JSON文件武福。
如果你不會使用After Effects呢议双？你要如何準備你的動畫？你可以雇一位設計師為你設計動畫捉片，或者你學會用After Effects平痰。
幸運的是汞舱，這里還有一個選項，那就是：Lottie Files
Lottie Files是一個擁有高質(zhì)量Lottie文件格式動畫的網(wǎng)站宗雇。在這個網(wǎng)站昂芜，不僅設計師可以在上面陳列他們的動畫而且還提供免費下載。像我一樣沒有After Effects使用經(jīng)驗的人一定會覺得這個動畫庫非常好用赔蒲！
在Xcode中使用Lottie
如果你已經(jīng)有了一個動畫文件泌神，剩下的就是準備好Xcode project。和iOS庫相似地舞虱，最容易的方法就是用CocoaPods將Lottie放入Xcode 項目中欢际。
讓我們來做個演示看看Lottie是怎樣工作的。
首先矾兜，啟動Xcode并用Single View Application范本創(chuàng)建一個新項目损趋，把新項目命名為LottieDemo（或任意你喜歡的名字）并保存。
用CocoaPods安裝Lottie動畫庫
當你創(chuàng)建完項目椅寺，離開Xcode浑槽，打開Terminal。我們將為安裝Lottie動畫庫創(chuàng)建一個Podfile返帕。我想你應該已經(jīng)有一些使用CocoaPods的經(jīng)驗并且已經(jīng)把它安裝在你的電腦中了括荡。
在terminal中運行下列指令來創(chuàng)建一個Podfile。
pod?init
然后打開文件像這樣編輯：
target?'LottieDemo'?do
#?Comment?the?next?line?if?you're?not?using?Swift?and?don't?want?to?use?dynamic?frameworks
use_frameworks!
#?Pods?for?LottieDemo
pod?'lottie-ios'
end
我們只加一行pod 'lottie-ios'來指出這是這個項目需要的pod溉旋。然后回Terminal運行下列指令：
pod?install
CocoaPods會下載Lottie動畫庫并在Xcode項目中打包畸冲。打包結束后你會發(fā)現(xiàn)出現(xiàn)一個叫LottieDemo.xcworkspace.的新項目文件。在Xcode中打開這個文件并開始進行編碼观腊。
添加Animation JSON Files
如果你用自己的動畫文件對Lottie進行測試最好邑闲，但沒有也沒關系，從lottiefiles.com下載這個JSON格式的免費文件梧油，我們將用這個文件做個快速的演示苫耸。
現(xiàn)在把JSON文件?(servishero_loading.json)拖入Xcode項目的工程管理器，把它放入LottieDemo小組儡陨。
創(chuàng)建多動畫視圖
現(xiàn)在來到有趣的部分了褪子，你將用不到10行代碼就能執(zhí)行這個示例動畫。
打開ViewController.swift骗村，然后加入一行代碼將Lottie 動畫庫輸入進去：
import?Lottie
接下來更新viewDidLoad()如下：
override?func?viewDidLoad()?{
super.viewDidLoad()
if?let?animationView?=?LOTAnimationView(name:?"servishero_loading")?{
animationView.frame?=?CGRect(x:?0,?y:?0,?width:?400,?height:?400)
animationView.center?=?self.view.center
animationView.contentMode?=?.scaleAspectFill
view.addSubview(animationView)
animationView.play()
}
}
上面就是你播放動畫需要的代碼嫌褪。在Lottie中有個LOTAnimationView分類可以直接從JSON文件下載動畫數(shù)據(jù)。你要先用你已經(jīng)下載好的JSON文件創(chuàng)建一個LOTAnimationView對象胚股，你才能展示這個動畫笼痛。
LOTAnimationView是UIView的一個子分類，所以你只要像執(zhí)行其他視圖一樣執(zhí)行LOTAnimationView就可以了。我們先將它的大小重置缨伊，放在中心位置摘刑，把內(nèi)容模式設為Aspect Fill；然后我們調(diào)用addSubview把動畫視圖添加到主視圖刻坊；最后枷恕，我們調(diào)用play()播放動畫。
現(xiàn)在我們運行項目看看APP的效果是什么樣谭胚。只要打開APP徐块，它就會實時播放動畫。
循環(huán)動畫
默認情況下漏益，動畫只播放一次蛹锰。如果你想循環(huán)播放動畫，你可以把loopAnimation屬性設為true如下：
animationView.loopAnimation?=?true
LOTAnimationView分類也為你自定義動畫提供了大量屬性绰疤。如果你想放慢動畫播放速度铜犬，只要像下面這樣改變animationSpeed屬性就行了：
animationView.animationSpeed?=?0.5
從遠程服務器上載入Animation JSON File
你不僅可以把JSON文件保存在本地，而且可以把動畫數(shù)據(jù)保存在遠程服務器上轻庆。Lottie已經(jīng)為開發(fā)者從遠程URL上下載JSON文件準備好了API癣猾。用下面的代碼替換animationView的初始化界面，看看你會得到什么樣的動畫余爆。
let?animationView?=?LOTAnimationView(contentsOf:?URL(string:?"https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)
動畫視圖轉(zhuǎn)換
LOTAnimationView和UIView一樣都支持不同類型的動畫轉(zhuǎn)換纷宇。你可以通過合理地設置轉(zhuǎn)換屬性對動畫進行旋轉(zhuǎn)，大小重置蛾方，位置重置像捶。下面是一個把動畫順時針轉(zhuǎn)換45度的轉(zhuǎn)換示例：
let?rotateTransform?=?CGAffineTransform(rotationAngle:?45.0)
animationView.transform?=?rotateTransform
相似的，你可以像其他標準UIView對象一樣把UIView動畫覆蓋在原來的動畫上桩砰。我們在現(xiàn)有的動畫上重建一不同大小的動畫拓春。用下面的代碼把viewDidLoad()替換掉：
override?func?viewDidLoad()?{
super.viewDidLoad()
if?let?animationView?=?LOTAnimationView(name:?"servishero_loading")?{
animationView.frame?=?CGRect(x:?0,?y:?0,?width:?400,?height:?400)
animationView.center?=?self.view.center
animationView.loopAnimation?=?true
animationView.contentMode?=?.scaleAspectFill
animationView.animationSpeed?=?0.5
//?Applying?UIView?animation
let?minimizeTransform?=?CGAffineTransform(scaleX:?0.1,?y:?0.1)
animationView.transform?=?minimizeTransform
UIView.animate(withDuration:?3.0,?delay:?0.0,?options:?[.repeat,?.autoreverse],?animations:?{
animationView.transform?=?CGAffineTransform.identity
},?completion:?nil)
view.addSubview(animationView)
animationView.play()
}
}
運行APP你就會得到下面的結果，是不是很有趣呢亚隅？
接下來呢硼莽？
好的UI動畫不僅能使你的應用上一個層次，而且能提供動人的用戶體驗煮纵。在Lottie出現(xiàn)之前懂鸵，用After Effects來真正地實現(xiàn)動畫的確是非常艱難又耗時的工作。但現(xiàn)在有了這個強大的動畫庫將使得動畫實現(xiàn)變得無比輕松行疏。
在這個教程中匆光，你應該已經(jīng)學會了如何使Lottie服務于你的iOS項目。我在這兒只是大概介紹了一下Lottie的要點隘擎，你可以在GitHub上了解更多關于Lottie的信息殴穴。不僅如此，我們在下期教程將通過建立一個炒雞棒的管理動畫對Lottie進行更加深入的探討货葬。
保持關注哦采幌。如果你喜歡這個教程，請在下方留言或分享給你的朋友震桶。
你可以在GitHub上下載這個簡單的Xcode項目以供參考休傍。
