本文章是一個系列，如果有興趣可以看看以下文章：
AppleWatch開發入門（1）——界面布局
AppleWatch開發入門（2）——代碼交互、控制器生命周期、界面跳轉
AppleWatch開發入門（3）——Table視圖的應用
AppleWatch開發入門（4）——Picker視圖的應用
AppleWatch開發入門（5）——Menu的使用
AppleWatch開發入門（6）——watchOS中通知的應用
AppleWatch開發入門（7）——AlertController
AppleWatch開發入門（8）——動畫
一、簡介
動畫一直是 iOS 系統的一大亮點，CoreAnimation 和粒子效果的支持，開發者可以很容易的做出效果炫酷的動畫特效。在 watchOS 中，由于性能和屏幕尺寸的限制，對于動畫，并沒有強大的框架支持，但是這并不是說開發者就沒辦法在 watch 上添加動畫的特效了。
二、移動動畫
在 watch 中的移動動畫不像 iPhone 上那么復雜，目前只支持水平、垂直移動，并且移動的距離是受限的。水平移動的距離是一個枚舉：left、center、right，也就是說你只能把控件移動到屏幕的左邊、中間、右邊，而不能控制具體移動到哪個位置；垂直方向移動的距離也一樣是枚舉：top、center、bottom，這兩個枚舉如下：
@available(watchOS 2.0, *)
public enum WKInterfaceObjectHorizontalAlignment : Int {
case left
case center
case right
}
@available(watchOS 2.0, *)
public enum WKInterfaceObjectVerticalAlignment : Int {
case top
case center
case bottom
}
執行動畫的方法如下：
// 第一個參數是動畫時間，第二個參數是閉包，里面寫如何移動
@available(watchOS 2.0, *)
open func animate(withDuration duration: TimeInterval, animations: @escaping () -> Void)
代碼實現非常簡單：
@IBAction func startHorizontalAnimate() {
// 水平移動到右邊
animate(withDuration: 2) {
self.image.setHorizontalAlignment(.right)
}
}
@IBAction func startVerticalAnimate() {
// 垂直移動到底部
animate(withDuration: 2) {
self.image.setVerticalAlignment(.bottom)
}
}
這里比較有趣，我只是把圖片往下移動了，結果 button 自動移上去。
三、幀動畫
和 iOS 類似，watchOS 中的幀動畫也是通過 UIImage 對象的合集來展示的。只是設置和用法略有不同。
首先，watchOS 中幀動畫的操作被單獨封裝成了一個協議，當然，WKInterfaceImage 類已經遵守了這個協議的：
public protocol WKImageAnimatable : NSObjectProtocol {
//從默認幀開始播放動畫
public func startAnimating()
//播放一個指定范圍的幀動畫 NSRange是幀的范圍，durtion是播放一遍的時間，repeatCount是重復播放次數，0為無限循環
public func startAnimatingWithImages(in imageRange: NSRange, duration: TimeInterval, repeatCount: Int)
//停止播放動畫
public func stopAnimating()
}
創建幀動畫的步驟與一些注意：
- 關聯一個視圖中的 WKInterfaceImage 對象
- 所有幀動畫的圖片幀必須有統一的格式：比如 image1.png，image2.png 等等
- 給 WKInterfaceImage 對象設置幀前綴：
image.setImageNamed("image")
注意：這里使用的方法和設置圖片的方法一樣，但是參數有別，圖片的設置需要完整的圖片名，動畫幀前綴的設置只要設置幀圖片的前綴，并且素材幀必須放入 watchKit App 這個 Target 中，才可以使用。
- 開始動畫
// range的location是圖片的起始張，length是圖片的總數
let range = NSRange(location: 1, length: 18)
image.startAnimatingWithImages(in: range, duration: 2, repeatCount: 0)
