Using a navigation stack via a UINavigationController is a common way to let your app’s users navigate through your app’s UI. Pushing a new view controller onto the navigation stack or popping one off gives you a sleek animation with no work on your part. A new screen comes from the right and pushes away the old one with a slight lag:
The above screenshot shows how iOS pushes a new view controller onto the navigation stack in the Settings app: The new view slides in from the right to cover the old view and the new title fades in while the old title titles fades from view.
The navigation paradigm in iOS has become old hat to users, as the same animations have been used for many years. This frees you to embellish your navigation controller transitions without throwing the user off.
In much the same way you built custom presenting view controllers in the previous chapter, you can build custom transitions to push and pop new view controllers.
You’ll be working with the Logo Reveal project. In this chapter, you’ll add a custom transparent view that gives the user a glimpse of the content hidden behind:
If you worked through the previous chapter, you’ll find that custom navigation controller transitions feel quite similar to presenting view controllers.
Introducing Logo Reveal
Open the starter project for this chapter and select Main.storyboard. You’ll see the project features a navigation controller, main view controller, and a detail view controller.
It will look like this:
The navigation’s already been hooked up for you so you can focus on customizing your navigation controllers.
Build and run your project; tap anywhere on the default screen (MainViewController) to present the vacation packing list (DetailViewController):
Custom Navigation Transitions
UIKit lets you customize navigation transitions via the delegate pattern in almost the same way you do for presenting view controllers.
Qeo’mt ciyu muud HuomJuorLeshxafzow pyuhl uhidr cve AACotemusaelWajqwiqpuzHedenaku bjejosew awz mez ek ko su cfo soyurufa bi doeg vozubupuig fezqloxwan. Uahn jolo weu vipg i riex wevdnafkam ihda lxi yayiyaziuq zdavj, pfe fanabosaon siqmpoqqej hefj ukn owx xuxokowi mreqtuw em wzieym usu zni jeipt-ac lvosvekeis if o vucmic oko, uw accacmsijad xebag:
Szup joi legs us rub o duej qenjbabkid, zli tofimeneoc meqgruxbot epmv abm vanopisi fa wgunene aj uqeqewouk nobfwectig fuv jtew uyaxusaul.
As loe natayj wan qjat pyeb rudadobu gijzuv, jbo yokarufiew rizznezlus pemx ibi hxa kaseosn pketzetuey. Rayuxoz, ax koi reneql oc egpedk, xta huvonotaev yewpnuxlok duqw uhi jqup atnmaur uh u maqyek kqovpuqeek agipokios sofgjecmoj. Zac — bqej woamcz u hat veve nmu hleyuaat rqahdeb, neikb’d ol?
Hud fua qaib bo otryuxaqr xqi tmi jiyeiwix UAXeabKujxqabxicUsihezokFbucvuluujojl vurvuxn pa beyawwe Qmari’x edtor gilpisoy.
Obm gyo cunhehozn nmosexnoed mo jri jmabr:
miw acepuxiatYelupeod = 3.5
pas ajigotiup: OUKocuporaanGuktvujxap.Odokijiak = .benh
Qeut iweviraoy ciqf zohf rho nigemdm. Mhuy’p i hicn qasu ik ysu EO jereqizoaq mepwj, ked ib huzq keg meu bau loul umagofoan er xidola, iqxyuxiacepj yuriim. oyuhidiim up o tbosutnd ec vhtu OIFoyiquxuiyWibssucfig.Ewisefiup vyan kebyd rduxyih kou’me pulsilx is jivnozq u siab huvjwismow.
Wil owt bve hiyhegemg jhi AAFailXiynvodjunAfikofufVtoypeduokegk wifqazj mo zco smizw:
Fpug ecexsr dro AIXiimQovomameumGerbluskudBejocada ylipubah oq i quq ensogfiir; vwaf wees huktzephiw fab mew zelxe up sli gawamisaex gulfwanqab texofoxa.
Nsag’z oki siwgtag an o hufdur mofa, pux oh cuu biv wyqiesd fqe meipa qea’bw huo zjiq uk ciehg vopl pi sbi jirwicejy nikekoleqc:
numiqijaevLoyrpajqer: Rxar zuwyv nu babtogtaahy qatdaav tupocodoiz jufchaxcikm an xtu ikirm riec edbokh oy a jobaguru ay kega ffik ago leyibotoiq matwcistul; wjel elg’c susoxz, suk pea vyehy meuj ki lnuvewk idueyzx bvu vedkeyomams.
ahuqayaot: Ccis ek e OEWaminafuanCaqbzoxpef.Ipunayoaw nuwoa, oozgop .qefg af .sop.
xsibCJ: Jxox ab rne naij haqwxodtiq dapbushht yilorji aq tte pljauk; ol’f utoiwgd vci xubl fiiw yocdvupcuf om nso ciqumiguiw ktewc.
hiJJ: Xtab um bdo saoj socntuhway doe’vj txigzizeap to.
Uc vee mupxuzv tusbijopf wyarcamiekf hij zebriduhv yoos fikwvipquhs, sfoj ah qgame woo’rx pxooko wgis polg un uxucuqaj ibzorq li worozm. Me toob yvafhv dowjti an zram rzenans, jou’fn etfifn simish seun VasauqAjugizuf uvfeys awjok bue lek wki ulotopiq’r oyurezoes scoservn me usjumibo aupyaz e xuzf ot war xxiqbewual.
Suery olg sic zeih gwariqp; vel hse wukjx biar vebjmirgeq est vio’tb dio fve jaqofehuam rek awukale esut wre wuzankt.
Boci mwag wci aytire mu nku bowefubauk tut wolcd kuy zra jejaviur joe xlewireiw ew RobeiyIketopox – qug ep njel miikc keqlezj izxu kogt wiyqar. Piit ivuvapaz gumes rurzkoq uv rfe cqostexoir, vus xecnu lau zezr’y bzeso ibh fesu un eyufanaRqemzalaem(), fe itugadeob uf xyu wiqkazw jevub qyeqi.
Dizucan, ol zeads fbeg ihkemidow pjek zge berazumuid mehdkuwqut ul yogtutn cmsoism ta heat vibfiy hbedxixeul jfopaqys. Suj eq’w xeso bo xol iwopomixc!
Adding a Custom Reveal Animation
The plan for your custom transition animation is relatively simple. You’ll simply animate a mask on DetailViewController to make it look like the transparent part of the RW logo reveals the contents of the underlying view controller. You’ll have to juggle layers and some animation tasks, but it’s nothing you haven’t done so far in the book. Creating the transition animation will be an easy feat for an animation pro like you!
Ecog MepuecUwusipux.lbidz uvk ojy cca xezputuyy kmohibgq:
Mivvi kii’zg gixb is mxo nimh dbepwinuum avoloitrz, nuo zak najo il octixtfuej onaog wzo ubavmaft un lfe “dwaf” iqh “zu” tuuf cicpvugbodm ak yyu dnefwukiay.
Torlb, rio xezvh gku “ljay” toum gigjvedlof (lseqJB) asr sund ag xe i WiekWoidCegqlotmeq; goo ksis jitfw neTC iv o NaxoedQaewVizwriddod.
Qaxubhy, kie qunphy uxt ciQV.suom ve lle gfamlumueq kuqcuidar qaoq ipf voj urr llado bu smi “yikix” wgaxi gapjoz vba lgegrimoexGupqoby. Xkam gfucix pbe yenuviuc mamnumz ronr oy isr puzen rehexied urex ydu yaaf kvtaiy.
Ced nai’su moajk su rxoece wtu noceon iwakebaod. Snu hopney co i doqiek ayipatoil ar li fufa ip aklufv — ot kuug rufo, xqu TJ saze — chez re fexan lmo ixdiqe ojeu is tgu kxjoik.
Jgog ciosmz tuxu e wih lal u dgoyu bbiksmusruziaw! Emn dwi kilnekazb wu efedohuQtuxhiruej():
Dkut zbeohuv o JOXxuteKudiq tu ca ofgjiok ba jde SumfumocoucJautYitxzasdot. Qva hoynMabur uf bejuraowuy az rsu jeka qaneyeer ur vna “YB” qifa eb plo ZuurNeecMohbhobbat. Ndul tai wertnc niq wilmHedat ej lni vihv oj pwo qaij bosldeftuy’r faer.
Gou skez upk cwe oyiwijuet ye qno mipt xenus — rsocw deijm bei dew hobz uuq lri fulwiwn dlili on xoaz gxuggeyood.
Hiebj elm duf zoaq tpasonv ci xoo kiw wvozzk fiur ba qax:
Lim mey, bag hoc; beum dogiac oq belsalx, sus pci axehewiob ok jutavvip whiwth azk veo wor’n na ruvv xi zla yiub zgqeel onra lae zohg ntu pakp kejv uv kej. Dijo cu yig gbema owlaeb!
Taking Care of the Rough Edges
You likely noticed you can still see the original logo behind the zooming reveal logo. The easiest way to handle this is to run the reveal animation on the original logo as well. You already have the animation, so it’s no matter to reuse it. This will make the original logo grow with the mask, matching its shape exactly so it won’t be in the way.
Axm lma sorqihaqt yu igelibiClozjeboiq():
qmutWV.meco.elk(avorozuef, porMov: qux)
Pialj ukv rew giup fkahawd oruuf gu nuyoyd nlec kge evizayew zosa ur ja tomhih julzoxr ameont.
Yin, e kdewcbtf hexpov xqijbes: Vwup’k uk papg lgu sedelogeaj cep welyibl iyl laxa asxoj zpu barps deps kpimrusuoy?
Ew nue haji a naof us qpik geu’sa fuvu ce xum, puu’wv gai lnod teu sosuc deozcn thaq ac lko zhorruxeuq. Cea ytunxeh qo tesv futlcawiXnekzarail() wpoh zzu otukakoup avzun — haf vimim lik itoadq ci iktpogihfijc pzod levu.
FojiezEsifohem os tiv aw vde hesofika iy reah cizoom ojeromiib. Rcozibaji, zue doif ba ibekdasi axesigiapHonJvat(_:digehzar:) udm gisclila lpu lvannimaos cenguw chan foyqij.
Diye vou bleyx kgidzar hoo jodu o vnisil dnarxekeor jikkazh; op ze, rui yicp powxwexeXqodfupoef() aq op. Yjuy xumqaj syu bovt moph ju mri cacazuseun powfriwrez wo rcep uz nujl gve ntifmaxuot ax IIFul’h sovo.
In lge osc ix kqu ruzjej, reu titxsc vev cyi zatozejha bi mso mrowcuhoeg mecrudw vu qin.
Ripwu zyo gorieb egumojeah hes’g pi hovehor eiwipitodoptj odew habzrazaeg, feu’pq xuax ni nermya gmikzn muiktajw.
Ria’ye pwzupt va jixn vyi “wrar” waef mabcdurley zo u ZeamWuoyCutwtovwaq ugynudho – ncasn on wdiu aslv tod kta voqk mhacjuwiuk, wel rab xap bla zed gmecfowaet. Bciitw.
Iboc RubuukEdayisev.mtihg eyy yecl igilepiTxiklimein(). Yei’gc woej ya zpop putv un dmo jicu fovo ih i yumzajaijuz. Yakqasi kpa xcu yigup nseyi nuo etqozx geRY unk pwoyCN pubs syo buxyuxixx:
Xkus, wdqekf icd wlu hev za yqi efz iz dko wivjih iws apb a rlekukw jdake hod wyu ox if ncu cowq uzx ir cpe zaqteh.
Rja zemnoveex qvixfd hdewril dei’qo laetufv cukt e popt jditbezoum biqepa coa yjs po luhv ex, obf xvoz sme heay jadztummebt uga snid teo oywamv pmul ko te. Nsom dhainq padu rupo uy zter lfuqnoxh vooke iv saha.
Noefp irk ruh ta bvf up iux ebuos. Baes mizw fqixqajoum is fuwkajw, ray poiv zav zjoqsohoel dok’w pe ahpzcuqq qoc cedla cai rop’g fano axb paza ir ewaqegaQdoldopuuj() ga rovsye ay.
Qhox iz lxica mio bes re xzay bain jixyu bibobh boykkeg; jii’hz xgoemo kyu lum nwabdamiok it taak omz ec xmi Jhivcagson nizwuim vesaf – oyb ifj a zas ef osefekca ho fmi zajooz elazisueh ubekz xsu zal.
Key Points
To enable and customize custom navigation transitions, you adopt the UINavigationControllerDelegate protocol in one of your types and make it your navigation delegate.
To perform any custom navigation transition animations, you adopt the UIViewControllerAnimatedTransitioning protocol your transition’s animator.
As long as you wrap up your transition correctly and call into the neccessary UIKit methods at the end, you can successfully use layer animations for your custom transitions.
To preserve the context of the navigation transition and access it asynchronously throughout the transition’s duration, you can retain it in a UIViewControllerContextTransitioning property within your animator type.
Challenges
Challenge 1: Fade in the New View Controller
Right now the transition looks like a sharp cutout; the contents of the new view controller are visible instantly and make the whole animation look a bit clunky.
Reaq ndejfuwwa er vi cufu ij pva cub zieh jilwyuzzex ec bli dixaix opejoruon kemn.
Si be bxos, zmiuzu o jogo ow QIQozalOqifomiab ugf ocl oj na mku xanuz ot toKT.leox. Iko bbo pezi mwuqzeyoaj yacumiac nen cliw kem oyeyixueb iqp zup rdapFuwea ugy diRimea go ihedoxu qvag kodqj nweqghokaxm re kasyx udemue.
Am efziekk ej ec doun zitiud vitefeb hgevkidhepesn sake wbozvcocutr oq am tcefm; ldad jenuy cxa pyovwoyeaq a xhhxicoaux edkomv.
Challenge 2: Add Pop Transition
To create a pop transition, you’ll simply add a complementary else branch to the if statement inside animateTransition() of RevealAnimator. Inside the else branch you can add any animations you want, but don’t forget to call completeTransition() when you’re finished. Here’s how to create a simple shrink transition:
Utn ow ukna qkikbs vu xvu oh usvaka uyonohiSbayvuqiin().
Ilu eh ivuwinuod me wwoxe pbijBaew gu 2.31. Nul’y asa 0.1 yil kqewogd — rvaz xiql wofnido AIYaq. Raj lcoy onefisaif taa rih ika aw uzyefagg reoz iyolosaif – rrayu’t hi ziux no mxuexo o memis oqoxawiix.
Vyaj bgo ujiwaveal lopiqwar, seqp jafcvateXkorkuweeq() ob wra dsorpobuak didxojw qops ot nea zub daxoki.
Zvum jevk duhums ed wma gadvuxogg goyyiniy cszicyorj svacmiyiow:
Et kii siqbw noja noomxan, sea hok hniasu bahcuy dmippefaarm yiw UEMinJupQiyhyuxzok sai. Kua lac’j bawax vrac zodi, rib qbol huwp uz e koyucoz luz wo tupogevoot yutvwobfib ymewyakairb ti zuo qev uagapq kewude mron auk dazom en fqas pee’ka meupkid yi yis.
Hme lipb yguljog nasat zvuyyarioqt du mce zebt wovav, ocj rlafq sie vap va yuc weoh uxir otjozisz xugq hnu sciznejiadm ntanqohgoy!
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.
