Custom animation: easing out

Question

I have successfully created a custom animation in a drawing in a UIView by using a repeating Timer to increment the alpha of the drawing every few milliseconds.

Now, I want to achieve an easing out animation (deceleration) with my drawing. I would like to do this by firing a new timer with a longer interval every time the Timer is called, so that the alpha increments slower, resulting in deceleration.

I know that there is an easeOut animation from CAMediaTiming, but I would like to know if there is any built in function to get the decelerating numbers. For example, if I pass in a constant of 10, every time I call the function I can get decelerating numbers like 15, 18, 20, 21, 21.5, etc.

Swift and Cocoa Touch have built-in methods for animating like this. You don’t need to use a timer at all. I will post an answer soon. In the meantime, can you share the code you have tried? — Chris, Jul 04 '18 at 19:12

score 8 · Answer 1 · answered Jul 04 '18 at 19:24

There is a built-in way to use various sorts of animation curves in standard UIView animations.

var yourView = UIView() // Or whatever your view might be

var yourView.alpha = 0 // Initial alpha value

// Call the animation method. Note options (which can be an array) which applies an ease-out curve to the animation
UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseOut, animations: {
    yourView.alpha = 1.0 // Final value of alpha
}, completion: nil)

Other animation curves are available, such as .curveEaseIn and .curveEaseInOut as well as other options. You can read more about animation options here.

You can use the completion handler closure to chain animations too.

If you are insisting on implementing your own means of animation using a timer (which I would not recommend), post some code so that I can consider a way to apply a curve to the changing values.

Custom animation: easing out

1 Answers1