Animations with UIViewPropertyAnimator – Assume And Construct

With iOS 10 got here a bunch of recent fascinating options, just like the UIViewPropertyAnimator, a model new class that improves animation dealing with.
The view property animator fully modifications the stream that we’re used to, including a finer management over the animations logic.

A easy animation

Let’s see find out how to construct a easy animation to alter the middle property of a view.

let animator = UIViewPropertyAnimator(period: 1.0, curve: .easeOut){
	AView.middle = finalPoint
}
animator.startAnimation()

There are no less than 3 fascinating issues to notice:
1) The animation is outlined by a closure, actually equally to the UIView animation helpers “UIView.animation(period:…)”.
2) An object, the animator, is returned.
3) The animation shouldn’t be began instantly, however is triggered with the startAnimation() operate.

Animation state

The foremost modifications in the best way we animate a component are associated to the truth that with a property animator comes a completely state machine logic. By the UIViewAnimating protocol are applied options to handle the state of the animation in a easy and clear means, applied by capabilities like startAnimation, pauseAnimation and stopAnimation. Calling these capabilities we replace the state worth, making it change between lively, inactive and stopped.

The animation state is lively when the animation is began or paused, it’s inactive when it has been simply initialized and never began or, when it’s accomplished. It’s higher to make clear that there’s a little distinction between inactive and stopped. When the animation completes after a cease instructions or it completes, the state turns into stopped, internally the animators calls the operate finishAnimation(at:) to mark the animation as accomplished, set the state as inactive and ultimately name any completion block (extra on that later).

Animation choices

As you may have most likely observed with the earlier instance, along with the animation block we’ve outlined two parameters: the period of the animation and the animation curve, a UIViewAnimationCurve occasion that may represents the commonest curves (easeIn, easeOut, linear or easeInOut).

In case you wanted extra management over the animation curve you should utilize a customized bezièr curve outlined by 2 management factors.

let animator = UIViewPropertyAnimator(
               period: 1.0, 
               point1: CGPoint(0.1,0.5), 
               point2: CGPoint(0.5, 0.2){

        AView.alpha = 0.0
}

(If the bezier curves will not be sufficient you possibly can even specify a totally customized curve with a UITimigCurveProvider)

One other fascinating choice that you may move to the constructor is the dampingRatio worth. Equally to the UIView animation helpers, you’ll be able to outline a spring impact specifying a damping worth from 0 to 1.

let animator = UIViewPropertyAnimator(
               period: 1.0,
               dampingRatio:0.4){

        AView.middle = CGPoint(x:0, y:0)
}

Delaying the animation is kind of straightforward too, simply name the startAnimation operate with the afterDelay param.

animator.startAnimation(afterDelay:2.5)

Animation Blocks

UIViewPropertyAnimator adopts the UIViewImplicitlyAnimating protocol that gives the animator with another fascinating talents. As instance, you’ll be able to specify a number of animations blocks along with the primary one specified throughout initialization.

// Initialization
let animator = UIViewPropertyAnimator(period: 2.0, curve: .easeOut){
	AView.alpha = 0.0
}
// One other animation block
animator.addAnimation{ 
	Aview.middle = aNewPosition
}
animator.startAnimation()

You can even add animations block to an animation the is already working, the block will likely be instantly executed utilizing the remaining time as period of the brand new animation.

Interacting with the animation stream

As we’ve already acknowledged we are able to simply work together with the animation stream calling startAnimation, stopAnimation and pauseAnimation. The default stream of the animation, from the begin to the tip level, could be modified by the fractionComplete property. This worth signifies the share of completion of the animation with a price that goes from 0.0 to 1.0. You may modify the worth to drive the stream as you like (instance: the consumer would possibly change the fraction in actual time utilizing a slider or a pan gesture).

animator.fractionComplete = slider.worth

In some instances you would possibly wish to carry out actions when the animation completes its working. The addCompletion operate allow you to add a block that will likely be triggered when the animation completes.

animator.addCompletion { (place) in
	print("Animation accomplished")
}

The place is a UIViewAnimatingPosition and it specifies whether or not the animation stopped a its beginning, finish or present place. Usually you’ll obtain the tip worth.

That’s all for this fast information.
I can’t wait to play extra with this new animation system to implement some very nice UI results! I’ll share my experiments on Twitter 😉 Ciao!