Swift World: UIViewPropertyAnimator Exploration Part 3

Peng

Follow

Feb 25, 2017 · 3 min read

As we mentioned in part 2, we will talk about timing curves in this part. Let’s back to the old days first. In block-based animation for UIView, there is option to set time curve like EaseInOut, EaseIn, EaseOut and Linear. Time curve, time function or easing function means a function which defines the rate of changing in animation. For example Talk is cheap, show me the animation.

And show me the code.

UIView.animate(withDuration: 4.0, delay: 0, options: [.curveEaseInOut], animations: {
            redRect.center.x = 300
        }, completion: nil)

The option .curveEaseInOut shows the timing curve option in the animation.

For CAAnimation, the corresponding property is timingFunction which is a CAMediaTimingFunction. To get same easeInOut effect, the code would be as the following.

let animation = CABasicAnimation()
animation.keyPath = "position.x"
animation.fromValue = redRect.center.x
animation.toValue = 300
animation.duration = 4
animation.timingFunction = CAMediaTimingFunction(name:
kCAMediaTimingFunctionEaseInEaseOut)
redRect.layer.add(animation, forKey: "EaseInOut")

When it comes to UIViewPropertyAnimator, we can also set a curve simply when creating an instance.

let animator = UIViewPropertyAnimator(duration: 4.0, curve: .easeInOut) {
    redRect.center.x = 300
}

You can change the value to easeInOut, easeIn, easeOut or linear to get different effects.

UIViewProperty also gives other methods to define timing curve.

1. Provide two control point to define cubic Bézier timing curve.

let animator = UIViewPropertyAnimator(duration: 4.0, controlPoint1: CGPoint(x: 0.17, y: 0.52), controlPoint2: CGPoint(x: 0.83, y: 0.67)) {
    redRect.center.x = 300
}

1. Provide dampingRatio value to define spring-based timing curve.

let animator = UIViewPropertyAnimator(duration: 4.0, dampingRatio: 0.5) {
    redRect.center.x = 300
}

1. Provide an UITimingCurveProvider to define the cubic curve

let cubicTimingParameters: UITimingCurveProvider = UICubicTimingParameters(controlPoint1: CGPoint(x: 0.0, y: 1.0), controlPoint2: CGPoint(x: 1.0, y: 0.0))let animator = UIViewPropertyAnimator(duration: 4.0, timingParameters: cubicTimingParameters)animator.addAnimations {
    redRect.center.x = 300
}
animator.startAnimation()

1. Provide an UITimingCurveProvider to define the spring timing

let springTimingParameters: UITimingCurveProvider = UISpringTimingParameters(dampingRatio: 0.5,initialVelocity: CGVector(dx:1.0, dy: 0.0))let animator = UIViewPropertyAnimator(duration: 4.0, timingParameters: springTimingParameters)animator.addAnimations {
    redRect.center.x = 300
}
animator.startAnimation()

In next part, we will introduce a third-party framework [Dance}(https://github.com/saoudrizwan/Dance) which is “ a powerful and straightforward animation framework built upon the new UIViewPropertyAnimator class ”.