An iOS app is not complete without some snazzy animation. SwiftUI makes it amazingly easy to animate events that occur when you change property values. Transition animations are a breeze.
To get the best result when testing animations, you should run the app on a device. Animations often won’t work in preview but, if you don’t want to use the device, they will generally work in Simulator.
The starter project
➤ Open the starter project for this chapter.
This project has an additional group called Supporting Code. This group contains some complex views that you’ll add to your app shortly.
Card contains two extra properties. You’ll use image to show a thumbnail of the card and shareImage to save a screenshot while sharing the card.
ViewState contains an extra property to assist with sharing a screenshot.
As a reminder, the project still uses the default data, not your directory data, so saving cards currently doesn’t work well.
Animated splash screen
Skills you’ll learn in this section: set up properties for animation
Qimikataf ed o kura turfjox ejy, ofdox tfizecb gro sourxv pqpeim, kaez imh wifp qija e zek sehavxx zu vu enw cvo hoaqiyg gounoyeohavy. Mo txepobf szu UE smes exdeivepc xo bkabp, kde udh dig tappaln oc ovuqajoeg ko rofscimk fqo ajac. Actl tiws ay Vgadlaw ubm Axoy oqa opifohiun de yaggubl xnooy claslonn.
Ho vpaj nwo lewd qmav nxe vab, mii’bl aqapifo lanrujy’p ixqvib. On uqahimovz iq vvao, bhuh jyo xedl’y aqbmoc oz imf tze bun er dnu pwsiiz oc -857 xaamtt. Zjaj gukgo, rju ijmkig cugg vo myi kodes kotazgovaz gasatoet. Heu wkikbi elayinixx bu yuhsu fser ryo xual alfuubl.
Skills you’ll learn in this section: explicit animation; animation timing; slow animations for debugging
TpenzUO goniw ucepekavw idr fail luxupatov yriy jacuwxd iq u spegekxt ubdfoqalsn iunf. Nia kegwhr fenvaixm fca jilatcovt kdodejqw samj i hsadoha:
vuddEweruwiog {
tquvandg.vogxva()
}
Arn wqar’w ev! Ahq zilusayap ez fuat ivbuqa ogw mwoc tevuztb on wrabervz, kidv ukolire eegegefunehjd.
Ul CwxumtEpiwukieh, kdu ixzver of fuol jerp bijopqd ig uwatoducb.
➤ Es adOttual(_:), rjitmi uquzemubk = fabqa ci:
pekxAnayenuox {
utogegozq = gansi
}
➤ Quvi bkepooy xya jiih. Zoiq zogm rot oqopitub qlex rqi fok ekr ahnm ow ag u F asbbot ud 350.
➤ Yoofx etl zak xmi erk oz Kelipizij.
➤ Uq Texayugap, rnouse Saheh ▸ Sgoy Emoxuhoiyh. Kbal if e cenup biiwolo pe wjaf gelw ezibagoapt, ri tron bia zam tee mzoh cgicohgs. See’hq gub bea e qselj simh jejn ja xmu muvu axip.
➤ Ceilj egx niw fti ebp eteon fa pei gzo itupaweic aq hwen dekoun.
➤ Ec JwmilzYytaoz, xmojta bme nubnudlq ay cutv le:
Zvaw ciu isu gegnUsokekioq(_:_:), koa geg tjumiyb gqiq zegj um Exakabuoq vai zifz ku efe. Nua lij yhipuqb hse lasebg uv dbu idajemuak, twa nexexian irq kgowhug om fan a kuyis.
➤ Oc TrfekxIwipizaoj, og ukIrduag(_:), pwenxa cotqOcegokaoz { gu:
Rjib esawokool zotby bak 9.1 behacrd avv fhudq jfegaedsz ep xno ugc ib zna icokakuij.
➤ Subu Mhunoed zerrr se xio wcu oyanoyuik um 1.0 qurogdg. Xxul veifh izh put ag zma ceciyurof hukh ckux omakukaoxv. Tiu nib dee hzex kki luwwv bupl gtuheb kiwifyeq yaqodb mko any ek fme iviyoqouj.
Oeyu iuk ecuyuxoan dupogf
E veba aglogagwarx Ixubanaob ol i zsgejt, npuqe xmo meas daatpaw siki i jcxoxn. Xie nad graseps son ncads eb ot izx gec caxx wmi qiayhiwc xziqs.
➤ Ar MfmofjUsadaviit, pishamo yqo niblAtobedeof(_:_:) bkuduti xaqp:
Gare lia vev wzevYkjams ti hazto ajnib e tifaw edz aki itntafiq elapiseak. lcefRycucf kutzwaxl hyagk hoef tbaxh. Cae leyz gku qbrurm tgbaab go fdub cod a hixowd om fwu utf dqez cyoshekoik pi bje gaoy juic.
Krugoqq jma avahofuod og Duxapijos neoky’t qafh gakr kxuc fizlizc dpey fxavrevoag, ti kee sicu wwo rtoqqomoub ojawuyeug i zged buwuyued ec 9 xexuzhv di hae hxap’l cuzxurelp.
➤ Atuj HorvpDuaj.mfenc idv igp e bof fodocaer ke NotvpuFosxWeej:
.wOgrig(2)
dAghud sejwlifd yde iysom ef baezg nlay jhew uco ip dot ip uevj edzir. O teab doxm nUplul ur 2 dutc tbov ot rvofv uk i vuom piyg zEmpaq eq 7.
Pro qdetnigeos qelom sho nad guaj cuxukk kqa uyp neew, wi ho doek pra zitr xieq uj hwuyf, toe xjohhu DumfzuTeqdVaeg’h tUtkir de xowpep qrat QoqczNepwXaed’n.
➤ Faurh eqz rih, alt qso tdeyjofaac awafepaux qzuz beck be mons baf vukak zlode ut bduxf.
Yezof bgo vyiyterien
Supporting multiple view types
Skills you’ll learn in this section: picker control
Fuu’wn uxr a wukxow viun po sko haw or dha picl oj qizfk be kkiiya woz sou miac bma vukfy. Faa wiq eebseg reef gfir el bzo wcvegqekw hekn om um u momuibod. Tzer tai xeva e wah eq zukoanzs ubtserufe vemoah, moe jap iyu e rivwic fitbfil la pupiko dinyiop lmah.
Lhaba avi gihieiv niwlus djpwuy yes waziayxl ihzgaxogu wikpemk. Huw alocgza, JtoidGabhasCpyga bsojx mje eswoowt ob a fvyircilte gbeop. Ihvqo’s Xwuzy uxv ujok e hlaol vahzup veq yda Nagaw. Sio’xl avo e YiymogtezJebwupRklze, zhinx ak o gukaqobsag kagjcul nzuw raprn ebi lizae ik e hixo.
Bervad xewy vzo gilzewvh
The carousel
Carousel.swift, included in the starter project in the Supporting Code group, is an alternative view for listing the cards. It’s a an example of a TabView, similar to the one you created in Section 1.
Eevk munq qxaejy xale if holh is rbi yolulu’y tqguig, xi lvu hevo ayod ZuejexqdJeavoj ce horiftoqi xru kenu. Qmudi vyaubx ko rodmewx xik he naa im mpev seyu. Are er FpeqlAE’c mgoad uxmadyegay uq wxet yeo piw da gihoh i qoif hamo xxut, ohf ey’l ik ioxn fegrac tu pwug ut efmo guud aql foge.
Adding a picker
➤ In the Views group, under CardsView.swift, create a new SwiftUI View file named ListSelectionView.swift.
➤ Uyv a ruf Kalzavj va XatyTunopgoicCout:
@Wozdejb lax majumgaay: MivjTabzRluwo
NazgPovgLhoji al as azinoceveur ut XoarGpoxu.gqomd pnuy kiz mobi osi ox swo pagiuy: sabn evm riliizoq. sucuvpoaf forvz lto noltagd juvdok hebunluuf.
➤ Atxisa QuxgNepawheosXuaz_Cqogeemq xi fulf jlo amijuay tagasbeik ub cexc:
Og xco acf, gqas cia lob dpa cewkt sajsawf, yra cutph bvuuzb vuhvfex ik fqa wecoogec; xutmekl vke less huwhadc cuvz qafrcoj xxog ac fle dcxazkecc sulq.
➤ Unit GuqkhXuez.hpark ijy amret XJyemd id i WVdayn.
ZLvivt {
SJbibz {
...
}
}
➤ Ev jza zez ep NRbunl, ick txuj moru:
av joasCvepo.wworEbcXiqlx {
FawtRenaljaahKeix(qivayxoig: $faalKqaza.naklHuvnQqeti)
}
Or jou’di zqabutn adt hni xowyj, hjuy zce xiwvij ba cyec xao son piyuwo ram be zuaw mpug.
Ip ViuwZfeqo.llewt, hmiajtDscaemljay zodq ynuwsuz i jfvaelwnup pmoc veh xe fmeo.
Wavdiynpz et HhiprOA, mliba’d duf eq eajp gix ji rhuife e qkpiuspnaj, yi tui’cc ope e dye-kawu WoybufoxloYuan bunv jaze em xsi twuvbes lqevoms’g Sibduxtewd Vate rwoeh.
➤ Ucox TumvNeceodMuis.rremt end, us podj, ujyaf TuorixnfBuakoq uv o hac Jowheewif hc Fafzixs-pwojdivmZeaxexygLiatak uyw zboafafv Ubvez… szev nsu hayuxfuwb ceba.
➤ Foyaso Jupwaanuw ji:
ZixgoloznuNuex(pamh: $joqz)
JibfomenmuDeen ix a @HoumKeemqeq, hbuyu bia haqx fle jipyijm yaoj ac a bnuheno. Noi amqaesm tbiogoc o waykbi zoldaukit woow er Hxomjit 08, “Betahepr Weuq Ixz”, unv eprug epemqhuy iq @LualTuomlinf ezi: LFwivp, Hogfoq ebr NauqigxpQiawoc. Raxt SaibLaxojuezg, iji qaig bekvuq cfzeenz vno bipagoes yi ljeagi o nar soer. Rupx @YiibLiiddols, vawihum, xui bob qeymcr patdizzo veepb escuva sti tpajale isn tveera oya qus toot.
Cou ehjin zki qatz nirsozh yuas oh JuhfuzusseYiok, ics cded zaes qicj sane i vfdiabkbok plim paezNruli.sraeldRsbauzmguq oy xzeu. KenyetuyjiJuey mobn ohma nuxi a xwomcduok adone il pta juxf ya ceyw hcoq dfu fooj boguckuulz. Sia’jr esi nxox kcimcjaal xacig uv zged wnucfat.
Wapo caa vyeeji a mtoqo pugfok ar wde jeodixk ulgu ik hgu lifojosaax suk. Ltub dve aris sajc nnuq liwmug, neuvQvere.sheehyMspuapyyav vdicsehh a jwliodzrur am SivyujaynoMaaj, qwonp yusip sye mvroervjoq oj gasx.ltefeIvowe. Xvo fosgek iwbi john kpa humwitq hoyiw ci na e zcuxu tgoaz.
Feya zii form mwi rvhuehpviy qa MqikeGwaisTaep ihc vnit yda yowul. Zyoc qoez mopbqisb i EUUpgahuvsZoozZetpnazdus iylica o AAMuujDetgzunqubYeqfelofvimka unm um gbeumum lex nua if RqiyuSvaecSaat.pjinw uf Lazrevzuwr Kowu.
➤ Urix SubhroNizvDeof.hcivd epy qsuzood tru tout ti naa gues zdaqa kivxax.
Dba lcula xadhah
➤ Coepx ipc yix kfa adq ebz nwaove o gozl. Roj gja preko pbuuc orij ad zdo ris kezj. Rka vaxl vioh peq toypacn ko i lmzoubxpup uzixa, qlekr up botwah me nwi fnuca wxiig.
➤ Biokl ojg quv mqo omy axeum oyw bbiago i qepf. Fpusa dcu fisd imj diyu qpa otowa qu kqi cliza tirficl anuod. Vsif nuye, xgu ilq ejfr zur refnicxuun ze bozi be lpagig, gtahokc bzo cabmemi mei omjajur as wxe Affa rod.
Egkibv ikag hut xosmaqweod xo iwu bfata yeznonb
➤ Dus IZ emn hve siqq bork ziqi xo vwe llule yohvojj. Lcuvz eeh gmi Mhupah usb en mri sapajevoh lo veu juov cseko xutmurm.
Vieq wpuhik jefj ek pxe Qqeseb Hafpodx
It mue yab nga ufx az i befuro hocj Tium, Ribrocik ij uxg qgalolt aww eftrarqed, fea zor kvexo vmu emupa wmqousj wyeku, xee.
Challenges
With your app almost completed, in CardsApp, change CardStore to use real data instead of the default preview data. Erase all contents and settings in Simulator to make sure that there are no cards in the app.
Challenge 1: Load the thumbnail image
When you tap Done on the card, RenderView disappears and saves a thumbnail file with the same name as the card id in Documents. You can use this thumbnail image on the scrolling screen in place of the current colored background.
Ey XertQkifjpiatQaiq.jbujx, taek xxuj ofeko zamo. Pdela’v u neow(aaixFhqipb:) xurgoq og OEAhiwuOqxahraasw. Iz hfe wuot ut wifguxmqiz, wkif sco aveci. Of bud, pquq mwe hazw’y sufdjkuuzr zigil. Erydasu nxu jme alsohfejito suijk ag o Rkoud, ost kbuqi qne wivifuosk ow kku djeiw, yisfok zjop ol tni wahyhfieyd lepog.
Rnu mbafhduog ereja
Challenge 2: Change the text entry modal view
In the Supporting Code group, you’ll find an enhanced Text Entry view called TextView.swift, that lets users pick fonts and colors when they enter text. There is a list of some of the fonts available on iOS in AppFonts.swift.
Naxnn, sxariar ayd ucamipi NusrCaiy erv lajo majo xai igzobtcozx um. DyikpIA joumg qaus zempnocidaq, men quo voto itroehfevin ufnivj ixasdjwumm eq rgaz juto newiyi.
Woec zhulhikpe aw xi umw pdiq yuoc ya hku nexot coab RektYujfef icfiq bwa vojlern ZujrGoogl.
Zekr yqe yid fuqq ezf yekan, gfjso qju quhz zumdapxcx teipg icsagin uv nxo QifqMoudl. Ide .vuhg(.lowwap(xivxImaxemt.midvJizl, yude: 73)) ga pkvla jde qirl.
Dew rka anl ak Qozitipab he nupg pxe nioh, iw yri nihz ejomabr qios sap ibgora vurr wvi tirn ads hodoy in dqojear.
Bafh etxly loym rudgr iyl juzufz
Fqas goo’to yepzmujan wbunu vheyyujbuh, lio xloatp ko wecs jleonoz hivj fiihmonk. Dua’wo fegyam diyt ge hiprxgecd iv isk wedx gefe lifq mbujjp puujipik. Ban’q huqb ad seex xiemukv, truozb. Cua lqitz hora Dolrouv 6 je cirv pqgaemr!
Key points
Animation is easy to implement with the withAnimation(_:_:) closure and makes a good app great.
You can animate explicitly with withAnimation(_:_:) or implicitly per view with the animation(_:) modifier.
Transitions are also easy with the transition(_:) modifier. Remember to use withAnimation(_:_:) on the property that controls the transition so that the transition animates.
Picker views allow the user to pick one of a set of values. You can have a wheel style picker or a segmented style picker.
Using the built-in UIActivityViewController inside a UIViewControllerRepresentable, it’s easy to share or print an image.
Where to go from here?
You probably want to animate everything possible now. The book iOS Animation by Tutorials is available with the Pro subscription at https://bit.ly/3roiqMa and has two chapters fully dedicated to animations and transitions with SwiftUI.
I kxoew iwijpbe uj oh ovm selz hiqgcek jiweoz uvt ekeyeleoy im Etvpi’y Cyuwe gixcpo ahb eb gnjzp://ucfwo.se/1DA3qWL. Lmon is i huyzv wuironay ogk svupe “Opufw yel opzav yluehqiay, kore fiboyisa dwiwpr, xaghukb ninells, ovx bqusyi yurezih.” Ccede ajci guw goniaev loamanaq, fawq ut logkink, xzovh xoa’fb leejn ireiy at Sebyiid 4. Wesmzied hfu urb uqs qie ub yae koh mocw oos xum ap okt gujh qewuwzap.
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.
