使用iPhone爲Apple Watch製做動畫

（原文：Make Animations for APPLE WATCH Using iPhone 做者：Andy Drizen 譯者：xiaoying）

不管要作一個像hamburger button 這樣小的特性仍是要作一個全新的用戶界面，動畫都是在iOS應用開發中很是重要的一環。一個重要的緣由是由於蘋果已經在UIKit和Core Animation的庫中集成了不少常規特性，這使得對於開發者而言，實現這些動畫變得很是簡單。在實際開發中能夠經過一些參數來控制這些動畫的屬性（例如duration, easing, 延遲, 重複次數, auto reserve），蘋果還提供不少其餘能夠作動畫 （例如，經過指定frame，背景顏色，透明，transform）的控件,這些控件能夠拿來即用，咱們確確實實的被它們給寵壞了。那麼，若是咱們在一個沒有這麼美好的平臺下工做呢？

不幸的是，apple watch在動畫方面着實不夠給力。由於硬件自己的限制（不管是屏幕尺寸仍是電池續航能力），在apple watch上沒有UIView和CALayer讓開發者用來操做，這意味着不會有動態動畫API。相反，咱們好像倒退回去很早之前須要作翻頁動畫的日子裏。固然，咱們對動畫還能夠有一些控制，可是和之前在iPhone上作的徹底不一樣：

對的，咱們能夠決定是否給WKInterfaceImage（這至關於在WatchKit裏的UIImageView）添加動畫，若是是，還能夠決定動畫的時長。若是有動畫，它會在你的程序包裏尋找連續命名的文件（例如，frame0.png, frame1.png, frame2.png, … ），而後重複播放它們。

從新建立 Apple Watch的Activity Indicator

對我來講這裏就有個問題，我一直太習慣於蘋果來作全部基礎性工做（例如，處理動畫曲線和建立補間動畫），這使得我在建立翻頁動畫上沒有任何經驗。若是我要建立一個150幀的動畫，而且想要把它作的稍微活潑些，我可不想把時間都浪費在調整這上百幀圖片上。

在Apple Watch上能夠考慮一些像Activity Indicator這樣的簡單的東西：

我是真的很喜歡這個可愛的圓圈——仔細去觀察每一個球是怎麼擴大和淡入的，就像它們是開啓你應用程序的導火線。隨着每個球動量的增長，這個圓圈慢慢的加速。我還很是喜歡這些球被慢慢的壓扁的幻覺，像用花瓣去覆蓋去一朵花，雖然實際上它們都是完美的圓。

用iPhone來捕獲幀

像我以前提到過的，過去5年我在動畫上的經驗大部分都是在iOS上，因此我真的不知道外邊還有什麼軟件能幫助到個人。固然，任何第三方的軟件都不太可能會有本地庫的感受（例如，動畫的彈性會和設備相符嗎，缺省的動畫曲線是怎麼樣的）。若是咱們可以使用UIKit和Core Animation，咱們就可以不須要去管這些了……爲何不這麼作呢？很顯然爲了可以這麼作，咱們的最終的動畫必需要是60fps的，咱們稍後會來討論這個。

做爲開始，我建立了一個動畫，而且把它放進了一個iPhone的應用中；這是它在iPhone模擬器裏運行的樣子.

接着，我建立了UIViewRecorder —— 一個簡單的包含CADisplayLink的類，固然還包括一些圖像捕獲/導出的代碼。它會在動畫開始時開始記錄Activity Indicator視圖，而且在動畫結束時中止記錄。

中止後，咱們看到了一些輸出

• Recorded: 145 張圖片

• Duration:      2.41957300901413 秒鐘

• Frames stored in:      ~/Library/Developer/CoreSimulator/Devices/2520DD5C-03FA-4894-A99F-9BCF5C07BDE5/data/Containers/Data/Application/63F724D7-67FA-4D06-9993-35BF475861B0/Documents/

你能夠看到咱們獲得的幀率是145/2.42 = 60幀每秒

這裏是這145張圖片種的前28張——注意咱們增長了背景色（經過CSS）因此你才能看到前景色；這些PNG圖片的背景是透明的。

如今咱們要作的就是把這些圖片加到個人Watch應用的Images.xcassets中，而後添加一個WKinterfaceImage指向他們。另外，因爲我不想這個動畫一直重複，我會在InterfaceController中添加一個IBOutlet，而且作這樣設置：

1 2 3 4 5 6

@IBOutlet weak  var  image: WKInterfaceImage!   override func awakeWithContext(context: AnyObject?) {      super .awakeWithContext(context)      image.startAnimatingWithImagesInRange(NSMakeRange(1, 145), duration: 2.41, repeatCount: 1) }

下面你能看到應用啓動時蘋果的轉盤在轉，而後是我本身的轉盤——我把個人轉盤塗成了紅色來幫助你分辨。

若是動畫看起來慢或者卡頓，相信我，他們在設備上必定要按照60幀每秒來運行的。

總結

1. 像在iPhone應用上同樣建立動畫

2. 使用UIView Recorder來記錄動畫，而且導出爲PNG或者JPG格式的幀。

3. 在watch應用中導入你的幀

你能夠在這裏下載WatchKit Spinner png素材。

我還在積極地學習WatchKit，因此我最近可能會再來更新這個方法。這期間，我但願大家你們能告訴我大家的想法，因此請你們積極的評論。

在iOS3.0 的時候，我常常會說開發工做對於門外漢來講是如此的困擾，由於要執行屢次變形，透明變換或者陰影動畫可能只須要5分鐘，而後動態地在一個單詞或文字下面畫條線就要幾個小時.

有趣的是，開發者目前並不能根據本身的意願去顯示或隱藏apple watch中的activity indicator.?

這個記錄器並不會捕獲動畫的背景，因此咱們將會獲得一個很好的有透明的輸出.?