watchOS 4 教程(3):动画

原文:watchOS 4 Tutorial Part 3: Animation
作者:Audrey Tam
译者:kmyhy

更新说明: 本教程由 Audrey Tam 更新至 Swift 4/watchOS 4。原文作者是 Mic Pringle。

欢迎回到 watchOS 4 系列教程!

在教程(1)中,你学习了基本的 watchOS 4 开发,创建了你的第一个 interface controller。

在教程(2)中,你学习了如何在 app 中添加表格。

在这部教程(3)中,你将学习如何使用 watchOS 4 动画,在 app 中添加一个新的登机界面。

在这个过程中,你将学到:

  • 如何创建基于 image 的动画
  • 如何使用 watchOS 4 的动画 API

让我们立即开始吧!

注意:这部分教程基于教程(2)的工作基础之上。你可以用之前的项目开始,如果你想重新开始,也可以从这里下载代码。

开始

打开 Watch\Interface.storyboard,从 Object Library 中拖一个 interface controller 到故事板中。选中这个 interface controller,打开属性面板,将 Identifier 设置为 CheckIn。这样才能从 ScheduleInterfaceController 中呈现这个 interface controller。

然后,拖一个 group 到新的 interface controller 上。在属性面板中,修改属性:

  • 设置 Layout 为 Vertical。
  • 设置 Mode 为 Center。
  • 设置 Horizontal Alignment 为 Center。
  • 设置 Height 为 Relative to Container。

你的 interface controller 看起来应该像这样:

watchOS 4 教程(3):动画_第1张图片

接下来,我们会构建一个 label-image-label 样的 group,和你创建表格行时差不多。

拖一个 group 到刚才的 group 中,在属性面板修改下列属性:

  • 设置 Spacing 为 4。
  • 设置 Horizontal Alignment 为 Center。
  • 设置 Width 为 Size To Fit Content。
  • 设置 Height 为 Fixed,值为 30 (比表格行略矮)。

在新 group 中添加一个 label 和一个 image。我们会设置 label,然后复制修改它,用于显示航班起点和终点。

选中 image,无论从故事板中还剩 document outline 中都可以。在属性面板中,修改其属性:

  • 设置 Image 为 Plane。
  • 设置 Tint 为 #FA114F (又是我们的 Air Aber 粉!)。
  • 设置 Vertical Alignment 为 Center。
  • 设置 Width 为 Fixed,值为 24。
  • 设置 Height 为 Fixed,值为 20。

和之前一样,这个图片不会被上色,你无法将它从 interface controller 的黑色背景中看见它。但你应该知道它是存在的。

选中 label,将 Text 设置为 MEL。将 Font 设置为 System,字体样式为 Semibold、大小为 20。最后,设置它的 Vertical alignment 为 Center,将它的宽、高都修改成 Size To Fit Content。

复制这个 label,然后将它粘贴到 image 旁边。将 text 修改为 SFO,Horizontal Alignment 设置为 Right。你的 interface controller 现在应该看起来是这个样子:

watchOS 4 教程(3):动画_第2张图片

现在来添加一个大大的登机按钮。

添加登机按钮

从 Object Library 中拖一个按钮到 interface controller,将位置放到和起点、终点 label 同一个 group 中:

watchOS 4 教程(3):动画_第3张图片

WatchKit 中的按钮非常灵活;你可以只使用它们的内置样式——这样你只能添加一种样式——你还可以将它们转换成布局 group,将其它界面元素添加进去以定制其外观。这就是我们接下来要做的。

选中按钮,在属性面板中修改下列属性:

  • 设置 Content 为 Group。
  • 设置 Horizontal Alignment 为 Center。
  • 设置 Vertical Alignment 为 Center。

现在的 interface controller 应该是这个样子:

watchOS 4 教程(3):动画_第4张图片

你可能注意到了,当你修改按钮的 Content 属性时,在 document outline 中出现了一个新的 group:

watchOS 4 教程(3):动画_第5张图片

你将用它作为登机按钮的背景。选中这个 group,在属性面板中修改属性:

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

interface controller 现在是这个样子:

watchOS 4 教程(3):动画_第6张图片

登机按钮开始有点样子了。唯一缺少的仅仅是一个标签,接下来我们就添加它。

拖一个 label 到按钮下面的这个 group 中,然后选中 label。用属性面板修改其属性:

  • 设置 Text 为 Check In。
  • 设置 Font 为 System,字体样式为 Semibold 字体大小为 16。
  • 设置 Horizontal Alignment 为 Center。
  • 设置 Vertical Alignment 为 Center。

完成后的这个登机按钮长这个样子:

watchOS 4 教程(3):动画_第7张图片

接下来应该专门为这个 controller 创建一个 WKInterfaceController 子类并修改 ScheduleInterfaceController 以便显示它。

创建 Controller

在项目导航器中,右键点击 Watch Extension 文件夹,选择 New File…。在对话框中选择 watchOS\Source\WatchKit Class 然后点 Next。文件名命名为 CheckInInterfaceController,继承自 WKInterfaceController,将 Language 设置为 Swift。

点击 Next、Create。

新文件打开后,删除 3 个空方法,只留下 import 语句和类定义。

然后,在类头部添加:

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

这里为最外层的 group 和两个 label 都创建了 outlet。后面我们会连接它们。

然后,在 outlet 下面添加:

var flight: Flight? {
  didSet {
    guard let flight = flight else { return }

    originLabel.setText(flight.origin)
    destinationLabel.setText(flight.destination)
  }
}

你应该知道了吧!这里,我们添加了一个可空的 Flight 对象,同时定义了一个属性观察器。当观察器触发时,我们队 flight 解包,如果解包成功,用这个 flight 来设置两个 label。这个套路你已经相当熟悉了,不是吗?

当 controller 被呈现时,我们必须对 flight 属性赋值。在 CheckInInterfaceController 中添加方法:

override func awake(withContext context: Any?) {
  super.awake(withContext: context)

  if let flight = context as? Flight {
    self.flight = flight
  }
}

这个你也应该很熟悉。我们首先解包 context 对象成一个 Flight 对象。如果解包成功,将它赋给 self.flight,这会触发属性观察器并更新 UI。

最后,在 awake(withContext:) 下面添加:

@IBAction func checkInButtonTapped() {
  // 1
  let duration = 0.35
  let delay = DispatchTime.now() + (duration + 0.15)
  // 2
  backgroundGroup.setBackgroundImageNamed("Progress")
  // 3
  backgroundGroup.startAnimatingWithImages(in: NSRange(location: 0, length: 10), 
    duration: duration,
    repeatCount: 1)
  // 4
  DispatchQueue.main.asyncAfter(deadline: delay) { [weak self] in
    // 5
    self?.flight?.checkedIn = true
    self?.dismiss()
  }
}

分成几个步骤:

  1. 这里创建了两个常量:一个是动画的时长,一个是当控制器解散时的延时。这 delay 没有使用 Double 类型,而是使用了 DispatchTime 类型,因为我们将在 GCD 中使用它。
  2. 加载一个名叫 Progress 的图片序列,并用作 backgroundGroup 的背景图片。布局 group 实现了 WKImageAnimatable 协议,这个协议允许我们播放图片序列。
  3. 播放动画序列。播放的范围指定为整个序列,repeatCount:1 表示动画只播放一次。
  4. WatchKit 没有完成处理块,因此只能用 GCD 延时回调来代替回调闭包。
  5. 在闭包中,你可以将航班标记为已登机,然后解散控制器。

现在需要在项目中添加用到的图片,以及连接 outlet 和一个 IBAction。

下载这个 zip 文件,解压缩,将文件夹整个拖到 Watch\Assets.xcassets。

确认你拖的是文件夹,而不是它的内容。这会在 asset catalog 中创建一个新的 group 叫做 Progress,其中包含以下几张图片:

watchOS 4 教程(3):动画_第8张图片

添加完图片,就要连接 outlet 和按钮的 action 了。

打开 Watch\Interface.storyboard,选中我们的新 interface controller。在 Identity 面板中,修改 Custom Class\Class 为 CheckInInterfaceController:

watchOS 4 教程(3):动画_第9张图片

在 document outline 中,右键点击 CheckIn 调出 outlets and actions 菜单。将 backgroundGroup 连接到 interface controller 最外层的 group:

watchOS 4 教程(3):动画_第10张图片

在故事板中,连接 destinationLabel 到 SFO 标签,连接 originLabel 到 MEL 标签。

然后,连接 checkInButtonTapped 到圆圆的大按钮上:

watchOS 4 教程(3):动画_第11张图片

在 Build & run 之前,还有最后一件事情,就是呈现这个 interface controller。

呈现控制器

打开 ScheduleInterfaceController.swift,找到 table(_:didSelectRowAt:) 方法,将它的内容修改为:

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

这里,我们从 flights 数组检索出 rowIndex 对应的 flight 对象,创建一个包含了要呈现的 2 个 interface 控制器的 identifier 的数组,并分别向它们传入两个 flight 作为 context。

Build & run。点击一个航班,你会两个 interface controller 显示出来。向左扫显示登机 controller,点击按钮播放动画并登机:

watchOS 4 教程(3):动画_第12张图片

这看起来很好,但如果在 schedule interface controller 中能对已登机的航班加亮显示就更好了。我们将在下一节也就是本文的最后一节解决这个问题。

航班加亮

打开 FlightRowController.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 和 separator 的 tint 颜色。这个方法将在动画闭包中调用,因此颜色的改变是以动画的方式进行的。

然后,打开 ScheduleInterfaceController.swift 在 flights 属性后面添加:

var selectedIndex = 0

用这个属性记录当呈现两个 interface 控制器时选中的行。当表格行被选中时对这个属性赋值就好了。在 table(_:didSelectRowAt:) 中调用 presentController(withNames:contexts:) 的一句前添加:

selectedIndex = rowIndex

将 selectedIndex 设置为选中行。

最后,在 ScheduleInterfaceController 的 awake(withContext:) 方法后面添加:

override func didAppear() {
  super.didAppear()
  // 1
  guard flights[selectedIndex].checkedIn,
    let controller = flightsTable.rowController(at: selectedIndex) as? FlightRowController else {
      return
  }

  // 2
  animate(withDuration: 0.35) {
    // 3
    controller.updateForCheckIn()
  }
}

代码解释如下:

  1. 判断所选航班是否已经 check in,如果是,转换对应行索引的 row controller 为 FlightRowController 对象。
  2. 如果转换成功,用 WKInterfaceController 的 animation API 执行指定闭包,动画时长设置为 0.35 秒。
  3. 在闭包中,调用前面添加到 FlightRowController 中的方法,修改该表格行上的飞机图片和分隔线的颜色,给用户知道他们现在已经登记的航班。

Build & run。执行前面同样的步骤进行航班登机。当你返回 schedule interface controller,你会发现飞机图片和分隔线的颜色以一种渐变的方式发生了改变。

watchOS 4 教程(3):动画_第13张图片

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

接下来做什么?

这里是本系列完成后的示例项目。

在这部分教程中,你学习了如何创建两个不同的 WatchKit 动画。第一个使用的是动画图片序列,第二个使用的是 WKInterfaceController 的 animation API。你现在已经可以为你自己的 watchOS 4 app 中添加大量的视觉效果了!

遗憾的是,本系列教程就到此为止了。

如果你有疑问或建议,请在下面的论坛中留言!

你可能感兴趣的:(iPhone开发)