匿名社交應用secret的開發者開發了一款叫做ping的應用,使用者可以他們感興趣的話題的推送。
ping有一個很炫的東西,就是主界面和之間切換的動畫做的非常的好。每次看到一個非常炫的動畫,都不由得會想:“這個東西我要不要自己實作以下”。哈哈~~~
這個教程裡,你會學到如何用swift實作這樣的很酷的動畫。你會學到如何使用shape layer,遮罩和使用uiviewcontrolleranimnatedtransitioning協定和uipercentdriveninteractivetransition類等實作view controller界面切換動畫。
不過需要注意,這裡假定你已經有一定的swift開發基礎。如果隻是初學的話,請自行檢視我得其他swift教程。
開篇簡介
我們主要介紹ping裡從一個view controller跳轉到另一個的時候的動畫。
在ios裡,你可以在uinavigationcontroller中放入兩個view controller,并實作uiviewcontrolleranimatedtransitioning協定來實作界面切換的動畫。具體的細節有:
動畫的時間長度
建立一個容器view來控制兩個view controller的view
可以實作任意你能想到的動畫
這些動畫,你可以用uiview得動畫方法來作,也可以用core animation這樣的比較底層的方法來做。本教程會使用後者。
如何實作
現在你已經知道代碼大概會添加到什麼地方。下面讨論下如何實作那個ping的那個圈圈動畫。這動畫嚴格的描述起來是:
圓圈是從右側的按鈕産生。并且從圈中可以看到下面一層試圖的内容。
也就是說,這個圓圈是一個遮罩。圓圈裡的都可以看到,外面的全部都隐藏。
你可以用calayer的mask可以達到這個效果。當然還需要設定alpha為0來隐藏下面一個視圖的内容。alpha值設定為1的時候顯示下面視圖的内容。

現在你就懂了遮罩了。下一步就是決定用哪一種cashapelayer來實作這個遮罩。隻需要修改這些cashapelayer組成的圓圈的半徑。
現在開始
這裡就不十分詳細的叙述了,都是些關于建立和配置項目的步驟。
1. 建立一個新的項目。選擇一個single view application
2. 項目名稱設定為circletransition。語言選擇swift。devices就選擇iphone
項目到此初步建立好了。在main.stroyboard裡隻有一個view controller。但是我們的動畫需要兩個至少的view controller。不過首先需要把現在的這個view controller和uinavigationcontroller關聯起來。選中這個唯一的view controller,之後在菜單欄中選擇editor->embed in->navigation controller。之後這個navigation controller就會成為initial controller,後面連着最開始生成的那個view controller。之後,選中這個navigation controller,在右側菜單欄的第四個tab中勾去“shows navigation bar”。因為在我們的app中不需要navigation bar。
接下來添加另外一個view controller。給這個view controller指定class為viewcontroller。
然後,給每一個view controller,除了navigation controller,添加一個按鈕。輕按兩下按鈕,删除文字,之後把按鈕的背景色設定為黑色。另外一個按鈕也同樣處理。給這兩個按鈕設定autolayout。指定他們在右上角上。指定這兩個按鈕的寬度和高度為40。
最後讓按鈕變成圓形的。右邊菜單的第三個tab中選擇“user defined runtime attributes”。點下面的加号,添加如圖所示的内容。設定button的corner radius為15。
這樣這個按鈕在運作起來的時候就是圓形的了。設定完成之後暫時看不到這個效果。運作起來以後:
現在需要在每個view controller中添加些内容了。先把這兩個view controller的背景色修改一下。
現在這個app大緻已經成型了。不同的顔色可以代表你将來要顯示出來的各種各樣的内容。所需要的就是把這個兩個view controller連起來。在橘色的controller的按鈕中放下滑鼠。按下ctrl然後把光标拖動到另外一個controller上。這是會出現一個彈出的菜單。把這個菜單的action用同樣的方法和這個controller再連接配接一次,并選擇show。這樣,在這個按鈕選擇的時候,navigation controller就會push到下一個view controller中。這是一個segue。後面的教程會需要這個segue是以這裡給這個segue一個identifer,叫做“pushsegue”。運作代碼,點選橘色controller的按鈕就會跳轉到紫色的controller了。
因為這是一個循環的過程,是以從橘色到紫色之後還需要從紫色回到橘色。現在就完成這個功能。首先,在紫色controller綁定的viewcontroller類中添加一個action方法。
并添加紫色controller上的按鈕的引用,這個會在後面用到:
之後給紫色controller的按鈕的“touch up inside”事件添加上面的@ibaction。
綁定按鈕的屬性:
再運作起來看看。橘色到紫色,紫色到橘色循環往複!
注意:兩個view controller都需要綁定按鈕和按鈕事件!否則後面的動畫隻能執行一次!
自定義動畫
這裡主要處理的就是navigation controller的push和pop動畫。這需要我們實作uinavigationcontrollerdelegate協定的animationcontrollerforoperation方法。直接在viewcontroller中添加一個新的類:
首先,在右側的菜單中選中object這個item。
之後,把這個東西拖動到navigation controller secene下。
然後選中這個object,在右側菜單的第三個tab上修改class為我們剛剛定義的navigationcontrollerdelegate。
下一步,給navigation controller指定delegate。選中navigation controller,然後在右側最後的菜單中連接配接navigation controller的delegate選項到剛剛拖進來的object上:
這個時候還是不會有特定的效果出現。因為方法還是空的,隻能算是一個placeholder方法。
這個方法接受兩個在navigation controller中得controller。從一個跳轉到另一個的兩個controller。并傳回一個實作了uiviewcontrolleranimatedtransitioning的對象。是以,我們需要建立一個實作了uiviewcontrolleranimatedtransitioning協定的類。
首先添加一個屬性:
這個屬性會在後面的代碼中用到。
添加一個方法:
這個方法傳回動畫執行的時間。
添加動畫方法:
一步步的解釋:
transitioncontext屬性保持了一個類成員的引用。這樣在後面的代碼中可以用到。
取出containerview以及fromviewcontroller和toviewcontroller和controller上面的button引用。動畫主要還是作用在container view上的。
把toviewcontroller的view添加到container view上。
建立兩個路勁,一個就是button的大小(button在運作起來之後是圓形的),另一個要足夠大到可以cover整個screen。動畫就是在這兩個path上來來回回。
建立一個cashapelayer作為mask用。給這個layer的path指派為circlemaskpathfinal,否則動畫執行完成以後可能又縮回來。
建立一個cabasicanimation動畫,key path是“path”,這個動畫作用于layer的path屬性上。動畫從circlemaskpathinitial執行到circlemaskpathfinal。并給這個動畫添加一個delegate,在動畫執行完成以後清理現場。
實作animation代理的方法:
現在就可以用circletransitionanimator來實作動畫的效果了。修改代碼navigationcontrollerdelegate的代碼:
運作起來吧。點選黑色的按鈕,動畫效果就出現了。
感覺不錯吧,但是這個是不夠的!
給動畫添加手勢響應
我們還要給這個動畫添加一個可以響應手勢的transition。響應手勢需要用到一個方法:navigationcontroller->interactioncontrollerforanimationcontroller。這是uinavigationcontrollerdelegate中得一個方法。這個方法傳回一個實作了協定uiviewcontrollerinteractivetransitioning的對象。
ios的sdk中提供了一個uipercentdriveninteractivetransition的類。這個類實作了上面的協定,并且提供了很多其他的手勢處理實作。
在navigationcontrollerdelegate類中添加以下的屬性和方法:
既然是響應手勢的,那麼一個pan的手勢是必不可少的了。不過首先要添加一些輔助的東西。
1. 在navigationcontrollerdelegate中添加對navigation controller的引用。
給這個引用添加對navigation controller的引用,如圖:
實作awakefromnib方法:
當pan這個動作在navigation controller的view上發生的時候就會觸發panned回調方法。給這個方法添加如下代碼:
在begin中,pan手勢一開始執行就初始化出uipercentdriveninteractivetransition對象,并作為值賦給屬性self.interactioncontroller。
如果在第一個view controller就設定一個push(在早先定義的一個segue),在第二個view controller的時候就設定一個pop。
在navigation controller的push或者pop的時候則觸發navigationcontrollerdelegate的傳回self.interactioncontroller對象的方法。
changed,在這個方法中根據手勢移動的距離讓動畫移動不同的距離。這裡apple已經替我們做了很多。
ended,這裡你會看到手勢的移動速度。如果是正則transition結束,如果是負則取消。同時,把interactioncontroller值設定為nil。
default,如果是其他的狀态就直接取消trnasition并把interactioncontroller值設定為nil。
運作程式,在螢幕上左右移動你的手指看看效果吧!
歡迎加群互相學習,共同進步。qq群:ios: 58099570 | android: 330987132 | go:217696290 | python:336880185 | 做人要厚道,轉載請注明出處!http://www.cnblogs.com/sunshine-anycall/p/4283255.html