QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR

Translator: Haley_Wong

IOS 10 brings a bunch of interesting new features, like UIViewPropertyAnimator, a brand new class that improves animation handling. This view property animation completely reverses the flow we’ve been used to, adding more fine-grained control to the animation logic.

A simple animation

Let’s look at how to change the view’s center point properties with a simple animation.

letAnimator = UIViewPropertyAnimator(Duration: 1.0, curve:.easeout){aview.center = finalPoint} animator.startAnimation()Copy the code

There are at least three points to note:

  1. This animation is defined by a closure, much like UIView’s animation class “uiView.animation (Duration:…) “.
  2. Returns an object, the creator of the animation.
  3. The animation does not begin immediately, but throughstartAnimation()Method.

The animation state

The main change in the way we animate an element has to do with the fact that a property animator contains a whole set of state machine logic. The functions implemented through UIViewAnimating protocol manage the state of the animation in a straightforward manner, and these states are implemented through startAnimation, pauseAnimation, and stopAnimation functions. By calling these methods we can update the value of the state to convert between active,inactive, and stopped.

When an animation starts or pauses, the animation is active. An animation is inactive when it has been initialized but has not started or completed. It’s important to note that there’s a little bit of a difference between the active state and the stopped state. When the animation is completed by a stop command or is actually completed, the state becomes stopped and the method finishAnimation(at:) is called inside the animator to mark completion of the animation, setting the state to inactive, and finally calling the completed code block.

Animation is optional

As you may have noticed in the previous example, next to the animation block, we define two parameters: the duration of the animation and the animation’s curve, an instance of UIViewAnimationCurve, which represents the most common curves (easeIn, easeOut, Linear or easeInOut).

If you need more control over animation cancellation, you can use bezier curves defined by two control points.

letAnimator = UIViewPropertyAnimator(Duration: 1.0, point1: CGPoint(0.1,0.5), point2: CGPoint(0.5, 0.2){aview.alpha = 0.0}Copy the code

(If a Bessel curve is not enough, you can even specify a completely custom curve using UITimigCurveProvider.)

Another interesting parameter that can be passed to the constructor is the damping coefficient value. Just like the animation method on UIView, you can define the spring effect, and the damping coefficient is between 0 and 1.

letAnimator = UIViewPropertyAnimator(duration: 1.0, dampingRatio:0.4){aview. center = CGPoint(x:0, y:0)}Copy the code

Delaying the animation is also very easy, just call the startAnimation method with the afterDelay parameter.

Animator. StartAnimation (afterDelay: 2.5)Copy the code

The animation block

UIViewPropertyAnimator USES is able to provide a lot of interesting animation editor UIViewImplicitlyAnimating agreement. For example, you can specify multiple animation blocks in addition to those specified at initialization.

// Initialization
letAnimator = UIViewPropertyAnimator(Duration: 2.0, curve: .easeOut){aview.alpha = 0.0} // Another Animation block animator.addAnimation{aview.center = aNewPosition} animator.startAnimation()Copy the code

You can also add an animation block to an already running animation that will be executed immediately using the remaining time as the duration of the new animation.

Interact with the animation stream

As we already mentioned, we can easily interact with the animation flow by calling startAnimation, pauseAnimation, and stopAnimation. The default flow of the animation (from start to finish) can be changed via the fractionComplete property. This value represents the percentage of animation completion and ranges from 0 to 1. You can modify this value to drive the stream as you expect (for example, a user might modify the fraction in real time with a slider or swipe gesture).

animator.fractionComplete = slider.value
Copy the code

In some cases, you may want to do something when the animation is finished. The addCompletion method lets you add a block of code that will be triggered when the animation completes.

animator.addCompletion { (position) in
    print("Animation completed")}Copy the code

The position argument is a UIViewAnimatingPosition value with three enumerated values that represent whether the animation stops at the beginning, after, or at the current position. Usually you will receive the enumeration value at the end. UIViewAnimatingPosition has three enumerations: end, Start,current.

That’s it for this quick guide.

I can’t wait to implement some cool UI effects with this new animation system.