使用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.?

这个记录器并不会捕获动画的背景，因此咱们将会获得一个很好的有透明的输出.?