UIView Animation Curves

In post about CAMediaTimingFunction, we had a look at the curves available to UIView animations where we created an extension for CAMediaTimingFunction.

extension CAMediaTimingFunction {
    ...
    // custom
    static let easeInSine = CAMediaTimingFunction(controlPoints: 0.47, 0, 0.745, 0.715)
    static let easeOutSine = CAMediaTimingFunction(controlPoints: 0.39, 0.575, 0.565, 1)
    static let easeInOutSine = CAMediaTimingFunction(controlPoints: 0.445, 0.05, 0.55, 0.95)
    static let easeInQuad = CAMediaTimingFunction(controlPoints: 0.55, 0.085, 0.68, 0.53)
    ...
}

I’m going to share how you can use custom animation curves on UIView. By way of example, we add custom animation for change contentoffset in UIScrollView.

CATransaction.begin()
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction.easeOutSine)
CATransaction.setCompletionBlock(compliteAnimation)
UIView.animate(withDuration: 4) {
    self.scrollView.setContentOffset(CGPoint(x: position, y: 0), animated: false)
}
CATransaction.commit()

The above code will override the UIView animation curve with our custom curve.

If you start discussing animation techniques with a designer, just a word of caution. Avoid using the term Ease In Out. As mentioned, Apple uses the term for Ease In + Ease Out.

I hope this article helped you