使用 UIViewPropertyAnimator 做動畫

iOS 10 帶來了一堆非常有意思的新特性,例如 UIViewPropertyAnimator吁峻。這是一個能夠改善動畫處理方式的新類盗尸。

它徹底改變了我們所習慣的工作流,為動畫邏輯添加了一個更為精細的控制手段澎怒。

<h1>來個例子
<h6>讓我們看看如何創(chuàng)建一個改變視圖中心的動畫。

let animator = UIViewPropertyAnimator(duration: 1.0, curve:                .easeOut){
AView.center = finalPoint
}
animator.startAnimation()
0.gif

這里至少有 3 點值得去關注:

  • 動畫是通過一個閉包來定義的阶牍,這與 UIView 的動畫方法 “UIView.animation(duration:…)” 十分相似喷面。
  • 方法返回了一個對象——animator。
  • 動畫并不是立即執(zhí)行走孽,而是通過 startAnimation() 方法來觸發(fā)執(zhí)行惧辈。

<h1>動畫狀態(tài)
<h6>使用這種新方式來處理動畫的不同之處就是 animator 有完整的狀態(tài)機邏輯。通過 UIViewAnimation 協(xié)議磕瓷,控件可以用一種簡單明了的方式實現動畫狀態(tài)的管理盒齿,例如調用 startAnimation、 pauseAnimation 和 stopAnimation 函數困食。通過調用這些函數边翁,我們可以更新控件的狀態(tài),使得控件在 active硕盹、inactive 和 stopped 狀態(tài)之間轉換符匾。

當動畫開始或者暫停的時候,動畫狀態(tài)為 active莱睁, 當控件被創(chuàng)建出來且沒有開始執(zhí)行動畫或者已經執(zhí)行完動畫的時候待讳,它的狀態(tài)是 inactive。這里還是要聲明下 inactive 和 stopped 之間還是有一點區(qū)別的仰剿。當動畫執(zhí)行完畢或者使用 stop 命令暫停動畫后,控件的狀態(tài)變?yōu)?stopped痴晦,而在 animator 內部會調用 finishAnimation(at:) 來表明當前動畫完畢南吮, 然后會設置當前狀態(tài)為 inactive,最后會調用 completion block.

<h1>動畫選項
<h6>在之前的例子中應該注意到了誊酌,在動畫的 block 中部凑,我們定義了兩個參數:動畫的 duration 和動畫的 curve露乏, 一個 UIViewAnimationCurve 能夠表示大部分的常見動畫曲線類型( easeIn, easeOut, liner 或者 easeInOut )。

當你需要對動畫曲線做更多的設置時涂邀,你可以通過兩個控制點來定義一個貝塞爾曲線

let animator = UIViewPropertyAnimator(
           duration: 1.0, 
           point1: CGPoint(0.1,0.5), 
           point2: CGPoint(0.5, 0.2){

    AView.alpha = 0.0
}

(如果貝塞爾曲線也不能滿足需求的話瘟仿,可以使用 UITimingCurveProvider 創(chuàng)建一個完全自定義的曲線)

另外一個有趣的動畫選項是你可以向函數傳遞 dampingRatio 參數。這與 UIView 的動畫方法相似比勉,可以通過使用一個 0 到 1 的 damping 值來實現彈跳效果劳较。

let animator = UIViewPropertyAnimator(
           duration: 1.0,
           dampingRatio:0.4){

    AView.center = CGPoint(x:0, y:0)
}
0 (1).gif

讓動畫延后執(zhí)行的操作也非常簡單,只需要在 startAnimation 函數中傳入 afterDelay 參數浩聋。

animator.startAnimation(afterDelay:2.5)

<h1>動畫 Block
<h6>UIViewPropertyAnimator 遵守了 UIViewImplicitlyAnimating 協(xié)議观蜗,這個協(xié)議賦予 UIViewPropertyAnimator 許多有趣的特性。舉個例子衣洁,除了在初始化期間指定的第一個動畫 block 外墓捻,還可以指定多個動畫 block。

// Initialization
let animator = UIViewPropertyAnimator(duration: 2.0, curve: .easeOut){
    AView.alpha = 0.0
}
// Another animation block
 animator.addAnimation{ 
    Aview.center = aNewPosition
}
animator.startAnimation()
0 (2).gif

你也可以在已經執(zhí)行動畫的代碼里添加動畫 block坊夫, 這個 block 會立即執(zhí)行并使用剩下的時間作為其動畫時長砖第。

<h1>與動畫的交互
<h6>在前面的內容里已經說明了我們可以通過調用 startAnimation、stopAnimation 和 pauseAnimation 等方法實現動畫的循環(huán)环凿。默認的動畫循環(huán)可以通過 fractionComplete 屬性進行修改厂画。這個值表明了動畫的完成百分比,它的取值范圍在 0.0 到 1.0 之間拷邢。這樣就可以通過修改 fractionComplete 來讓循環(huán)達到預期效果(例如:用戶可能會通過 slider 或者 pan 手勢來實時改變參數值)

animator.fractionComplete = slider.value

在一些場景下袱院,你可能想在動畫執(zhí)行完畢后做一些操作,addCompletion 允許你添加一個在動畫執(zhí)行完畢后才會被觸發(fā)的 block瞭稼。

animator.addCompletion { (position) in
    print("Animation completed")
}

position 參數是 UIViewAnimatingPosition 類型忽洛,它用于表明動畫結束的位置,這個值本身是一個枚舉环肘,包含了 starting欲虚、end 和 current。通常得到的值是 end悔雹。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末复哆,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子腌零,更是在濱河造成了極大的恐慌梯找,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件益涧,死亡現場離奇詭異锈锤,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門久免,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浅辙,“玉大人,你說我怎么就攤上這事阎姥〖怯撸” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵呼巴,是天一觀的道長泽腮。 經常有香客問我,道長伊磺,這世上最難降的妖魔是什么盛正? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮屑埋,結果婚禮上豪筝,老公的妹妹穿的比我還像新娘。我一直安慰自己摘能,他們只是感情好续崖,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著团搞,像睡著了一般严望。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上逻恐,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天像吻,我揣著相機與錄音,去河邊找鬼复隆。 笑死拨匆,一個胖子當著我的面吹牛,可吹牛的內容都是我干的挽拂。 我是一名探鬼主播惭每,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼亏栈!你這毒婦竟也來了台腥?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤绒北,失蹤者是張志新(化名)和其女友劉穎黎侈,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體镇饮,經...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡蜓竹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年箕母,在試婚紗的時候發(fā)現自己被綠了储藐。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俱济。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钙勃,靈堂內的尸體忽然破棺而出蛛碌,到底是詐尸還是另有隱情,我是刑警寧澤辖源,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布蔚携,位于F島的核電站,受9級特大地震影響克饶,放射性物質發(fā)生泄漏酝蜒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一矾湃、第九天 我趴在偏房一處隱蔽的房頂上張望亡脑。 院中可真熱鬧,春花似錦邀跃、人聲如沸霉咨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽途戒。三九已至,卻和暖如春僵驰,著一層夾襖步出監(jiān)牢的瞬間喷斋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工蒜茴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留星爪,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓矮男,卻偏偏與公主長得像移必,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子毡鉴,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內容