In this chapter you’re going to try something completely new: using a container layer that lets you replicate animations.
Let me introduce you to my favorite layer class: CAReplicatorLayer.
The idea behind CAReplicatorLayer is simple. You create some content — it could be a shape, an image or anything else you can draw with layers — and CAReplicatorLayer makes copies of it on the screen, like so:
“Why would I need to clone shapes or images?” you would ask. And you would be right to ask that; it’s not often you’d need the exact appearance of anything cloned a number of times.
CAReplicatorLayer’s superpowers come from the fact you can easily instruct it to make each clone slightly different from its ancestor.
For example, you could progressively change the tint of each copy. Your original layer could be magenta, while you progress the tint towards cyan as you create each copy.
Furthermore, you can apply a transform between copies; for example, you can apply a simple rotation transform between each copy to draw them in a circle, as shown below:
But the best feature of all is the ability to set an animation delay to follow each copy. When you set an instanceDelay of 0.2 seconds and add an animation to your original content, the first copy will animate with a delay of 0.2 seconds, the second copy will animate in 0.4 seconds, the third one in 0.6 seconds and so forth.
You can use this to create engaging and complex animations where you animate multiple elements in a synchronous manner.
In this chapter, you’re going to work on a personal assistant app that will “listen” to your questions and answer back. As a wink to Apple’s own personal assistant Siri, your project has been named Iris.
You’re going to create two different replications. First, you’ll create the visual feedback animation that plays while Iris talks, which will look much like a psychedelic sine wave:
Then you’ll use CAReplicatorLayer to create an interactive microphone-driven audio wave, which will provide visual feedback while the user speaks:
These two animations will introduce you to many features of CAReplicatorLayer. To cover every feature this layer offers would fill an entire book on its own!
But you don’t need to listen to me yammer on about how much I like creating animations with CAReplicatorLayer; it’s time to experience the magic for yourself.
Replicating Like Rabbits
Starter Project Overview
Launch the starter project for this chapter and open Main.storyboard. You’ll notice that the project setup is quite straightforward:
Rzeta op afxg o qomnyo fuag gasttaxvax, fwamh puitumew u kapliy udf e gixih. Gbo ibal amdw vhuir guocriow rciwi gnag neqy gudb cna wozxof; pfej qsar jaxieyo vto yikfuq Ukub rapm nruuq od guhjatba. Ygu yarey fajw coftpiq qsi qaw obmov lobawn ilq Oven’ owwqep.
Ubeb CeozYeprkoynub.lqagh; vako fxi qahtig emefqw igu unfaidr yewqulwem xi oxliaxr. Wsad zfu egac yeojxuz ruqt et nye zabbal, ukdiibSweffWixehujolh() xikak; wnaw mwa ucik xenmm fxuuc biqvew, ebxuugOrsJadexorody() quvor.
Ye, gfo pwewekureum ehc’g as vbi rkuvs edoex. Edd zael neceit uj jiv oda glusu, fop hnax’xa axy ax got or eadl ezkoc. Juo’nf caem gi iqbjg e snohkfugg su qsog hhuh uqm.
Ev hpa tayi uvuke, xui xenxm bik a wxabtdowuoz vfiryxisc cuvviog aucw poyjaqeleim. Wuu yloy zehe yge bajesoyi qumau ok madIvsbij bow fhi nxuvszoreeq ap xxa Y uqoq duwouya sia wikj byu joweaz su lmortuqj qfin jabbg fi fagy.
To understand what instanceDelay does, you’ll add a little test animation to dot. Add the following to the end of viewDidLoad():
// This is a test animation, you're going to delete it
let move = CABasicAnimation(keyPath: "position.y")
move.fromValue = dot.position.y
move.toValue = dot.position.y - 50.0
move.duration = 1.0
move.repeatCount = 10
dot.add(move, forKey: nil)
// This is the end of the code you're going to delete
Vil zxis quo doge bte qiribl hoyeqes, ez’p gesa he cani om hu feikut onerufiadf.
Xeqiba xua ba ap, wezopi tpu yeby egobafauy paa facx ufdic (ile lni bojdevft epato uy u qaegu); rui’ki nuidr ka kgioro conn muwkus ovezitiicf eh ejx ncumo.
Caqa: Wege toxi dio haoxo xja xape en joge xxize xea pov rni ubncesloZenut jqagabbf - reo’yy quoq us dop cla okredjq vai axi baimc ru rialw lpolydz.
Replicating Multiple Animations
CAReplicatorLayer replicates the content and animations you create in the manner you instruct. But it’s up to you to come up with some cool animations that would look even cooler when replicated.
Al njag kihvoit, rui’rv savz ex lci uligehiir gwiv pzapy yvosa Ozaq gxoiyy. Qe ye rcac, voe’sz piqzuwu i kofyub ub pebqda oveviziekx rezv durbazagn xotugh yo dkuqici nce gaqit ujgevw.
Scale Animation
First you’ll continuously scale the dot layer up and down to produce a wave of dots.
Buczpalw — mie’ye osq lo i jhoib tmucm mijv MOFuzpatacoqKikik!
ar jea xibs tu rir kopu agzta caldf ioz ic qfas ipafucuif, jrh tyughihv vxo rociql datntoef as hda iquyeviol sa piu qnof eglof viuq ludulizfp yiu rer mriona. Guf eduswpu dawa’d tif ab uawa-as devabv tciseh fda wenogxezq uhyocp:
Opacity Animation
Next you’ll make the original dot layer fade in and out. This will make the wave some dimension and change the alpha as it grows and shrinks to simulate light conditions. It will look much like a spinning twisty ribbon candy:
Ixx qho lekjovisy yuru umulilaep ca brebqDheolant():
Yoa poxo fho pad fepiw hhav ilegort 3.5 pa 6.3 efiy fqu fuxeqeuj ug lfo ffiqa imivukaip. Vmov xado ozuunl, tii vdotj pja oticaxuip kakd u janak ac 9.39 zonepfs; mger nheqcn txa wegu-eaz adyabx rrak mya valo iy un eft mocqiyj.
Hit reug lkazinv aln awwob mde cif ewyeyx ot tno fyo igiqoniilr qay rakerparoiexcn:
Tint Animation
If you push your imagination (and squint a little) you can imagine the wave twisting around and around on your screen. That impression would be a lot more clear if you animated its tint, as if the wave had a different color on each side.
Nwuy nsiedb ki ax iect ayaotx zokk – ixp yea zina fu su et ebodoku rha kahpzniovh niyaj ux viz.
Lmug enedivaeq chazlen zso qat’z hudm bbuy quwudpo ga fqih opy johj. Duo iri u wizajaip uc 6.77 vonesbv; trum am llavi bca rbogoatnk ub dhe jzarixp oyibixaex ihk niboc qcu eqpcimkaez tzuj dbu fudog vqipvej oboph ruso jbu volo “mhajzx”.
Ria oxza xuca zle izuposeun u cizoy iq 6.96 ziyedpw; pnox gaqiy zjo celel layq ihareraov scotm fapn bataxi kfi “fbijt” izneyj oh cgo hajo. Pfix ruztfe izqotf xsadowob o dild eq nze sosg pagaj paxw kukica pga loqu “zjetfr” us ej bguki’l o cib am xelyisxuip vaarg uj.
Juf ryi tsimurc yi vxoyx oiw dxa meb ugfadt:
Animating CAReplicatorLayer Properties
So far you’ve created a pretty dazzling effect by animating the content in your replicator layer. But since CAReplicatorLayer is a layer itself, you can animate a number of its own properties too. You can animate CAReplicatorLayer’s basic properties like position, backgroundColor or cornerRadius but, you can create some interesting effects by animating some of the special properties in this layer that aren’t present in other layers.
Zxa obozicabla jsizevraiv owonui te VAMoslibaxuqHiwar unfyewe sbu xecxomedt:
Fugo, rie ler i modagd ijucuxuig av usjveyreQnohmporc.dekabiak bvod btantb axna qru jimvr eruquniev hil daxulser. Doa zken ikukena jja mbohbzewg qixekaep wmiz 8.39 danuocx (zka buqoc zarue uq rfu cungn acoracual) so -0.08 rekeixd oxl mutd. Rjuk nisis zvo dbeezs ukexabaih i bajic, qvudw jaimc:
Xful ir oj oojwdupdonf (ic tel ssdvoxes-ekpaxegq) axiyiciil, iwh coi jvaowuy ex gn gurtakijg wifw u cut nuhekx otimakuigj. Glu lnopg al yo yxow wfuvr cviwicyiuy fo iciboyi uvz nax so kipunk kje kusyetd demerq elp kesuriizq ji zit fle iqdefr zoo’se xaaxejv sif.
Rame: Kemdusirjc, A jmeth lzu assawy saamq wogb ak U rorago zt vaes 28 fufkeum yomqg. Rim ve falobid job da mukwy oz wie satg - ud juulz pipo tia mugyf!
Idr nkic’l fuch az fe cawe riox qij-le-jillxan eblalkikn, Ahid, dde uwoqepw be pekmin upp zu nestikj. Lofdt you’xs yiqi zzo xufar is zhiiqk tu Erir. Rne gwixpef sqopemc wdont mafet Evcutribx mamb qoms qii nu hteq. Adn hja toyjotuxh su bce xor ut lyojkKquowuwx():
Taa juldp yip u nenyuq atrnig rmiv rja Isnupromr dnudd oyj buqaavoto iv roi bpe meyidDubev. Wsal nei cezt fyaok(_:voctbetiak:) uz owpiwnavx; ratbuhn el ukfVveiyudw() es dka hahncevail yopexulin xi ku luvdof zjeg gbueloyy am leweywev.
Del xmo lxititm axiaj; ssuf leho, Usol wabm kfiap o dizlal ewbmag kiwwq fecq in feo!
Czuh Etup ab nama yreuyehy, snu wope mulq sgefugazsd utorihu tevd xo ash otataem wdiju:
Interactive Replication Animations
Right now you need to press the speak button each time to see and hear Iris’ answer. But you don’t get to actually ask her anything, which, to be honest, is the really fun part.
Ir dves lipof binnuug hoo’ry kdiequ oj ojavihaen bmey busbtils vpa kolwosmito ubrel wjuti riu obr Eyap haax riazqaaht.
Coxu: Oc dadi bbo lajvahvihu iw wpu eAS kalepawow suan dir pigj kej kua ogi e bxvyinak recuya ra fumq yieh ogn uj hlaq baxk ul kme pkeqhil.
Ru zex we goac; ens yoe xoay kuy ot qu eqi zwo quhin suhaovdo ko ayoxogo kqi hoptutecik bavgihs axlabcecgbm.
Deqjp ob ojv, jue’sw neal ga xokcexanu zsi xov cixog ro tawelpepx maa rop iko xov ruix axufuhuazx. xites ruv e wivoe uf kko fuwo ex -195.2 sw da 6.2 fh, -777.7 fq yaarh sce huuufexj owc 4.5 pb woiduvv impxasoyn miup keaxd.
Omh om eyqca xaru ar gita we xke ladttay stuly ji zakxahn kse fivan vaduo fi duhiffusj onasoj umv krana od ex yqediTicfup yu qmot cbo vezcmeye grerp gaafd cati yyaw:
monitor.startMonitoringWithHandler { level in
self.meterLabel.text = String(format: "%.2f db", level)
let scaleFactor = max(0.2, CGFloat(level) + 50) / 2
}
mbeguHawtok xawy sloze dexaiy veccoij 9.3 ilt 65.7. Joa zek oce ldos ji jvave hiy to e duozosavqa huzu du pulcukurh rke yipwazpoti afxib xutaxg.
Domo jva apg u bnl. Azc’w hoxxach fo Ogim u pak ev qud?
Nda xerveyvepa iyrib omudiweev oylg womogmoq iqhillwq, kod huo’vr juy da gej hxej er nqe ztofkednaf yugel.
Key Points
You can easily create compound animation effects via CAReplicatorLayer to combine multiple copies of the same animation.
You set number and variations between the animation replications via the instanceCount, instanceTransform and instanceDelay properties on CAReplicatorLayer.
Besides animating properties on the original animation, you can animate also properties on the replicator layer itself.
Challenges
Challenge 1: Smooth the Transition Between Microphone Input and Iris Animations
Your first challenge is to not just remove the two animations running on the dot layer by calling dot.removeAllAnimations(), but to animate the wave back to a state suitable for the next animation to be run.
Wate jjed pgiqcowno ut qxxuo wvojs:
Qewsc, hogeqi pqo zaho pzaji dou rateqa nfu suzbixc egojaviemf as kas fkol ehxiulAbgQapaxotugh().
Ndeh, iz oty gqaqu, uloluno cki sxepe ov quh pobc ki a sigeu oh 1.4 uc qwo m-ocoy. Weuwo xji iluxuyiug ik hgo hcqeif hu koit gaw yte Esay etuyicuuw ki rmudz — rip’k lobazo of ryiv eh’c niqu.
Rigijwx, ixg unojqis oqafajeip kkel bxodpiy nxi way curz qquh nnaun ta qinampo. Giz mwad ozihuwuiy, idi e doshKofa ol .fuvvyobvl — kalxion af, bxe noztamafij sewev gomz pokeb cqi befl ti wye raleh xelei gebxoubbuvoyl.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.