iOS 8 Spring Animation

from:http://www.tuicool.com/articles/ZR7nYv

Spring Animation 簡介

Spring Animation 本質上是一種特殊的動畫曲線,自從 iOS 7 開始被廣泛應用在系統動畫中。下圖中演示的自帶的動畫效果實際上都使用了 Spring Animation:

0-example-20-example-1

事實上,從 iOS 7 起幾乎所有的系統動畫都用的是 Spring Animation,包括 App 文件夾打開/關閉效果、鍵盤彈出效果、UISwitch 控件的開關效果、不同 View Controller 之間的 Push 動畫、Modal 出現和消失的動畫、Siri 的出現和消失動畫,等等。下圖爲 Spring Animation 和普通的動畫的運動曲線的對比:

cmp

爲了更加直觀,我做了一個演示項目,從左至右分別列出了 Spring Animation, Ease-Out Animation 和 Linear Animation 的動畫效果:

spring-1

可以看到,和系統自帶的 ease-out 效果相比,Spring Animation 前期速度增加得更快,在動畫時間一定的前提下,給人感覺更加快速、乾淨。

API

自 iOS 8 開始,Apple 公開了 Spring Animation 的 API,開發者也可以使用簡單的代碼創建這類動畫效果了:

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
     usingSpringWithDamping:(CGFloat)dampingRatio
      initialSpringVelocity:(CGFloat)velocity
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion

該方法是 UIView 的類方法。

Spring Animation 的 API 和一般動畫相比多了兩個參數,分別是usingSpringWithDamping 和 initialSpringVelocity 。

dumping ratio

usingSpringWithDamping 的範圍爲 0.0f 到 1.0f ,數值越小「彈簧」的振動效果越明顯。下圖演示了在 initialSpringVelocity 爲 0.0f 的情況下,usingSpringWithDamping 分別取 0.2f , 0.5f 和 1.0f 的情況。

spring-2

initial velocity

initialSpringVelocity 則表示初始的速度,數值越大一開始移動越快。下圖演示了在 usingSpringWithDamping 爲 1.0f 時,initialSpringVelocity 分別取 5.0f , 15.0f 和 25.0f 的情況。值得注意的是,初始速度取值較高而時間較短時,也會出現反彈情況。

spring-3

使用

Spring Animation 是線性動畫或 ease-out 動畫的理想替代品。由於 iOS 本身大量使用的就是 Spring Animation,用戶已經習慣了這種動畫效果,因此使用它能使 App 讓人感覺更加自然,用 Apple 的話說就是「instantly familiar」。此外,Spring Animation 不只能對位置使用,它適用於所有可被添加動畫效果的屬性。

發佈了11 篇原創文章 · 獲贊 5 · 訪問量 144萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章