Stroke & Path Animations
Written by Marin Todorov
Heads up... You're reading this book for free, with parts of this chapter shown beyond this point astext.
In this chapter you’ll learn about stroke and path animations as you add a cool pull-to-refresh animation to your existing Pack List project that entertains the user while the app pretends to fetch new data from the Internet:
Along the way, you’ll learn how to animate the drawing of shapes, and as a bonus, you’ll look at a special kind of keyframe animation that you can use to move an object along any arbitrary path.
Creating Interactive Stroke Animations
Open the starter project for this chapter, then build and run it to see how the UI looks:
There’s existing code in ViewController.swift to populate the table for you with a number of vacation items. Pull down the table and you’ll see a refresh view appear at the top of the screen:
The refresh view stays visible for four seconds, then retracts. Your job here is to add an amusing animation to entertain users while they wait.
The refresh view already contains all the code for the pulling and releasing actions; you just need to worry about adding the animations.
Note: The pull down to refresh code is based on one of our video tutorials. If you would like to know more about how it works check out the Scroll View School video series at the following link: https://www.raywenderlich.com/9223-scroll-view-school.
The first step in building your animation is to create a circle shape. Open RefreshView.swift and add the following code to
ovalShapeLayer.strokeColor = UIColor.white.cgColor ovalShapeLayer.fillColor = UIColor.clear.cgColor ovalShapeLayer.lineWidth = 4.0 ovalShapeLayer.lineDashPattern = [2, 3] let refreshRadius = frame.size.height/2 * 0.8 ovalShapeLayer.path = UIBezierPath(ovalIn: CGRect( x: frame.size.width / 2 - refreshRadius, y: frame.size.height / 2 - refreshRadius, width: 2 * refreshRadius, height: 2 * refreshRadius) ).cgPath layer.addSublayer(ovalShapeLayer)
ovalShapeLayer is a property on
RefreshView of type
CAShapeLayer. You’re already quite familiar with shape layers; here you simply set the stroke and fill colors and set the circle diameter to be
80% of the view height, which ensures a comfortable margin around the shape.
There’s one property in the code above that you haven’t encountered yet:
lineDashPattern. This property lets you set a dash pattern for the shape stroke; you simply you provide an array with the length of the dash and the length of the gap in pixels.
Build and run your project to see how the circle looks:
That looks really nice — and it was easy to create. This will serve you well as a circular progress bar.
redrawFromProgress() is called whenever the user scrolls via
scrollViewDidScroll(_ scrollView:); this makes it a convenient place to update the visuals of the progress bar.
Add the following code to
ovalShapeLayer.strokeEnd = progress
As progress increases from
1.0, the stroke end of the shape moves forward towards the starting point of the stroke.
This is how the shape looks when progress is
Here it is halfway around, at
Build and run your project; drag the table view up and down to see the stroke length change.
Now you’ll add a cool-looking airplane to the refresh control.
Scroll back to
init(frame:scrollView:) and add the following code to the bottom of the initializer:
let airplaneImage = UIImage(named: "airplane.png")! airplaneLayer.contents = airplaneImage.cgImage airplaneLayer.bounds = CGRect( x: 0.0, y: 0.0, width: airplaneImage.size.width, height: airplaneImage.size.height) airplaneLayer.position = CGPoint( x: frame.size.width / 2 + frame.size.height / 2 * 0.8, y: frame.size.height / 2) layer.addSublayer(airplaneLayer)
The code should look familiar. You’ve already done this a few times in previous chapters. You simply load airplane.png and assign it as the contents of a layer on the screen, then position the airplane layer at the location where the circle starts drawing.
Build and run your project to see the airplane appear when you pull the table view down:
The plane should fade in as the user pulls the table down.
Add the following code to
airplaneLayer.opacity = 0.0
This makes the airplane completely transparent to start.
Now add the following code to
redrawFromProgress() to progressively change the opacity of the airplane layer as the user pulls down:
airplaneLayer.opacity = Float(progress)
opacity is of type
Float so you need to convert
progress from a
Build and run your project; pull down the table and you should see the airplane appear gradually:
This wraps up the interactive animation part of this chapter. The next section walks you through animating a progress indicator to keep the users engaged while they wait for the faux refreshed data.
Animating Both Stroke Ends
In this section, you’ll animate both the
strokeEnd properties to make the shape “run around”.
let strokeStartAnimation = CABasicAnimation( keyPath: "strokeStart") strokeStartAnimation.fromValue = -0.5 strokeStartAnimation.toValue = 1.0 let strokeEndAnimation = CABasicAnimation( keyPath: "strokeEnd") strokeEndAnimation.fromValue = 0.0 strokeEndAnimation.toValue = 1.0
let strokeAnimationGroup = CAAnimationGroup() strokeAnimationGroup.duration = 1.5 strokeAnimationGroup.repeatDuration = 5.0 strokeAnimationGroup.animations = [strokeStartAnimation, strokeEndAnimation] ovalShapeLayer.add(strokeAnimationGroup, forKey: nil)
Creating Path Keyframe Animations
You saw how to animate a layer using a keyframe animation and the values property in 4, “Keyframe Animations & Struct Properties”. to animate a layer along a path you do much the same thing but you assign a
CGPath to the animation’s path property instead.
let flightAnimation = CAKeyframeAnimation(keyPath: "position") flightAnimation.path = ovalShapeLayer.path flightAnimation.calculationMode = .paced
let flightAnimationGroup = CAAnimationGroup() flightAnimationGroup.duration = 1.5 flightAnimationGroup.repeatDuration = 5.0 flightAnimationGroup.animations = [flightAnimation] airplaneLayer.add(flightAnimationGroup, forKey: nil)
let airplaneOrientationAnimation = CABasicAnimation( keyPath: "transform.rotation") airplaneOrientationAnimation.fromValue = 0 airplaneOrientationAnimation.toValue = 2.0 * .pi
flightAnimationGroup.animations = [ flightAnimation, airplaneOrientationAnimation ]
- You can animate the very process of drawing a shape on screen by animating the
strokeEndproperties of a
- You can animate a layer along a path on screen by using a keyframe animation and animating the layer’s
positionproperty with a given