好的APP用戶界面動畫如果通過精準的設計就能極大地提升用戶體驗。這也常常是區分APP優秀與否的一個重要標準。實現與設計一個有意義且實用的動畫是同樣困難的，尤其是當動畫或者視圖切換非常複雜時，對iOS開發者來說是很難將這個動畫在APP中實現的。
假設你不是一個獨立開發者，而是在一個開發者或者UI/UX的設計師團隊。有多少次設計師向你展示一個很好很酷的動畫並希望能置入應用時，你也覺得這個動畫很好很漂亮啊，但是卻真的很難而且程序也非常長。
但有了Airbnb開發的Lottie，開發者就可以免去寫一行一行的代碼而非常容易地渲染動畫了。你可以直接把 Adobe After Effects的動畫用在你的Xcode 項目中。這真的非常實用並且還能把你實現動畫的大量時間節省下來。
在這個教程中，我將向你展示如下：
什麼是Lottie？
你可以從哪兒獲取Lottie動畫文件？
在你的iOS項目中你可以如何使用它？
什麼是Lottie？
首先要說的是：什麼是Lottie呢？由Airbnb開發的Lottie是一個將After Effects動畫提供給任意一個iOS，macOS，Android還有React Native原生APP的文件庫。這些動畫通過一個叫Bodymovin的開源After Effects插件，以JSON文件的形式進行輸出。Lottie通過JSON格式下載動畫數據並實時提供給開發者。
換句話說，你也可以通過設計器直接把JSON文件放入Xcode project，讓Lottie幫你下載動畫。當然別誤會，你還是需要爲你的動畫寫一些代碼，但是你會發現Lottie的確將爲你的動畫編碼節省大量的時間。
Lottie現在不僅在GitHub上已經開源，而且還提供一個示例項目和一系列的示例動畫，看看下面有沒有你能用在iOS Apps當中示例動畫吧。
Lottie 動畫文件
在使用Lottie之前，你需要一個以JSON文件形式輸出的動畫數據庫。如果你已經有了一個After Effects動畫，用Bodymovin插件來創建JSON文件。
如果你不會使用After Effects呢？你要如何準備你的動畫？你可以僱一位設計師爲你設計動畫，或者你學會用After Effects。
幸運的是，這裏還有一個選項，那就是：Lottie Files
Lottie Files是一個擁有高質量Lottie文件格式動畫的網站。在這個網站，不僅設計師可以在上面陳列他們的動畫而且還提供免費下載。像我一樣沒有After Effects使用經驗的人一定會覺得這個動畫庫非常好用！
在Xcode中使用Lottie
如果你已經有了一個動畫文件，剩下的就是準備好Xcode project。和iOS庫相似地，最容易的方法就是用CocoaPods將Lottie放入Xcode 項目中。
讓我們來做個演示看看Lottie是怎樣工作的。
首先，啓動Xcode並用Single View Application範本創建一個新項目，把新項目命名爲LottieDemo（或任意你喜歡的名字）並保存。
用CocoaPods安裝Lottie動畫庫
當你創建完項目，離開Xcode，打開Terminal。我們將爲安裝Lottie動畫庫創建一個Podfile。我想你應該已經有一些使用CocoaPods的經驗並且已經把它安裝在你的電腦中了。
在terminal中運行下列指令來創建一個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項目中打包。打包結束後你會發現出現一個叫LottieDemo.xcworkspace.的新項目文件。在Xcode中打開這個文件並開始進行編碼。
添加Animation JSON Files
如果你用自己的動畫文件對Lottie進行測試最好，但沒有也沒關係，從lottiefiles.com下載這個JSON格式的免費文件，我們將用這個文件做個快速的演示。
現在把JSON文件 (servishero_loading.json)拖入Xcode項目的工程管理器，把它放入LottieDemo小組。
創建多動畫視圖
現在來到有趣的部分了，你將用不到10行代碼就能執行這個示例動畫。
打開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文件下載動畫數據。你要先用你已經下載好的JSON文件創建一個LOTAnimationView對象，你才能展示這個動畫。
LOTAnimationView是UIView的一個子分類，所以你只要像執行其他視圖一樣執行LOTAnimationView就可以了。我們先將它的大小重置，放在中心位置，把內容模式設爲Aspect Fill；然後我們調用addSubview把動畫視圖添加到主視圖；最後，我們調用play()播放動畫。
現在我們運行項目看看APP的效果是什麼樣。只要打開APP，它就會實時播放動畫。
循環動畫
默認情況下，動畫只播放一次。如果你想循環播放動畫，你可以把loopAnimation屬性設爲true如下：
animationView.loopAnimation = true
LOTAnimationView分類也爲你自定義動畫提供了大量屬性。如果你想放慢動畫播放速度，只要像下面這樣改變animationSpeed屬性就行了：
animationView.animationSpeed = 0.5
從遠程服務器上載入Animation JSON File
你不僅可以把JSON文件保存在本地，而且可以把動畫數據保存在遠程服務器上。Lottie已經爲開發者從遠程URL上下載JSON文件準備好了API。用下面的代碼替換animationView的初始化界面，看看你會得到什麼樣的動畫。
let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/PinJump.json")!)
動畫視圖轉換
LOTAnimationView和UIView一樣都支持不同類型的動畫轉換。你可以通過合理地設置轉換屬性對動畫進行旋轉，大小重置，位置重置。下面是一個把動畫順時針轉換45度的轉換示例：
let rotateTransform = CGAffineTransform(rotationAngle: 45.0)
animationView.transform = rotateTransform
相似的，你可以像其他標準UIView對象一樣把UIView動畫覆蓋在原來的動畫上。我們在現有的動畫上重建一不同大小的動畫。用下面的代碼把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出現之前，用After Effects來真正地實現動畫的確是非常艱難又耗時的工作。但現在有了這個強大的動畫庫將使得動畫實現變得無比輕鬆。
在這個教程中，你應該已經學會了如何使Lottie服務於你的iOS項目。我在這兒只是大概介紹了一下Lottie的要點，你可以在GitHub上了解更多關於Lottie的信息。不僅如此，我們在下期教程將通過建立一個炒雞棒的管理動畫對Lottie進行更加深入的探討。
保持關注哦。如果你喜歡這個教程，請在下方留言或分享給你的朋友。
你可以在GitHub上下載這個簡單的Xcode項目以供參考。