原文：watchOS 2 Tutorial Part 3: Animation
歡迎回到 watchOS 2 系列教程!
在系列的第一部分,通過(guò)創(chuàng)建第一個(gè)界面控制器你學(xué)習(xí)了 watchOS 2 開發(fā)的基礎(chǔ)溢陪。
在系列的第二部分,你學(xué)習(xí)了如何給 app 增加列表奖年。
在第三部分的教程,通過(guò)往 app 增加一個(gè) check-in(登記) 界面,學(xué)習(xí)如何使用 watchOS 2 動(dòng)畫羹蚣。
在這個(gè)過(guò)程,你會(huì)學(xué)到:
- 如何創(chuàng)建基于圖片的動(dòng)畫;
- 如何使用新的 watchOS 2 動(dòng)畫 API。
讓我們開始吧!
提示: 這篇教程需要上篇教程的基礎(chǔ)。如果沒(méi)有項(xiàng)目文件在這里下載脸候。
開始
打開 Watch\Interface.storyboard,從對(duì)象庫(kù)中拖動(dòng)一個(gè) Interface Controller 到 storyboard 畫板中。選中這個(gè)界面控制器,打開屬性檢查器設(shè)置 Identifier 為 CheckIn绑蔫。這么做之后你就可以在 ScheduleInterfaceController 中打開它了运沦。
下一步,從對(duì)象庫(kù)中拖動(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向叉。你的界面控制器看起來(lái)應(yīng)該是這樣:
現(xiàn)在是時(shí)候增加 check-in 按鈕了!
增加 Check-In 按鈕
從對(duì)象庫(kù)拖動(dòng)一個(gè) Button 到界面控制器中,確保它與包含起點(diǎn)和終點(diǎn)標(biāo)簽的組在同一級(jí)節(jié)點(diǎn):
WatchKit 中按鈕非常靈活;你可以使用它們默認(rèn)的外觀 - 或者你也可以使用一個(gè)布局組,通過(guò)添加其他界面對(duì)象來(lái)自定義按鈕的外觀锥腻。我們就是使用這第二種方式。
選中按鈕使用屬性檢查器做如下修改:
- 設(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ì)象庫(kù)拖動(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 的子類來(lái)管理控制器了,并且更新 ScheduleInterfaceController 的內(nèi)容來(lái)顯示它咬扇。
創(chuàng)建控制器
在項(xiàng)目導(dǎo)航中右擊 Watch Extension 組選擇 New File...甲葬。在彈出的對(duì)話框中選擇 watchOS\Source\WatchKit Class 然后點(diǎn)擊 Next。命名新的類為 CheckInInterfaceController,確保它是 WKInterfaceController 的子類并且語(yǔ)言設(shè)置為 Swift:
點(diǎn)擊 Next,然后 Create懈贺。
當(dāng)新的文件在代碼編輯器中打開后,刪除三個(gè)空的方法,只剩下重要的代碼和類定義经窖。
在類的頂部添加如下代碼:
@IBOutlet var backgroundGroup: WKInterfaceGroup!
@IBOutlet var originLabel: WKInterfaceLabel!
@IBOutlet var destinationLabel: WKInterfaceLabel!
為最外層的組添加 outlets 然后是你剛剛創(chuàng)建的兩個(gè)標(biāo)簽。
下一步,在 outlets 下面添加如下代碼:
var flight: Flight? {
didSet {
if let flight = 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)
if let flight = context as? Flight { self.flight = flight }
}
這步操作你應(yīng)該很熟悉了堡妒。嘗試解包然后轉(zhuǎn)換 context 為 Flight 對(duì)象,如果成功了使用它設(shè)置 self.flight,然后觸發(fā)屬性觀察器設(shè)置界面配乱。
最后,在 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()
}
}
下面解釋一步步操作:
- 創(chuàng)建了兩個(gè)常量:一個(gè)是動(dòng)畫的時(shí)長(zhǎng),另一個(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說(shuō)明動(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)容為如下代碼:
let flight = flights[rowIndex]
let controllers = ["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)擊按鈕來(lái)觸發(fā)動(dòng)畫并且登記(check-in)航班:
這看起來(lái)很好, 但是航班登記完成的同時(shí)列表界面控制器也高亮顯示,這樣會(huì)更好鸳吸。在下一節(jié)我們會(huì)這樣做熏挎。
高亮顯示航班
打開 FightRowController.swift 往里面添加以下方法:
func updateForCheckIn() {
let color = 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 在類的頂部增加如下屬性:
var selectedIndex = 0
使用這個(gè)屬性來(lái)記錄哪個(gè)列表行被選中坎拐。在 presentControllerWithNames(_:contexts) 的上面添加如下代碼:
selectedIndex = rowIndex
使用選中的列表行的索引來(lái)設(shè)置 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()
})
}
}
以下講解上面的代碼:
- 判斷之前選中的航班有沒(méi)有被登記過(guò),如果登記過(guò)就在列表中使用相應(yīng)的索引獲取行控制器并將它傳換為一個(gè) FightRowController 對(duì)象养匈。
- 如果轉(zhuǎn)換成功了,使用 WKInterfaceController 新的動(dòng)畫 API 來(lái)執(zhí)行指定的閉包,持續(xù)時(shí)間是0.35秒哼勇。
- 在閉包中,調(diào)用你剛添加到 FightRowController 中的方法,修改對(duì)應(yīng)列表行的飛機(jī)圖片和分割線的顏色,為用戶提供一些視覺(jué)反饋,告訴他們已經(jīng)登記成功了。
編譯運(yùn)行呕乎。和之前相同步驟來(lái)登記一個(gè)航班,你會(huì)看到當(dāng)返回到列表界面控制器的時(shí)候,相應(yīng)列表行的飛機(jī)圖片和分割線漸變到新的顏色了:
恭喜!你已經(jīng)完成你的第一套 WatchKit 動(dòng)畫积担。
接下來(lái)做什么?
下面是這篇教程的完整示例項(xiàng)目。
在這篇教程中你學(xué)習(xí)了如何創(chuàng)建兩種不同類型的 WatchKit 動(dòng)畫猬仁。第一種,使用圖片動(dòng)畫序列,第二種,使用 WKInterfaceController 新的動(dòng)畫 API帝璧。請(qǐng)使用它們往你的 WatchOS 2 app 中加入合適的視覺(jué)效果吧!
那么,接下來(lái)呢?在教程的第四也是最后一部分中,會(huì)學(xué)習(xí)所有關(guān)于 Watch Connectivity 的知識(shí),一個(gè)嶄新的 watchOS 2 和 iOS 9 的框架。
