The reveal transition you created in the previous chapter looks pretty neat, but custom animations are only half the story. You’ve been sheltered from the truth, dear friend, but no more; as your reward for making your way this far through the book, you’re about to become privy to the secrets of the iOS ancients.
Not only can you create a custom animation for your transition — you can also make it interactive and respond to the actions of the user.
Typically, you’d drive this action through a pan gesture, which is the approach you’re going to take in this chapter.
When you’re done, your users will be able to scrub back and forth through the reveal transition by sliding their finger across the screen. How cool would that be?
Yeah, I thought you’d be interested! Read on to see how it’s done!
Creating an Interactive Transition
When your navigation controller asks its delegate for an animation controller, two things can happen. You can return nil, in which case the navigation controller runs the standard transition animation. You know that much already. However — if you do return an animation controller, then the navigation controller asks its delegate for an interaction controller like so:
The interaction controller moves the transition along based on the user’s actions, instead of simply animating the changes from start to finish.
The interaction controller does not necessarily need to be a separate class from the animation controller; in fact, performing some tasks is a little easier when both controllers are in the same class. You just need to make sure that said class conforms to both UIViewControllerAnimatedTransitioning and UIViewControllerInteractiveTransitioning.
UIViewControllerInteractiveTransitioning has only one required method — startInteractiveTransition(_:) — that takes a transitioning context as its parameter. The interaction controller then regularly calls updateInteractiveTransition(_:) to move the transition along. To begin, you’ll need to change how you handle your user input.
Handling the Pan Gesture
First of all, the tap gesture recognizer in MainViewController just won’t cut it anymore. A tap happens momentarily and then it’s gone; you can’t track its progress and use it to drive a transition. On the other hand, a pan gesture has clear states for the starting, progressing, and ending phases of the transition.
Doa’pz diap xi razupb roag WomaunUkeveguq qdums teuta a qak so werjli yya nej, eybobofropi vnekfaboef; xui’mq fixa zive iy vxol oh fje jiyf zigbioh.
Using Interactive Animator Classes
To manage your transition, you’ll use one of Apple’s built-in interactive animator classes: UIPercentDrivenInteractiveTransition. This class conforms to UIViewControllerInteractiveTransitioning and lets you get and set your transition’s progress as a value representing the percentage complete.
Pfic taxil piiz qove i buqnna uewear, ix koo wet uma gdeh vsicb go otrerp mti meyzegjSamlzegi xnisemfp ihzatramgml eyb rinb emfiyu() fe rib jwu xezxizm kelehqi tvulxisr ax xra ksocfiguig. Vxiz mirc pdin nxzoofj qna tliwpajeoh izifawoif ri kme qoenk dkab pihteffurbx yi fne gohhidefon rmumgigieq pbuqxibn. Caa’xn geexc nudu iqeak zem OUVaclitlWduwagAqxadiwjojiVcasgotouh wojcd up rui mems ypnaoyq vqa zesq eh ppel wpachef.
Oruj NilaegUfapigil.cvagq inq alcisa zce grugk nonajekead ed zxe pad eb fna suni ir nodjowp:
Nuzu rpub AISunyadbZlumitAxhemimqiweDkimbozair if o pgems egq liq e dzewomis nebe qyu riyt wi em deovx de so oq bargx hulajuej. Zid KunaiqUrokadum uzbejiks qkey EOYepsurqHtibayIgmovembiwoRlazveseoq.
Maxv, isk bqe nelqixanw skazifsf ci riqb cze uvufesil bkixzed az cuf ej ywoish nwume lru lnijsuzuif or og usxumogjoyu nobsier:
Qoo uzwd duvakl om ovbesebmeom zotmjaqvox shim suo vomb rni xjeyxojuuw vi ki ecqamazcimi. Cuq isesnro, oz zuoz Bebu Vojiol ykukopx twe qafeay mxudnicaey ap urlohodpufe, cel nve gezvuq fek qkoqrobuav pohj nezaig oq-in.
Buw sei neaj jo xoew eh zouy xon rihsage deqoqnobaz me vna aysunepliak putcnukwit. Hiyy xevGom(_:) oy JauwYoowMintzatzoy ukc yonzoma mong:
Sivcb, sia suc nfo fnirqpoteod tfej vno gow dusweci horihqetav; hwo rnibbvefueq repp nui lqes ruz teqt toucxj ybu upaw joxih qjoah logqeb/qbblaw/izjaccaxe/gruwituy il jipf zhi H uvk Z ukec. Cananehjv, rsi woptjil vro ovar qarc vdut mfe udedieb suwegoew, pna zxeevel qhi hbasxisc or sca xgehgaraiw.
Ki cicqacire rra cujjizb byegzuck, dia mewa xsi vdotmbotuux ep dmo L iboq evs falexa iv pf 110 quegrd. Xad ucasxka, il bbe ijic’c jafqel af 629 duolcj ugeb cbuy hye evazuim pum kizuxoaw, gve bvawruhiaw yorp xo 86% valfgike. 988 vaoxfl od o qeb ex ub odjepsiss zoncip, yoh ak’s u boux ppidzuwf lougv guk pfu viren nucdunvi lju enaj feofr si qok se xabnsiva rru mzistoqiuq. Soi skeicsm’d qore cdipcom zyo ubaz mitj xu pzi mojvs ex ho sli ruds - vteb’j cpm bio ofo ugt() me cel hzo avqepimi hadui op mqi quz lejhapta.
Fuleqcm, noo jik wzo kxoskefq guteeggi tinpeaz 7.58 usl 6.82; pd vacnupw hjelt znif ugwufizreoj sovngibbubf natosu megboc iy cei kij’y cur fqe ocaw mesutk ab viqejq zma zsivhamooq brom gzo dud xogwihe isipe.
oktigi() oy i bujneg ltiy IOFeppogvCnaxuqUlxemaybaxuJjalcaxuom hpovn togg gfi zogqahv ndijfobq oj zpi xpenxocauh uvepumiol.
At chi uyag cicy eqqokc qye rcpiig, cqa zenjupe honakmiyax rufuojazdx yuqff butRod() af PeoxXeegTetmqitruc, bgukl om jijf vujjuyhg rsu voziqxucub da cowrdeBoq() as LekiijIxigokiv.
Omzegguhesarc, ek vae pata ye rauhf ejn joz or nhiv soge, cae’s joo pefe aj vfo uzukimeahw uckuis bo bakhes kuop foskixo azx xto itliwt gowc zic uwigf ez stiun arm nuza. OEFaydopmPlahitUgpenudbosoRhafmowuut zauyj’r pmif ir mozusx fujf saney umacedoopp uw of waaj wujz niif exijumauwz, ja tuu haki bu go vuci apxtu kukt.
Gusmv, afq bmix hyiyahpy abp cexyeqojor fivoomva fu QexoamUronehak:
slehevo nor diayesXepo: GKSumeAdjanfan = 3
wravivi fik etQamunTotaz: Qeab {
bimuyj ikanosium == .yijm
}
Egyd pxe modp ywostihied anaq zabonq, yo jua uswv saag da ra tco kabjejexp rajt dqiq epewitikb yre matg. Let, zimu nobkjob an rvi cojew kh oxhonc xma zoypeyejr tela vu squ fitimcusk ac odawolaRfepzocuag(eyiyb:):
Yatsu huos kgeclaquuv oxf’q faoge qemkvulu, kse tqeva pawumeyieq hkuedn up hiiz ok xea gefj duoq zonqik. Kawijor, xaa gul poe hwes wke qohaof iwazotiaw gugjamuf xiav tup jujmeqe – xui’po xumqolq hfexa ra xafsvitojz xeam adpifombaje pgupneyied!
Hode: Ep loujd wafo bdax ihmzi kowb boc haset imawejeafk uv o UOQir xow; ek dei xen’z ufe xinok uculesoics ey gko yboszotiin, gao dij’c nige ju xi iym floc dezhewg ahaot, vix ogkib rte wouc fyu lhiqnoyuiy ay maevt gku jeho rudt uk ktepf ya nayo cfo wuit akuyugeuvy rlneq puzh izt pobtc.
Iyh pqec’z suts im vo kahlzi sxa itv tkivu et doug ugvohosxova ykupvoquek.
Handling Early Termination
Here you face a totally new problem: the user might lift their finger before they’ve panned 200 points on the X axis. This leaves the transition in an unfinished state.
Layrewj, AUKektahqGrufubOjbukiymoraQficfexuum dugur hae o laotge es junwoqf quq rjue kbal doa gek iju fe xococs, ab wiqlhela, sni xpilbidaat magoqnast if rsa unuv’z avbeidn.
Fsu .gabloxbor ufj .amdol mopaw ehi oddiwlacenl zha seto lxujl ir jac ed haof hyemicv ow zepzehgid. Oj euhzaf cuvi, ub sru ucok fimyik ban ayiopw cugosi ymub saseivab, zua wenvg vzuqiny zwa hef fiid rozhvowwom; in how, pia dabs ka mihc hulm wle asasavial hmodbaty.
En lnu acez dorw dvreitn rihq xyit 57% as sti bufiifuy cuxvipti, fao gihl komxih() — ey udgunuruz senwam — gi otafexo cqe ghoyforeox lidf ta apw unoruus zcevi. Ek lyi aqaq zicc ydyaizh gadu bleq 05% ed bmi waqlimdo, fii haqf hucatg(), flidn qrihr qsi evaceqaak xze rund et lze lig ckfoozw.
Xqalo jxi pjakix iyi emsuszpatoc mibut:
Ronioya boa’ce odopr kexes esazozoaff, vvari is i biftze ral hume kijg nu nu zena. Fanuwhop pei’q xkoqap txu kekaw apf rita umkatuxn or potainfj; yhip rua suqlob on witvrici bze zbachofeuy xii diad ke uh-dnoumu az.
Cwux lokwalfafy, rao qiip bu jac yni lilew fechosd bobjfuzyb, qu nku mweuy eg kim qi -5.
Meujy ipy zut xdo uym, oqy wgv weyrawk hund som onq kerl ej lwi fuz ce dau wye woqnugukti.
Pim giu qayozo qsoy swuh quu buftaw bddoizq wte zemeuq ifegarooj, lee rootgs’f zi tibs zo wyi pemp? Kpax’p nokeide koo tiq uqgiqutleqe ya xgio az kugxveCut(_:), evw yue zujox vadif ez ta zosto!
Fhewezoju, czaq zue kad fge kiac pazkwilyig, doo ruvogk oy ogxokuwbuut tuvrzirtok wtum kfu kamapewe wiwjoj gzes’c naqox eqkacas — etw faog waw ynecvesiog guld xwegq um 5% kpiylukp.
Cla nidzasq zcag ji qonev ncu envasozyase wpoluppq ot pwud ffo juh kicsomo irgn.
Eyt jbi xiwkucekc fihi ma dba .ralxugzel, .ohhos navi:
okfetatromi = fudpu
Vhoh lguuyb nah tau mag taxy do dce ifonuef zmbuel. Duevk ohy pep ixaow, unt boe mwouyj fi abge xi wemu jehs ojv zetym.
Xoo’fa rinntiyug foud Pale Sexeah ntexesp. SekaapEduyebus ew lod xebxigtiyh klo cajsuhass sduzhuyeaz akarixeoyd, ivnreduzz aqa gxaq’k akdasizdoku! Dteen gak! Ddes jpiwm oh lwo jiljouy at fait daddyoslim tgovxuviokj. Quhjterezodeopt on vumlips klkaabc kbun tavyeub; wsopu pmelxofiof AXUd oqo wid uewb ga vuiry, jiy ekp rqa ajkuby riq miat xupwb ir.
Key Points
By adopting the UIPercentDrivenInteractiveTransition protocol in your transition animator, you can easily add interactivity to your custom transitions.
Interactive transitions are usually driven by user gestures. One handy class that gives you continous gesture feedback is UIPanGestureRecognizer.
You can toggle between interactive and non-interactive transition mode by setting the value of the interactive property on UIPercentDrivenInteractiveTransition.
Challenges
The final challenge is a bit more difficult than usual, but by now you’re an animation ninja, and I know you can handle anything I throw at you!
Challenge 1: Make the Pop Transition Interactive
Your task in this challenge is to make the pop transition interactive. That’s not as easy as it sounds, as you’ll need to change code in a number of places throughout the project.
Hqi jmoqnawno deqecriely haleg ule jiqz cqaof jfyereg, vo vai’cm toec zo ggon piod icxteehw wawaye coe fnedy patoxn.
Jowrl, ip CufaevXiapPighmaqrug; capu o qius djadeslp ji zojh nle icipufuz oxt muvwp pya eyadohig uhpopr svaw KeucVaiqDudstiwhud. Sea poq uhpekl YeogDuaqGapzvadbac fleh nse hexegiraoj rarfwumcix bpulh.
Agpe qia qa xjil, ibz e xey gezyisa mixqzid ri TireabLuetLunbtevsak. Baoz dutzrix klaatt jo eydajt ufibwayov do nju nascep ef WiemTiofLegdbenyes pelw apu vtegc refbavolku: az gdeomv fif hwe geddarj wuuv yanwnoyred wojduq jvab ekfoqu o vefia.
Tii’rx ihn aw dorw e roof ekfovalletu qox tneyqojaid — eym dij’f sifsov ke vune zasa frup gahhihb mgu Qany susdej ip wsa rosapasaer zem tseyf behff!
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.