iOS 動(dòng)畫之彈性 Spring

在之前的視圖屬性動(dòng)畫文章中,首先是提供視圖的一個(gè)初始狀態(tài),然后在動(dòng)畫塊中更改視圖的一些屬性,使其變?yōu)槲覀兿胍慕K極狀態(tài),并且提供動(dòng)畫時(shí)長(zhǎng)等其他一些參數(shù),最后 UIKit 自動(dòng)為我們生成相應(yīng)的動(dòng)畫。

之前的視圖移動(dòng)都是比較簡(jiǎn)單的,朝著某個(gè)方向,從一個(gè)點(diǎn)到另一個(gè)點(diǎn)。在生活中,當(dāng)把一個(gè)物體附著在彈簧上時(shí),物體的運(yùn)動(dòng)是一種比較復(fù)雜的彈性運(yùn)動(dòng)。UIView 提供了一個(gè)動(dòng)畫方法,其時(shí)間對(duì)應(yīng)于物理彈簧的運(yùn)動(dòng)曲線。具體可以看下圖:

timeCure.png

默認(rèn)的動(dòng)畫曲線是比較平滑的,Spring 動(dòng)畫的曲線是開始的快,結(jié)束的慢。

舉個(gè)例子,從點(diǎn) A 到點(diǎn) B,如果使用上篇文章中動(dòng)畫方法,那么是平滑的從 A 移動(dòng)到 B。假若我們這次給動(dòng)畫添加一點(diǎn) Spring 的效果,那么動(dòng)畫的表現(xiàn)將是 View 在點(diǎn) B 做一會(huì)振蕩,最終又回到 B 點(diǎn)。就好像在 B 點(diǎn)有一根彈簧牽扯住了 view。

下面直接上 API:

    [UIView animateWithDuration:NSTimeInterval)duration
                          delay:NSTimeInterval)delay
         usingSpringWithDamping:(CGFloat)dampingRatio
          initialSpringVelocity:(CGFloat)velocity
                        options:(UIViewAnimationOptions)options
                     animations:^{
                         <#code#>
                     }
                     completion:^(BOOL finished) {
                         <#code#>
                     }
     ];

Duration、delay、animations 以及 completion 參數(shù)與之前方法的并無兩樣。主要介紹下這兩個(gè)參數(shù):

  • dampingRatio:阻尼系數(shù),范圍為 0.0 ~ 1.0,數(shù)值越小,彈簧振動(dòng)的越厲害,Spring 的效果越明顯,效果對(duì)比可以看下圖:
dampingRatio.gif
  • velocity:表示速度,數(shù)值越大移動(dòng)的越快。值為 1.0 時(shí),這個(gè)速度為 1 秒鐘之內(nèi)走完整個(gè)動(dòng)畫距離的速度。更大或更小的值會(huì)讓 view 剛到達(dá)終點(diǎn)時(shí)的速度更大或更小。上圖更直接:
initalVelocity.gif

具體的使用還是需要實(shí)際寫一些代碼來感受。

iOS 系統(tǒng)中大量使用了 Spring 動(dòng)畫,Spring 動(dòng)畫不僅可以對(duì)視圖的 size 等位置屬性做動(dòng)畫,還可以應(yīng)用于 UIView 的其他動(dòng)畫屬性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,991評(píng)論 19 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,523評(píng)論 25 708
  • 動(dòng)畫的繼承結(jié)構(gòu) CAAnimation{CAPropertyAnimation{CABasicAnimation{...
    早起的蟲兒子被鳥吃閱讀 907評(píng)論 0 1
  • 西貝賣的是莜面嗎? No No No 賈總賣的是一種生活方式,背后是綠色、健康…… 大董賣的是烤鴨嗎? No No...
    恢恢_小慧閱讀 310評(píng)論 0 0
  • 是時(shí)候做個(gè)決定了 在一段關(guān)系里,若是只能感受到痛苦,只能,那這關(guān)系就應(yīng)該斷掉了。 這么長(zhǎng)時(shí)間以來,我以為我們有進(jìn)步...
    小倩和Flora閱讀 203評(píng)論 0 0