【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)
    }
}
相关文章
相关标签/搜索