Quick guide: Animating with Uiviewpropertyanimator

Translated from: QUICK guide:animations with Uiviewpropertyanimator
Translator: Haley_wong

IOS 10 brings a whole bunch of interesting new features, like Uiviewpropertyanimator, which is a new class that improves animation processing.
This view property animation completely overturns the process we've been accustomed to, adding finer control to the animation logic.

A simple animation

Let's take a look at how to change the center point properties of a view through a simple animation.

1.0.easeOut){    AView.center = finalPoint}animator.startAnimation()

There are at least 3 points to note:
1) This animation is defined by closures, similar to UIView's animated Class "Uiview.animation (Duration: ...)".
2) Returns an object, which is the creator of the animation.
3) This animation is not started at once, but is startAnimation() triggered by a method.

Animation status

The main change in how we animate an element is related to the fact that a property animator contains a complete set of state machine logic. The UIViewAnimating functions implemented by the Protocol manage the state of the animation in a straightforward way, and these states are startAnimation implemented through, pauseAnimation and stopAnimation functions. Call these methods and we can update the value of the state so that it can be active inactive stopped converted between, and.

When the animation starts or pauses, the state of the animation is, 活跃状态 when the animation has been initialized but not yet started or the animation is finished, it is 非活跃状态 . It is important to note 活跃状态 that 停止态 there is a little difference between and. When the animation is completed due to a stop command, or if it is really finished, the state becomes 停止态 , and the inside of the animator calls the method finishAnimation(at:) to mark the completion of the animation, sets the state to 非活跃状态 , and finally calls the completed block of code.

Optional options for animations

Perhaps you have noticed in the previous example that, next to the animated block, we have defined two parameters: the duration of the animation and the curve of the animation, a Uiviewanimationcurve instance that represents the most common curve (easein,easeout, Linear or easeinout).

If you need more control over the animation cancellation, you can use a Bezier curve defined by two control points.

let animator = UIViewPropertyAnimator(               1.0,                CGPoint(0.1,0.5),                CGPoint(0.50.2){        AView.alpha0.0}

(If a Bezier curve is still not enough, you can even use Uitimigcurveprovider to specify a fully customized curve)

Another interesting parameter that can be passed to the constructor is the damping coefficient value. The usage is similar to the UIView animation method, you can define the spring effect, the damping coefficient of the value range is 0 to 1.

let= UIViewPropertyAnimator(               duration1.0,               dampingRatio:0.4){        AView.= CGPoint(x:0, y:0)}

The execution of the deferred animation is also very simple, just call afterDelay the method with the parameter startAnimation .

animator.startAnimation(afterDelay:2.5)

Block of animation

UIViewPropertyAnimatorIt is a protocol that provides a lot of interesting capabilities to the animator UIViewImplicitlyAnimating . For example, you can specify multiple animation blocks in addition to the block specified at initialization time.

2.0.easeOut){    AView.alpha0.0}// Another animation blockanimator.addAnimation{     Aview.center = aNewPosition}animator.startAnimation()

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

Interacting with animation streams

As we have already mentioned, we can startAnimation pauseAnimation interact with the animation flow by invoking, and stopAnimation easily. The default stream of the animation, from the starting point to the end point, can be changed through the fractionComplete property. This value represents the percentage of animation completion, with values ranging from 0 to 1. You can modify this value to drive the flow as you would expect (for example, the user might modify it in real time with a slider or swipe gesture fraction ).

animator.fractionComplete = slider.value

In some cases, you might want to perform some action when the animation finishes running. addCompletionmethod allows you to add a block of code (which will be triggered when the animation is completed).

in    print("Animation completed")}

positionA parameter is a UIViewAnimatingPosition type of value that has three enumeration values that represent whether the animation stops at the beginning of the stop, after the end, or at the current position. Usually you will receive an end enumeration value.
(Translator Note: UIViewAnimatingPosition the three enumeration values are end , start ,, respectively current )

That's all for this quick guide.
I can't wait to use this new animation system to implement some cool UI effects. I will share my experience on my twitter!

Quick guide: Animating with Uiviewpropertyanimator