原文：watchOS 2 Tutorial Part 3: Animation

歡迎回到 watchOS 2 系列教程!

在系列的第一部分,通過創(chuàng)建第一個(gè)界面控制器你學(xué)習(xí)了 watchOS 2 開發(fā)的基礎(chǔ)曹阔。

在系列的第二部分,你學(xué)習(xí)了如何給 app 增加列表将宪。

在第三部分的教程,通過往 app 增加一個(gè) check-in(登記) 界面,學(xué)習(xí)如何使用 watchOS 2 動(dòng)畫窜护。

在這個(gè)過程,你會(huì)學(xué)到:

如何創(chuàng)建基于圖片的動(dòng)畫;

如何使用新的 watchOS 2 動(dòng)畫 API。

讓我們開始吧!

提示: 這篇教程需要上篇教程的基礎(chǔ)轮听。如果沒有項(xiàng)目文件在這里下載。

開始

打開 Watch\Interface.storyboard,從對(duì)象庫中拖動(dòng)一個(gè) Interface Controller 到 storyboard 畫板中。選中這個(gè)界面控制器,打開屬性檢查器設(shè)置 Identifier 為 CheckIn铃慷。這么做之后你就可以在 ScheduleInterfaceController 中打開它了蹋笼。

下一步,從對(duì)象庫中拖動(dòng)一個(gè) Group 到這個(gè)新的界面控制器展姐。使用屬性檢查器做如下修改:

設(shè)置 Layout 為 Vertical;

設(shè)置 Mode 為 Center;

設(shè)置 Horiontal alignment 為 Center;

設(shè)置 Height 為 Relative to Container躁垛。

你的界面控制器應(yīng)該像這樣:

拖動(dòng)另一個(gè) Group 到之前那個(gè) Group 中,使用屬性檢查器做如下修改:

設(shè)置 Spacing 為 4;

設(shè)置 Horizontal alignment 為 Center;

設(shè)置 Width 為 Size To Fit Content;

設(shè)置 Height 為 Fixed,值為30。

往新的布局組中添加一個(gè) Label,一個(gè) Image 和另一個(gè) Label圾笨。兩個(gè)標(biāo)簽分別顯示每趟航班的起點(diǎn)和終點(diǎn)教馆。

選擇左邊的標(biāo)簽設(shè)置它的 Text 為 MAN。修改 Font 為 System,樣式為 Semibold 和字體大小為20.0擂达。最后設(shè)置 它的 Vertical alignment 為 Center土铺。

對(duì)右邊的標(biāo)簽做同樣的改變,只是文本改成 SFO。你的界面控制器看起來應(yīng)該是這樣:

現(xiàn)在是時(shí)候增加 check-in 按鈕了!

增加 Check-In 按鈕

從對(duì)象庫拖動(dòng)一個(gè) Button 到界面控制器中,確保它與包含起點(diǎn)和終點(diǎn)標(biāo)簽的組在同一級(jí)節(jié)點(diǎn):

WatchKit 中按鈕非常靈活;你可以使用它們默認(rèn)的外觀 - 或者你也可以使用一個(gè)布局組,通過添加其他界面對(duì)象來自定義按鈕的外觀板鬓。我們就是使用這第二種方式悲敷。

選中按鈕使用屬性檢查器做如下修改:

設(shè)置 Content 為 Group;

設(shè)置 Horizontal alignment 為 Center;

設(shè)置 Vertical alignment 為 Center。

你的界面控制器應(yīng)該像這樣:

你或許注意到當(dāng)你修改按鈕的 Content 屬性,一個(gè)新的組會(huì)出現(xiàn)在文檔大綱中:

你將使用它作為自定義 check-in 按鈕的背景俭令。選擇這個(gè)組使用屬性檢查器做如下修改:

設(shè)置 Color 為 #FA114F;

設(shè)置 Radius 為39;

設(shè)置 Width 為 Fixed,值為78;

設(shè)置 Height 為 Fixed,值為78;

界面控制器應(yīng)該像這樣:

你的 check-in 按鈕開始逐漸成型了后德。唯一缺少標(biāo)簽了,讓我們添加吧。

從對(duì)象庫拖動(dòng)一個(gè) Label 到按鈕中的組,選中它抄腔。再一次使用屬性檢查器做如下修改:

設(shè)置 Text 為 Check In;

設(shè)置 Font 為 System,樣式為Semibold,16.0的字體大小;

設(shè)置 Horizontal alignment 為 Center;

設(shè)置 Vertical alignmen 為 Center瓢湃。

完成的 check-in 界面控制器應(yīng)該是這樣的:

界面完成后,是時(shí)候創(chuàng)建 WKInterfaceController 的子類來管理控制器了,并且更新 ScheduleInterfaceController 的內(nèi)容來顯示它。

創(chuàng)建控制器

在項(xiàng)目導(dǎo)航中右擊 Watch Extension 組選擇 New File...赫蛇。在彈出的對(duì)話框中選擇 watchOS\Source\WatchKit Class 然后點(diǎn)擊 Next箱季。命名新的類為 CheckInInterfaceController,確保它是 WKInterfaceController 的子類并且語言設(shè)置為 Swift:

點(diǎn)擊 Next,然后 Create。

當(dāng)新的文件在代碼編輯器中打開后,刪除三個(gè)空的方法,只剩下重要的代碼和類定義棍掐。

在類的頂部添加如下代碼:

@IBOutletvar backgroundGroup: WKInterfaceGroup!@IBOutletvar originLabel: WKInterfaceLabel!@IBOutletvar destinationLabel: WKInterfaceLabel!

為最外層的組添加 outlets 然后是你剛剛創(chuàng)建的兩個(gè)標(biāo)簽藏雏。

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

varflight: Flight? {? didSet {ifletflight = flight {? ? ? originLabel.setText(flight.origin)? ? ? destinationLabel.setText(flight.destination)? ? }? }}

這里添加一個(gè)可選的 Flight 屬性,它包括一個(gè)屬性觀察器。當(dāng)觀察器觸發(fā)了,嘗試對(duì) flight 解包,如果解包成功使用 flight 設(shè)置兩個(gè)標(biāo)簽的屬性作煌。這是現(xiàn)在的你應(yīng)該很熟悉的操作了吧,對(duì)嗎?

當(dāng)控制器打開的時(shí)候你需要設(shè)置 flight 的值掘殴。在 CheckInInterfaceController 中添加如下代碼:

override func awakeWithContext(context: AnyObject?) {super.awakeWithContext(context)ifletflight = contextas? Flight { self.flight = flight }}

這步操作你應(yīng)該很熟悉了。嘗試解包然后轉(zhuǎn)換 context 為 Flight 對(duì)象,如果成功了使用它設(shè)置 self.flight,然后觸發(fā)屬性觀察器設(shè)置界面粟誓。

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

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

下面解釋一步步操作:

創(chuàng)建了兩個(gè)常量:一個(gè)是動(dòng)畫的時(shí)長,另一個(gè)是指定延時(shí)后關(guān)閉控制器奏寨。因?yàn)槭褂玫氖荊CD,所以 delay 是? dispatch_time_t 的實(shí)例而不是 Double。

加載名為 Progress 的圖片序列然后設(shè)置為 backgroundGroup 的背景圖片鹰服。記住布局組實(shí)現(xiàn)了 WKImageAnimatable, 所以它能使用圖片序列播放動(dòng)畫病瞳。

開始播放圖片序列。設(shè)置的 Range 保證能播放全部的圖片,重復(fù)次數(shù)為1說明動(dòng)畫只執(zhí)行一次悲酷。

使用 GCD 在指定延時(shí)后執(zhí)行閉包套菜。

在閉包中, 設(shè)置 flight 為 checked-in,然后關(guān)閉控制器。

現(xiàn)在你只需往項(xiàng)目添加圖片,并且連接 outles 和 action设易。

下載壓縮文件,解壓縮文件,拖動(dòng)文件夾到你的 Watch\Assets.xcassets逗柴。

確保拖動(dòng)的是文件夾而不是它里面的內(nèi)容。這會(huì)在 asset catalog 中創(chuàng)建一個(gè)新的叫 Progress 的組,它包含一些圖片的集合:

圖片放好了,是時(shí)候設(shè)置 outlets 和 按鈕 action顿肺。

打開 Watch\Interface.storyboard 選擇新的界面控制器戏溺。在 Identity Inspector 中,修改 Custom Class\Class 為 CheckInInterfaceController:

在文檔大綱中右擊 CheckIn 控制器調(diào)用 outlets 和 actions 彈出框渣蜗。連接 backgroundGroup 到 界面控制器最外層的組:

連接 destinationLabel 到 文本是 SFO 的標(biāo)簽,連接 originLabel 到文本是 MAN 的文本。

下一步,連接 checkInButtonTapped 到 那個(gè)又大又圓粉紅色的按鈕:

打開控制器

打開 ScheduleInterfaceController.swift,找到 table(_:didSelectRowAtIndex:),替換它的內(nèi)容為如下代碼:

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

這里你使用 rowIndex 從 flights 中找出相應(yīng)的航班,創(chuàng)建數(shù)組元素是即將打開的兩個(gè)界面控制器的 identifiers旷祸。之后打開這兩控制器,給它們傳遞 flight 作為 context耕拷。

編譯運(yùn)行。點(diǎn)擊一個(gè)航班會(huì)看到打開了一對(duì)界面控制器托享。往左清掃打開 check-in 控制器,之后點(diǎn)擊按鈕來觸發(fā)動(dòng)畫并且登記(check-in)航班:

這看起來很好, 但是航班登記完成的同時(shí)列表界面控制器也高亮顯示,這樣會(huì)更好骚烧。在下一節(jié)我們會(huì)這樣做。

高亮顯示航班

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

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

這里你創(chuàng)建了 UIColor 的例子,之后使用它分別設(shè)置 planeImage 的 tint color 和 separator 的? color嫌吠。這個(gè)方法在動(dòng)畫閉包中調(diào)用,所以顏色改變能產(chǎn)生很好的動(dòng)畫效果止潘。

下一步,打開 ScheduleInterfaceController.swift 在類的頂部增加如下屬性:

varselectedIndex =0

使用這個(gè)屬性來記錄哪個(gè)列表行被選中。在 presentControllerWithNames(_:contexts) 的上面添加如下代碼:

selectedIndex = rowIndex

使用選中的列表行的索引來設(shè)置 selectedIndex辫诅。

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

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

以下講解上面的代碼:

判斷之前選中的航班有沒有被登記過,如果登記過就在列表中使用相應(yīng)的索引獲取行控制器并將它傳換為一個(gè) FightRowController 對(duì)象凭戴。

如果轉(zhuǎn)換成功了,使用 WKInterfaceController 新的動(dòng)畫 API 來執(zhí)行指定的閉包,持續(xù)時(shí)間是0.35秒。

在閉包中,調(diào)用你剛添加到 FightRowController 中的方法,修改對(duì)應(yīng)列表行的飛機(jī)圖片和分割線的顏色,為用戶提供一些視覺反饋,告訴他們已經(jīng)登記成功了炕矮。

編譯運(yùn)行么夫。和之前相同步驟來登記一個(gè)航班,你會(huì)看到當(dāng)返回到列表界面控制器的時(shí)候,相應(yīng)列表行的飛機(jī)圖片和分割線漸變到新的顏色了:

恭喜!你已經(jīng)完成你的第一套 WatchKit 動(dòng)畫。

接下來做什么?

下面是這篇教程的完整示例項(xiàng)目肤视。

在這篇教程中你學(xué)習(xí)了如何創(chuàng)建兩種不同類型的 WatchKit 動(dòng)畫档痪。第一種,使用圖片動(dòng)畫序列,第二種,使用 WKInterfaceController 新的動(dòng)畫 API。請(qǐng)使用它們往你的 WatchOS 2 app 中加入合適的視覺效果吧!

那么,接下來呢?在教程的第四也是最后一部分中,會(huì)學(xué)習(xí)所有關(guān)于 Watch Connectivity 的知識(shí),一個(gè)嶄新的 watchOS 2 和 iOS 9 的框架邢滑。