使用iPhone为Apple Watch制作动画

《使用iPhone为Apple Watch制作动画》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、（原文：MakeAnimationsforAPPLEWATCHUsingiPhone作者：AndyDrizen译者：xiaoying）无论要做一个像hamburgerbutton这样小的特性还是要做一个全新的用户界面，动画都是在iOS应用开发中非常重要的一环。一个重要的原因是因为苹果已经在UIKit和CoreAnimation的库中集成了很多常规特性，这使得对于开发者而言，实现这些动画变得非常简单。在实际开发中可以通过一些参数来控制这些动画的属性（例如duration,easing,延迟,重复次数,autore

2、serve），苹果还提供很多其他可以做动画（例如，通过指定frame，背景颜色，透明，transform）的控件,这些控件可以拿来即用，我们确确实实的被它们给宠坏了。那么，如果我们在一个没有这么美好的平台下工作呢？不幸的是，applewatch在动画方面着实不够给力。因为硬件本身的限制（无论是屏幕尺寸还是电池续航能力），在applewatch上没有UIView和CALayer让开发者用来操作，这意味着不会有动态动画API。相反，我们好像倒退回去很早以前需要做翻页动画的日子里。当然，我们对动画还可以有一些控制，但

3、是和以前在iPhone上做的完全不同：对的，我们可以决定是否给WKInterfaceImage（这相当于在WatchKit里的UIImageView）添加动画，如果是，还可以决定动画的时长。如果有动画，它会在你的程序包里寻找连续命名的文件（例如，frame0.png,frame1.png,frame2.png,…），然后重复播放它们。重新创建AppleWatch的ActivityIndicator对我来说这里就有个问题，我一直太习惯于苹果来做所有基础性工作（例如，处理动画曲线和创建补间动画），这使得我在创建翻页

4、动画上没有任何经验。如果我要创建一个150帧的动画，并且想要把它做的稍微活泼些，我可不想把时间都浪费在调整这上百帧图片上。在AppleWatch上可以考虑一些像ActivityIndicator这样的简单的东西：我是真的很喜欢这个可爱的圆圈——仔细去观察每个球是怎么扩大和淡入的，就像它们是开启你应用程序的导火线。随着每一个球动量的增加，这个圆圈慢慢的加速。我还非常喜欢这些球被慢慢的压扁的幻觉，像用花瓣去覆盖去一朵花，虽然实际上它们都是完美的圆。用iPhone来捕获帧像我之前提到过的，过去5年我在动画上的经验大部

5、分都是在iOS上，所以我真的不知道外边还有什么软件能帮助到我的。当然，任何第三方的软件都不太可能会有本地库的感觉（例如，动画的弹性会和设备相符吗，缺省的动画曲线是怎么样的）。如果我们能够使用UIKit和CoreAnimation，我们就能够不需要去管这些了……为什么不这么做呢？很显然为了能够这么做，我们的最终的动画必须要是60fps的，我们稍后会来讨论这个。作为开始，我创建了一个动画，并且把它放进了一个iPhone的应用中；这是它在iPhone模拟器里运行的样子.接着，我创建了UIViewRecorder——一

6、个简单的包含CADisplayLink的类，当然还包括一些图像捕获/导出的代码。它会在动画开始时开始记录ActivityIndicator视图，并且在动画结束时停止记录。停止后，我们看到了一些输出Recorded:145张图片Duration:2.41957300901413秒钟Framesstoredin:~/Library/Developer/CoreSimulator/Devices/2520DD5C-03FA-4894-A99F-9BCF5C07BDE5/data/Containers/Data/App

7、lication/63F724D7-67FA-4D06-9993-35BF475861B0/Documents/你可以看到我们得到的帧率是145/2.42=60帧每秒这里是这145张图片种的前28张——注意我们增加了背景色（通过CSS）所以你才能看到前景色；这些PNG图片的背景是透明的。现在我们要做的就是把这些图片加到我的Watch应用的Images.xcassets中，然后添加一个WKinterfaceImage指向他们。另外，由于我不想这个动画一直重复，我会在InterfaceController中添加一个

8、IBOutlet，并且做这样设置：@IBOutletweakvarimage:WKInterfaceImage!overridefuncawakeWithContext(context:AnyObject?){super.awakeWithContext(context)image.startAnimatingWithImagesInRange(NSMakeRange(1,145),d