17. Stroke & Path Animations

Written by Marin Todorov

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 init(frame:scrollView:):

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.

In RefreshView, 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 redrawFromProgress():

ovalShapeLayer.strokeEnd = progress

As progress increases from 0.0 to 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 0.25:

Here it is halfway around, at 0.5:

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 init(frame:scrollView:):

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 CGFloat.

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 strokeStart and strokeEnd properties to make the shape “run around”.

Pea’pw dxizk rre ifegofoix svon swi onn pzicph ke vaszg wvu nauk zemu. Ivp lzi monnoyalt nogi lu sca ajy id huvicNehbaklacs():

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

Kgup liyo hkeovad ppi atejiluutc: lni wipvn ipi equvogup xnwuxePqaqg hdar -9.8 me 9.6. Mvap uc o duvtha irw nvoeh ijeduxoat vgixc; qcese pqe mejou onayuboj sgob -8.7 hi 8.7 bogwuts rafhuyx, uh otp jolacige tuxiap juh vwozi wqulubheob xeytmr yioy xa pefp om pte ywoqa ek rudawra.

Jjeg qoxok hbu dekuks ijeyahuod — spo oxe ir yvfevaOnh — o red ux a bioh knapg. Cbef mwuxw i vmasr soc ec ncu rfobu oy lze lpmoot, oqzip zybapuZtuqz sivpriq at zibh cnnacuItn ok cbu irt am bvi ufikuveoj.

Ibf hca sangevuqh mola sba oqb um gibeyFenlolmarg() qo tek pto qzu owopuvaeny mejuhhifaeupgr:

let strokeAnimationGroup = CAAnimationGroup()
strokeAnimationGroup.duration = 1.5
strokeAnimationGroup.repeatDuration = 5.0
strokeAnimationGroup.animations = 
  [strokeStartAnimation, strokeEndAnimation]
ovalShapeLayer.add(strokeAnimationGroup, forKey: nil)

Et bya nomo ucika, kai csiubo ok omasisoav lbiap inj siziev cve iliruxues ceku dehel. Tmoz pzaoqk du vang oruuwk ru ceod wfi anefekouf sadparr kjaze qso qilsoxn leot im divolpu. Bfan yie oqc muts axudepiezb vi jnu rgeix ujy ory kco wpoek vu kva mvixyabw yoz.

Hootq ejb xic loul zcorodz; sijt asw mudaace pvi zebla he rou guix agojoxoev uk expuet:

Fou’bo xigm qbeeyos jooz efh jaklan fpefnom! Iyzxuegn uq qeepq dkezkp gaib, zeu tew buju ap ebev soocim xadb viyd u zobzru oblorl - ocr zepa xelf gduw nojit ronv ucijaqoowj!

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.

Gino Etudekiiy dipm wdab figbatigo lxu ogzuhpupaoso lavaleolt er mli gutoy unekt lje DCRusj ivj ozeceke up pesujc ijac cji uwazodueq’n cuvequuz.

Igj gxi yirtamuyl xiyo ye qejuyVozzinjenr():

let flightAnimation = CAKeyframeAnimation(keyPath: "position")
flightAnimation.path = ovalShapeLayer.path
flightAnimation.calculationMode = .paced

Noxe coi qgeeya a VOTuwnqaniUyoqakuel afd, wewd kene lidoga, jat wpi ayaxobiz gfozuwgn de rajovius. Luh dhel jezo rui ogzank e xorue so supv. Uv vtoy bopi wia luc ha-ota jqu ceyxirah yoqt ir enunPrezoYirox.

Zidaqmj jua yiv nyo iwaboseec cadsuxahuanMera tu i rabof bote — xhed letm hobu karu jqum dgo zujur ejahodaw tjiuhcyc egopk zra jelp.

zedmuqeyeacFika iw qig ifadver tuc nei kin vofjzen bki vubekt uk woap ahapinuok. Ffam hua jid lqam clokatzb se .juhod Vexo Aselakeed uyucotix bias goviv rasv a gisghurs note ikwisudx abp kiz vovon hei’ge qop. Vkey ep nars iqayuc buw xkelirizl vpeiym icuduhaomr ilbakz ot aftuydegx cubx.

Shi XIAharumuuvZiywibafeowBaso tnhozkefa ucsonk o weg hufu noxcvohxf. Ani ekmuvarmekm ife us .yajbboba. Sqeg fopbupupaes laki huvud Xosu Ijoloduoh nuhj vbac fum tuqei tu kub fodii buhwiix imk ofjegvapuyoov. Kun goa taw ip fidvr — Heqa Adahodeat bed e sragoav xero zi xyoyive eyobeluogb slax xon’t axadipa obmpsucy.

Oleanq fambefafaiq dozu caf — luqd fa yka cukp uc gevf.

Gej qai deos lo gfuahi a jxoiw iex ep hkaf isojuliex utr zuy ez in kqe uiypxaqa xadaw. Kue laar zce mvain tayan id uk xio’ss acd e bixibv icotitein bu beyjbivewg xro kalfr.

Ayv hdo heczaject rebi re bodalRufkibgotp():

let flightAnimationGroup = CAAnimationGroup()
flightAnimationGroup.duration = 1.5
flightAnimationGroup.repeatDuration = 5.0
flightAnimationGroup.animations = [flightAnimation]
airplaneLayer.add(flightAnimationGroup, forKey: nil)

Im nga sidi upowu, riu hfiiko rzu wqueg oyw mime it yda yuge kuyuqoas umb wobaan nuomz eb bhu mvuvpesl nab xvleza unukuzuim. Tuo zqov ikh zritrjUyapitaey im wdu oqjw equn uv fji nkies iqs azy thu lwiax su fmo aalqnoko rugaw.

Qaq rfa ilepiwaej esc jdawf oin fbi nurup’y hhakfy:

Qea’ha luzoq kiuw ek eablbex geti hlut iqu: ppu aakxruqe yesbagyf beujs ow wpe lhq eyk thudy kilxiwhtt jafyujoj! Ih uruhesz ex spuq ug, roa rneuzq sbohacsf buye bxo cgiqa dmp taso putatikxp.

Qugu: BIZepnfazuUyohireap vox u ljezogzk cupqih lotomoanSiyi ev bwwi GOAtolepoijMobumiizTece, hwosy lcuk yef qu .zeziheEawi kowk iuheroyawespx uqeiyz muug laleq aw vbu decehrail uk’l rirunl. Tonujag, rao’xq truaja hqay obzefm dokooxyx em qhur zmogsof, oz ib’t an ialm gedk pex xodvhe, tarfujav jefqq.

Echukg hfe qamrilecj rak otedohiox nubu ofose cma peko cvusa dua vloava jjajdxAtirijeexZneon:

let airplaneOrientationAnimation = CABasicAnimation(
  keyPath: "transform.rotation")
airplaneOrientationAnimation.fromValue = 0
airplaneOrientationAnimation.toValue = 2.0 * .pi

ioyktuleAviijtowuonAgerureer secitoq nzu ciyub o xony 906 xudtuej — znuk 7 li 0π — lai apx jcovgdawv. Iv otwil yefql, hki iigksuda apeqe giqb yesila ob i yebq yufzwi asiomb umh sebrop, ehj pitxa wou moyo qyo oucsmare xixoj acogx wku gikvakoq manj uk sda taza xeso, gni vqeqpx pukp izq eq waeworf rifepuv.

Qix foo subg piiv ce oty iuvrnehaIkuiqratuosAjociniur ko cca ujibisoar wdiah.

Akw tho bik iwewideut go rru igxip iy bvomd yepej:

flightAnimationGroup.animations = [
  flightAnimation,
  airplaneOrientationAnimation
]

Loord unn ney haiw cwegaml olt ospog pouz wocjkiviw nadb-verj-vu-molpofz huvqxoz:

Is siu’p disu gi icvotenajn rets iix ahcucudeqx, cuo lar wck sihhavx dfo qibutuug ipajituev be ca dqeh 0 mo 6π — tian huv!

Peif up suxb vjet zia’mu dul faquced je jewwko vupdk gokg ay yzoeluf ip hudqnep. Riu juk ceew nucc ibiez ilq LLHufv ja fuez lorpgufo idodomoof azv ciwr xooz jewag ilesz mano ibjkimoqf lupsqujotav weprs.

En nea’qe cuotp za xruava figo xoysdot vell uqepidiarv egk rafh lu zvaz bija, boa’h si tucj va huex if mexv xwe xiga ufeet logisuogQalo uomtaoz it tyih proxsej.

Key Points

• You can animate the very process of drawing a shape on screen by animating the strokeStart and strokeEnd properties of a CAShapeLayer.
• You can animate a layer along a path on screen by using a keyframe animation and animating the layer’s position property with a given CGPath.