[ad_1]
On the final WWDC, Apple launched a brand new API to create interactive animations in iOS 10. On this put up, I wish to present you easy methods to use this new API and construct a brand new sorts of animations, the place the person can pause and scrub the animation and work together with the animated object.
The primary class of this new API is UIViewPropertyAnimator. This class lets you animate views from begin to end as you’d normally do with the outdated UIView animation API. As well as, UIViewPropertyAnimation lets you work together with the animated object and pause and restart the animations. UIViewPropertyAnimator class adopts two protocols: UIViewAnimating and UIViewImplicitlyAnimating. These protocols add further functionalities to the principle class. Let’s begin to use the UIViewPropertyAnimator class and construct a quite simple animation.
Primary Animation
You can see the brand new UIViewPropertyAnimator class very acquainted, because it supplies a solution to construct animations utilizing closures (or blocks) in the identical method you do with the present view animation API.
Let’s launch Xcode 8 and create a brand new venture. Title it Animations. Within the ViewController.swift, let’s add a view programmatically:
|
|
lazy var redView: UIView = { let redView = UIView(body: CGRect(x: 20, y: 20, width: 60, peak: 60)) redView.backgroundColor = UIColor.pink redView.layer.cornerRadius = 30 return redView }()
override func viewDidLoad() { tremendous.viewDidLoad() view.addSubview(redView) }
|
In the identical viewDidLoad technique, let’s add a faucet gesture recognizer to work together later with the animation:
|
|
override func viewDidLoad() { tremendous.viewDidLoad() view.addSubview(redView)
let tapRecognizer = UITapGestureRecognizer(goal: self, motion: #selector(self.handleTap(from:))) view.addGestureRecognizer(tapRecognizer) }
func handleTap(from recognizer: UITapGestureRecognizer) {
}
|
UIViewPropertyAnimator
Now, let’s introduce the brand new UIViewPropertyAnimator class. To create an occasion of the animator, you may use one of many following 5 initializers:
|
|
init(length: TimeInterval, timingParameters parameters: UITimingCurveProvider)
comfort init(length: TimeInterval, curve: UIViewAnimationCurve, animations: (@escaping () -> Void)? = nil)
comfort init(length: TimeInterval, controlPoint1 point1: CGPoint, controlPoint2 point2: CGPoint, animations: (@escaping () -> Void)? = nil)
comfort init(length: TimeInterval, dampingRatio ratio: CGFloat, animations: (@escaping () -> Void)? = nil)
class func runningPropertyAnimator(withDuration length: TimeInterval, delay: TimeInterval, choices: UIViewAnimationOptions = [], animations: @escaping () -> Void, completion: (@escaping (UIViewAnimatingPosition) -> Void)? = nil) -> Self
|
The primary technique is the designated initializer of UIViewPropertyAnimator class. Then, there are three comfort initializers and a static initializer.
For the second, I’m going to make use of the designated initializer. Within the init(length:, timingParameters:) technique, the primary argument is the animation length. The second argument is an object conforming to the UITimingCurveProvider protocol. You would create your customized object. Nonetheless, UIKit supplies you with two courses: UICubicTimingParameters and UISpringTimingParameters. Each courses conform to the UITimingCurveProvider protocol.
Let’s begin with the UICubicTimingParameters. This class lets you outline the timing curve of an animation within the type a Bézier curve. You possibly can outline your personal curve or use the predefined Ease In, Ease Out, Ease InOut and Linear curves (see the UIViewAnimationCurve enumeration). I’m going to outline my animation timing curve. The management factors management the curve beginning in level (0, 0) and ending in level (1, 1). Within the subsequent determine, you’ll be able to see the 2 management factors P1 and P2. Altering their values modifies the curvature of the curve.
So, right here is my animator:
|
|
lazy var animator: UIViewPropertyAnimator = { let cubicParameters = UICubicTimingParameters(controlPoint1: CGPoint(x: 0, y: 0.5), controlPoint2: CGPoint(x: 1.0, y: 0.5)) let animator = UIViewPropertyAnimator(length: 1.0, timingParameters: cubicParameters) animator.isInterruptible = true return animator }()
|
Animation states
The UIViewPropertyAnimator class conforms to the UIViewAnimating protocol. This protocol supplies the states that the animator reaches throughout an animation. These states outline the animator’s conduct. The next determine reveals the animator states and the transitions from a state to a different one.
The inactive state is the preliminary state. When the animator completes an animation, it additionally ends within the inactive state. If you name the startAnimation() or pauseAnimation() technique on the animator, the animator strikes to the lively state. In case you name stopAnimation(_:) on the animator, the animator strikes to the stopped state, when you move false because the enter argument. As a substitute, the animator strikes on to the inactive state, when you move true as argument.
Let’s create the interplay a part of our venture. First, we have to implement the faucet gesture recognizer motion:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
func handleTap(from recognizer: UITapGestureRecognizer) { let touchPoint = recognizer.location(in: view)
swap recognizer.state { case .acknowledged:
if animator.isRunning { animator.stopAnimation(true) }
animator.addAnimations { self.redView.body = CGRect(x: touchPoint.x–30, y: touchPoint.y–30, width: 60, peak: 60) } animator.startAnimation()
default: break } }
|
When the controller’s view acknowledges the faucet gesture, I verify if the animator is within the working state. If the animation is working, then I cease the present animation on the present body (passing true as argument), then I add a brand new animation and begin it.
In the course of the interplay, you may additionally change the timing curve or reverse the animation utilizing the isReverted property outlined within the UIViewAnimating protocol. One other cool function is that you may pause the animation after which name the continueAnimation(withTimingParameters:durationFactor:) technique with new animation parameters.
Interactions
What I actually like about this new API is the chance to pause the animation, transfer the animated view together with your fingers after which, after releasing the view, let the animation proceed.
Let’s add a brand new gesture recognizer to our venture.
|
|
override func viewDidLoad() { tremendous.viewDidLoad() …
let panGesture = UIPanGestureRecognizer(goal: self, motion: #selector(handlePan(from:))) redView.addGestureRecognizer(panGesture) }
|
The motion triggered by the gesture does all of the work.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
|
func handlePan(from recognizer: UIPanGestureRecognizer) {
// Get the place of the finger within the controller’s view let touchPoint = recognizer.location(in: view)
swap recognizer.state {
// When the gesture started, I verify if the animator is working and whether it is, then I cease the animation case .started: if animator.isRunning { animator.stopAnimation(true) }
// Whereas performing the gesture, I modify the colour of the view and make the view following the finger case .modified: redView.middle = touchPoint redView.backgroundColor = UIColor.inexperienced
// If the gesture ends or is cancelled, I add a brand new animation and begin it case .ended, .cancelled: redView.backgroundColor = UIColor.pink animator.addAnimations { self.redView.body = CGRect(x: 20, y: 20, width: 60, peak: 60) } animator.startAnimation()
default: break } }
|
One of these interplay mixed with customized view controller transitions makes your app actually distinctive.
Animation scrubbing
The fractionComplete property outlined within the UIViewAnimating protocol lets you set the progress of a paused animation by passing a worth between 0.0 and 1.0 to your animator. To make use of this property, it’s essential to pause the animation (the animator strikes to the lively state). The worth of this property is 0.0 at first of the animation and 1.0 on the finish of the animation.
Let’s modify the earlier instance. This time I add the pan gesture recognizer to the controller’s view (beforehand, I added to the redView):
|
|
override func viewDidLoad() { tremendous.viewDidLoad() …
let panGesture = UIPanGestureRecognizer(goal: self, motion: #selector(handlePan(from:))) view.addGestureRecognizer(panGesture) }
|
Then, I modify the pan gesture within the following method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
|
func handlePan(from recognizer: UIPanGestureRecognizer) {
// Get the place of the finger within the controller’s view let touchPoint = recognizer.location(in: view)
swap recognizer.state {
// When the gesture started, I verify if the animator is working and whether it is, then I cease the animation case .started: if animator.isRunning { animator.stopAnimation(true) }
// I add a brand new animation and pause it immediatelly animator.addAnimations { self.redView.body = CGRect(x: 200, y: 200, width: 60, peak: 60) } animator.pauseAnimation()
// Whereas performing the gesture, I scrub the animation utilizing the fractionComplete property case .modified: animator.fractionComplete = touchPoint.x / self.view.body.width redView.backgroundColor = UIColor.inexperienced
// If the gesture ends or is cancelled, I cease the present animation and add a brand new one case .ended, .cancelled:
animator.stopAnimation(true) redView.backgroundColor = UIColor.pink
animator.addAnimations { self.redView.body = CGRect(x: 20, y: 20, width: 60, peak: 60) } animator.startAnimation()
default: break } }
|
Conclusions
On this put up, I gave you an outline of the brand new view animation API launched in iOS 10. Attempt to mix these new animations with the customized animation transitions.
Geppy
Geppy Parziale (@geppyp) is cofounder of InvasiveCode. He has developed many iOS functions and taught iOS improvement to many engineers all over the world since 2008. He labored at Apple as iOS and OS X Engineer within the Core Recognition workforce. He has developed a number of iOS and OS X apps and frameworks for Apple, and lots of of his improvement tasks are top-grossing iOS apps which might be featured within the App Retailer. Geppy is an knowledgeable in laptop imaginative and prescient and machine studying.
(Visited 943 occasions, 1 visits at present)
[ad_2]
Source_link