【iOS】Spring Animations (彈性動畫)

  This interface shows how a spring animation can be created by specifying a 「damping」 (bounciness) and 「response」 (speed).spring

  這個交互顯示瞭如何經過指定「阻尼」(有彈性)和「響應」(速度)來建立spring動畫。app

  

  Key Features(關鍵特性)

  1. Uses 「design-friendly」 parameters.(使用友好的參數)。
  2. No concept of animation duration.(沒有動畫持續時間的概念)。
  3. Easily interruptible.(容易中斷)。

  Design Theory(設計理論)

  Springs make great animation models because of their speed and natural appearance. A spring animation starts incredibly quickly, spending most of its time gradually approaching its final state. This is perfect for creating interfaces that feel responsive—they spring to life!動畫

  彈性能夠實現很好的動畫模型,由於它們的速度和天然的外觀。彈性動畫的啓動速度很是快,大部分時間都在逐漸接近其最終狀態。這對於建立感受有響應的界面來講是很是完美的。ui

  A few additional reminders when designing spring animations:this

  設計spring動畫時的一些額外提示:spa

  1. Springs don’t have to be springy. Using a damping value of 1 will create an animation that slowly comes to rest without any bounciness. Most animations should use a damping value of 1. 譯:彈簧不必定有彈性。使用阻尼值1將建立一個動畫,它會慢慢地中止,沒有任何彈性,大多數動畫應該使用阻尼值1.
  2. Try to avoid thinking about duration. In theory, a spring never fully comes to rest, and forcing a duration on the spring can cause it to feel unnatural. Instead, play with the damping and response values until it feels right. 譯:儘可能避免考慮持續時間。從理論上講,彈簧永遠不會徹底靜止,強迫彈簧持續一段時間會讓它感到不天然。相反,使用阻尼和響應值,直到感受正確爲止。設計

  3. Interruption is critical. Because springs spend so much of their time close to their final value, users may think the animation has completed and will try to interact with it again.中斷是相當重要的,由於彈性花費了如此多的時間來接近它們的最終價值,用戶可能認爲動畫已經完成,並將再次嘗試與它交互。rest

   Critical Code(關鍵代碼)

  In UIKit, we can create a spring animation with a UIViewPropertyAnimatorand a UISpringTimingParameters object. Unfortunately, there is no initializer that just takes a damping and response. The closest we can get is the UISpringTimingParameters initializer that takes a mass, stiffness, damping, and initial velocity.code

  在UIKit中,咱們能夠用UIViewPropertyAnimator和UISpringTimingParameters對象建立一個spring動畫。不幸的是,沒有一個初始化器只接受阻尼和響應。咱們能獲得的最接近的值是UISpringTimingParameters初始化器,它具備質量、剛度、阻尼和初始速度。對象

UISpringTimingParameters(mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity: CGVector)

  We would like to create a convenience initializer that takes a damping and response, and maps it to the required mass, stiffness, and damping.

  咱們但願建立一個方便的初始化器,它接受阻尼和響應,並將其映射到所需的質量、剛度和阻尼。
  With a little bit of physics, we can derive the equations we need:

  有了一點物理學知識,咱們就能夠推導出咱們須要的方程:

 

  With this result, we can create our own UISpringTimingParameters with exactly the parameters we desire.

  有了這個結果,咱們就能夠建立咱們本身的UISpringTimingParameters,這些參數正是咱們想要的。

extension UISpringTimingParameters {
    convenience init(damping: CGFloat, response: CGFloat, initialVelocity: CGVector = .zero) {
        let stiffness = pow(2 * .pi / response, 2)
        let damp = 4 * .pi * damping / response
        self.init(mass: 1, stiffness: stiffness, damping: damp, initialVelocity: initialVelocity)
    }
}
相關文章
相關標籤/搜索