watchOS 2 教程(三):动画

原文：watchOS 2 Tutorial Part 3: Animation

欢迎回到 watchOS 2 系列教程!

在系列的第一部分,通过创建第一个界面控制器你学习了 watchOS 2 开发的基础。

在系列的第二部分,你学习了如何给 app 增加列表。

在第三部分的教程,通过往 app 增加一个 check-in(登记) 界面,学习如何使用 watchOS 2 动画。

在这个过程,你会学到:

如何创建基于图片的动画;
如何使用新的 watchOS 2 动画 API。

让我们开始吧!

提示: 这篇教程需要上篇教程的基础。如果没有项目文件在这里下载。

开始

打开 Watch\Interface.storyboard,从对象库中拖动一个 Interface Controller 到 storyboard 画板中。选中这个界面控制器,打开属性检查器设置 Identifier 为 CheckIn。这么做之后你就可以在 ScheduleInterfaceController 中打开它了。

下一步,从对象库中拖动一个 Group 到这个新的界面控制器。使用属性检查器做如下修改:

设置 Layout 为 Vertical;
设置 Mode 为 Center;
设置 Horiontal alignment 为 Center;
设置 Height 为 Relative to Container。

你的界面控制器应该像这样:

拖动另一个 Group 到之前那个 Group 中,使用属性检查器做如下修改:

设置 Spacing 为 4;
设置 Horizontal alignment 为 Center;
设置 Width 为 Size To Fit Content;
设置 Height 为 Fixed,值为30。

往新的布局组中添加一个 Label,一个 Image 和另一个 Label。两个标签分别显示每趟航班的起点和终点。

选择左边的标签设置它的 Text 为 MAN。修改 Font 为 System,样式为 Semibold 和字体大小为20.0。最后设置它的 Vertical alignment 为 Center。

对右边的标签做同样的改变,只是文本改成 SFO。你的界面控制器看起来应该是这样:

现在是时候增加 check-in 按钮了!

增加 Check-In 按钮

从对象库拖动一个 Button 到界面控制器中,确保它与包含起点和终点标签的组在同一级节点:

WatchKit 中按钮非常灵活;你可以使用它们默认的外观 - 或者你也可以使用一个布局组,通过添加其他界面对象来自定义按钮的外观。我们就是使用这第二种方式。

选中按钮使用属性检查器做如下修改:

设置 Content 为 Group;
设置 Horizontal alignment 为 Center;
设置 Vertical alignment 为 Center。

你的界面控制器应该像这样:

你或许注意到当你修改按钮的 Content 属性,一个新的组会出现在文档大纲中:

你将使用它作为自定义 check-in 按钮的背景。选择这个组使用属性检查器做如下修改:

设置 Color 为 #FA114F;
设置 Radius 为39;
设置 Width 为 Fixed,值为78;
设置 Height 为 Fixed,值为78;

界面控制器应该像这样:

你的 check-in 按钮开始逐渐成型了。唯一缺少标签了,让我们添加吧。

从对象库拖动一个 Label 到按钮中的组,选中它。再一次使用属性检查器做如下修改:

设置 Text 为 Check In;
设置 Font 为 System,样式为Semibold,16.0的字体大小;
设置 Horizontal alignment 为 Center;
设置 Vertical alignmen 为 Center。

完成的 check-in 界面控制器应该是这样的:

界面完成后,是时候创建 WKInterfaceController 的子类来管理控制器了,并且更新 ScheduleInterfaceController 的内容来显示它。

创建控制器

在项目导航中右击 Watch Extension 组选择 New File...。在弹出的对话框中选择 watchOS\Source\WatchKit Class 然后点击 Next。命名新的类为 CheckInInterfaceController,确保它是 WKInterfaceController 的子类并且语言设置为 Swift:

点击 Next,然后 Create。

当新的文件在代码编辑器中打开后,删除三个空的方法,只剩下重要的代码和类定义。

在类的顶部添加如下代码:

@IBOutlet var backgroundGroup: WKInterfaceGroup!
@IBOutlet var originLabel: WKInterfaceLabel!
@IBOutlet var destinationLabel: WKInterfaceLabel!

为最外层的组添加 outlets 然后是你刚刚创建的两个标签。

下一步,在 outlets 下面添加如下代码:

var flight: Flight? {
  didSet {
    if let flight = flight {
      originLabel.setText(flight.origin)
      destinationLabel.setText(flight.destination)
    }
  }
}

这里添加一个可选的 Flight 属性,它包括一个属性观察器。当观察器触发了,尝试对 flight 解包,如果解包成功使用 flight 设置两个标签的属性。这是现在的你应该很熟悉的操作了吧,对吗?

当控制器打开的时候你需要设置 flight 的值。在 CheckInInterfaceController 中添加如下代码:

override func awakeWithContext(context: AnyObject?) {
  super.awakeWithContext(context)
  if let flight = context as? Flight { self.flight = flight }
}

这步操作你应该很熟悉了。尝试解包然后转换 context 为 Flight 对象,如果成功了使用它设置 self.flight,然后触发属性观察器设置界面。

最后,在 awakeWithContext(_:) 下面添加如下 action:

@IBAction func checkInButtonTapped() {
  // 1
  let duration = 0.35
  let delay = dispatch_time(DISPATCH_TIME_NOW, Int64((duration + 0.15) * Double(NSEC_PER_SEC)))
  // 2
  backgroundGroup.setBackgroundImageNamed("Progress")
  // 3
  backgroundGroup.startAnimatingWithImagesInRange(NSRange(location: 0, length: 10), duration: duration, repeatCount: 1)
  // 4
  dispatch_after(delay, dispatch_get_main_queue()) { () -> Void in
    // 5
    self.flight?.checkedIn = true
    self.dismissController()
  }
}

下面解释一步步操作:

创建了两个常量:一个是动画的时长,另一个是指定延时后关闭控制器。因为使用的是GCD,所以 delay 是 dispatch_time_t 的实例而不是 Double。
加载名为 Progress 的图片序列然后设置为 backgroundGroup 的背景图片。记住布局组实现了 WKImageAnimatable, 所以它能使用图片序列播放动画。
开始播放图片序列。设置的 Range 保证能播放全部的图片,重复次数为1说明动画只执行一次。
使用 GCD 在指定延时后执行闭包。
在闭包中, 设置 flight 为 checked-in,然后关闭控制器。

现在你只需往项目添加图片,并且连接 outles 和 action。

下载压缩文件,解压缩文件,拖动文件夹到你的 Watch\Assets.xcassets。

确保拖动的是文件夹而不是它里面的内容。这会在 asset catalog 中创建一个新的叫 Progress 的组,它包含一些图片的集合:

图片放好了,是时候设置 outlets 和按钮 action。

打开 Watch\Interface.storyboard 选择新的界面控制器。在 Identity Inspector 中,修改 Custom Class\Class 为 CheckInInterfaceController:

在文档大纲中右击 CheckIn 控制器调用 outlets 和 actions 弹出框。连接 backgroundGroup 到界面控制器最外层的组:

连接 destinationLabel 到文本是 SFO 的标签,连接 originLabel 到文本是 MAN 的文本。

下一步,连接 checkInButtonTapped 到那个又大又圆粉红色的按钮:

打开控制器

打开 ScheduleInterfaceController.swift,找到 table(_:didSelectRowAtIndex:),替换它的内容为如下代码:

let flight = flights[rowIndex]
let controllers = ["Flight", "CheckIn"]
presentControllerWithNames(controllers, contexts:[flight, flight])

这里你使用 rowIndex 从 flights 中找出相应的航班,创建数组元素是即将打开的两个界面控制器的 identifiers。之后打开这两控制器,给它们传递 flight 作为 context。

编译运行。点击一个航班会看到打开了一对界面控制器。往左清扫打开 check-in 控制器,之后点击按钮来触发动画并且登记(check-in)航班:

这看起来很好, 但是航班登记完成的同时列表界面控制器也高亮显示,这样会更好。在下一节我们会这样做。

高亮显示航班

打开 FightRowController.swift 往里面添加以下方法:

func updateForCheckIn() {
  let color = UIColor(red: 90/255, green: 200/255, blue: 250/255, alpha: 1)
  planeImage.setTintColor(color)
  separator.setColor(color)
}

这里你创建了 UIColor 的例子,之后使用它分别设置 planeImage 的 tint color 和 separator 的 color。这个方法在动画闭包中调用,所以颜色改变能产生很好的动画效果。

下一步,打开 ScheduleInterfaceController.swift 在类的顶部增加如下属性:

var selectedIndex = 0

使用这个属性来记录哪个列表行被选中。在 presentControllerWithNames(_:contexts) 的上面添加如下代码:

selectedIndex = rowIndex

使用选中的列表行的索引来设置 selectedIndex。

最后,在 ScheduleInterfaceController 的 awakeWithContext(_:) 方法的下面添加如下代码:

override func didAppear() {
  super.didAppear()
  // 1
  if flights[selectedIndex].checkedIn, let controller = flightsTable.rowControllerAtIndex(selectedIndex) as? FlightRowController {
    // 2
    animateWithDuration(0.35, animations: { () -> Void in
      // 3
      controller.updateForCheckIn()
    })
  }
}

以下讲解上面的代码:

判断之前选中的航班有没有被登记过,如果登记过就在列表中使用相应的索引获取行控制器并将它传换为一个 FightRowController 对象。
如果转换成功了,使用 WKInterfaceController 新的动画 API 来执行指定的闭包,持续时间是0.35秒。
在闭包中,调用你刚添加到 FightRowController 中的方法,修改对应列表行的飞机图片和分割线的颜色,为用户提供一些视觉反馈,告诉他们已经登记成功了。

编译运行。和之前相同步骤来登记一个航班,你会看到当返回到列表界面控制器的时候,相应列表行的飞机图片和分割线渐变到新的颜色了:

恭喜!你已经完成你的第一套 WatchKit 动画。

接下来做什么?

下面是这篇教程的完整示例项目。

在这篇教程中你学习了如何创建两种不同类型的 WatchKit 动画。第一种,使用图片动画序列,第二种,使用 WKInterfaceController 新的动画 API。请使用它们往你的 WatchOS 2 app 中加入合适的视觉效果吧!

那么,接下来呢?在教程的第四也是最后一部分中,会学习所有关于 Watch Connectivity 的知识,一个崭新的 watchOS 2 和 iOS 9 的框架。