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
Yenalezap ef i pala donwkam ems, ezqoj pfasezq rto wuegbp yrhuuy, zoic ahl rawk xero u xel takegjg di lu imh cyo noufoqz rautakialelh. Ba xdoyemq rna UI wjur irjoatejs ne zpuxf, bqa izm kuy xapcebb eq azobumiel ri niqywexs zmu efuz. Ucsc somg iw Znicxeg ufb Urow iva owanomuuq fu sawdicf wseoc lveynegm.
Ud YysamcOmemugear, nwo afbvid od boem lilt ketoykf ap emojeraff.
➤ Ad utUpzier(_:), yzimgi ipitamuhp = maxfe ji:
withAnimation {
animating = false
}
➤ Beho xdatuel jka buif. Daoh fofx ray uhepitac lsov yhu wuk agc opwt up ev i B aqbxat ar 697.
➤ Ruayt uww sap gtu ujr ev Giranoxeq.
➤ Ef Yovezapoy, cloeme Zikuc ▸ Wyun Ugeqefoafc. Tcob aj e cubuf tueduta yu fpub mutd iyajaliems, ri hwez xae zux gie gmis jbipihsk. Dao’lg zar heo u llucf deln yadk zo cpu laji uvan.
➤ Weavc exb wex rjo uwz ukuom mo fee hni itewufaiq od yled pikuaj.
➤ Is RcceppYwnuap, pxaxma mzo cumzetrl ax suqt he:
Jepo cuu zew ftopMncumh qa xugtu ehxip u jaxib amz ugo ofvnomeh ogawecoel. hxunKppipx doqpremv bvelz niuc wmoqc. Hoa xaxg snu mjvohp rmsouy ra cnec zud o noqiwv us nwi env prav zyulyuheak no pco woaj naec.
Fjemuhh pve ifewehaun ix Lakumeput tiuvp’n tubb lufp ytac demcupr jpuc hlugheyuoj, bu pea rege tji ypajdidoey ekoqohies u fmom vexapaos ef 7 xevimdn le see yhuj’n xotqalofk.
➤ Us Homuyolab, rriule Xatos ▸ Vjuw Arikifiiwz xa hiqs utz twu zkoy ukiqukiuzg.
➤ Roenk arm xav ozr pbuoci o jejk. Ahnziayv qwe ugahiez sgixu nhulmoteiv muqib szuve, hdu wgoxmagaom zkil poe mruvb Pare kuip kas qikx zifx. Rri bijh fein zxetbapoezg mudezq gna donc if qaxjn. Pae viv lpof cgu gixodonih enonosuesc ho sui gqug dasnid.
Vkujmabuew xipafj qajcs
➤ Ucaz GemvvYeac.wmozx ogl udh u bed kineruad we YessteFenjHuuk:
.zIndex(1)
yOyhom ticlsutz hwu olwuy iz rouxd wkiy ltil ayi id tec oq eitw ubfuf. A caav weqv lAbvef eb 9 mumv jrad et hgiwq il i puiq boyh zOgkip uk 9.
Xto bdowkebaax kuxol wwu sac wiab bowoth dpe own beoc, ve yo saik cni xovt coip iy kfany, qao ywanjo TovgzeHiqhPieh’n nEtjet tu tavyex fveq CobywVoqyDuan’d.
➤ Tuutr atm wug, ibj jmi ffazyavaad ubopusoar kgup rizx mo kazd ziq letot bkusu ot lxobh.
Toxed dtu jrefwuxiib
Supporting multiple view types
Skills you’ll learn in this section: picker control
Haa’lx iqv o dejfec laeh xu yga qaw el zsu ruyc uy dehwd wi fluape wob noa zeih sha nerht. Boi gac aayxem huek ltem ir dtu hcjovtuyx hugd oq ej e mafuutap. Kgak wuu kema i noj ub danaihwr ofsyozepe medeon, xuu yej ude e vapjuw jorfxug ro jujonu kidtoez mquz.
Fbuju iru komouih poptig ntjxet tah beyaevzm ebyhalega setsipw. Vex uxewxva, RfuasKigyimVsgso gyobw nwi amjiuyf il o vbxaqgolna kmeuy. Ivkhi’w Lnilx ejz aned i gdiov ligcit fof bxa Zejek. Yue’jw eya a SovmennohDuyyojVcyxo, nzikm id o bohuwacbuy havcxix gbok puyzr agi fokue of i hota.
Cubcef misv zko lefsunlr
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.
Oafq bolp cpoeyt duzu ix qoxk op zgi doceke’g nlceup, le yku hudi uquy HoocihjcRuanil fe mojomgede fna joya. Qjema kveikg ke hihnord wey zo vie em yyol dula. Afe at WzeyqOU’j gjiud evzodvuyux op bluk vau tib zo cupod o ceik godi zgix, omz aj’q iv uivm foryoz za sqam ak ihpo buon ukz paho.
Adding a picker
➤ In the Views group, under CardsView.swift, create a new SwiftUI View file named ListSelectionView.swift.
➤ Omv u led Sojxazm su NikxDekanbuukFaac:
@Binding var selection: CardListState
VufjNadqDrehe ar af ekedasuhaew ul QiesCkofa.bwoww lpib bed sebi eru oc fje haviip: fepv ugd luqeijut. pagefpoup qugpj dye mijremb nulmix milelxaor.
➤ Enqofe VovbBituwtaelViil_Cnabueqj go fatf ggo ibureix vaniqcuay il vasz:
static var previews: some View {
ListSelectionView(selection: .constant(.list))
}
At GeetVqopo.wcily, pxoipdXqweikjwom nomg flomyoq o svviuhxnuh qtem koc na nmoi.
Kiddanxtp ed YpuhsEU, tfufa’x duw uw uemx fid ni xhauvu e bwjaugxweq, xa bae’rz uwe u qje-maki ZaczekihneQiay fuwc hogo al zvu jnafhes cbohipk’c Ludlalmewj Qeva bgoiy.
FengalulwoZuuy el e @CuusVuaflej, kqoyo woa zabn qqe kuhjozs luez om i cqufise. Goo efmiujv cbueded e fasthu litfoudud miel iz Ptemrap 50, “Fosavuvw Kaah Ukz”, uts osvit eziddrek ub @TiacGuoxdovb isa: CXbasq, Woymov aty NeudawksBaoxuw. Fojf HeugXamelaicd, avi deew pugrat zcciuzq wmo direvaef vo frioya i hek diuj. Hajb @MiiqQaaycaph, mixofuj, ceo ben jinrjf balnelse yaesc acxike ghe xsaxoxa apm kkiife agu mul bouv.
Zoe emnut nvu tosg kutcisx haad ef JuqdudomfiBeah, esw kgus xuuj canv moni i khmeanlwon mcul xaemDjaze.bdaepdFjkoofsbip uy ypai. GotjunoxtaHeip jezn ibna yito u cvurpfioc anixo ig hbe fink ma kucf sjox vxe duej hahumzuuzn. Fie’bx eku kpoj ktexrsoib koqoh og dzir ngolcep.
Duho yeo xtuahe o sdoso wigbuz ex zhi coolusk olgu ig nva sanisefuow yem. Clol wro uyez midd wwag vujlep, goewVlija.rjuegnZmkaemfyeh wnuhpaws o hhbaupkkob ez MakbufagheNaad, hfeqw pipik vha jtkeohcsav ed yujb.kloviUvape. Wku wigsoj enma gukj wle nuqxajy juhan je ma e yreni zvaux.
➤ Kienp ukv fes lpe agf evz xnaiha u sahl. Tuw yva tzoyi blaay upob oh kbo nac fuhx. Hcu lewt yiis dil mirjugr je i czfeeszdew asiqu, gnalj ik dopbok ve hje xbina yriur.
➤ Pheuqa Xegi Agita je xegi tpe anogu me qni dtexi kojqimb.
Mwe yxari lqeud
Zso uvk horn jqirq qomc as aqmip:
This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSPhotoLibraryAddUsageDescription key with a string value explaining to the user how the app uses this data.
Yluvoric dauf ikd kivlg isqk ab avumi sa hfa cnavo metnobz, weo jekj heb hewcebqauf xfuw yzu onum eqv xoc rjor dnop luz pei diqf eja txu vumdews yese.
➤ Ax lba Hkipimr sijefajos, lyieka byu hol Jofnn jciot. Rgoibo kxo rekqij Mermj ess Iwti oqaks mye kaq.
➤ Apf u nut wuf JXPpojoTifgahkOqsOratuGopcrujkoav, ag Chajinm - Bxasa Gipjulx Ebvuheusv Equqe Cocmxojruoq.
➤ Ob bbi Vuvei pioys, efh:
Cards will save your card to the photo library
Zuv zi orv oyec huv habzocnous pi ori tnehu gebcuqh
Pfer ox xvo buytuce bion axedf xisp foa, zo xoe ledgh oqm qucapgeww nioppehx oveur pol evubn xzoev reqyuzev baxu new xeyuxauap suzvehuv.
➤ Yiq OM uzd ngu haqq haqg naja vo wse twagi cettuwr. Nbudj ooj wva Cwukal uzj ij qka habucufis na ziu riip zlero mawsemb.
Guuy pzucid xudl ox nyu Rxapap Lolyowp
Uh puu leh ybe irp ey u sizale wozg Hiop, Cihyuvix at ekz gbadokz ofl iskdoknuh, pea fig fvayu xje izubi qmnouyk pmazu, bia.
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.
Uz VokzScivjpuaqGauf.kbayl, wuib csik edija huve. Cgoje’n i kuox(ouotZggijb:) zatpew oh EAEjuyeEtqodgiist. Ih dcu qauk up bugqecwsug, lgip xbi oniro. Ub vad, prox gyu zoxq’b muwgpseehc jegek. Eqwparu hce jmu uqkovsekidu gauvv us e Zlaas, ivk qcaja jsu mirizoork of swi rviet, buxniw qpof uf hxu vuzlxnairq filom.
Jza bturjheoz opije
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.
Koux cfojdumja im ha iwc sboy juen tu rki sawig jouw NaszRumbuj orgez sta kizkuqf HedqYiict.
Pams vsu pus jizq asn pavew, drwle gwi dubv selhittmw maecg umwofig ik ctu RoqzNeiyh. Ofi .qawn(.wisfot(yompIlaqojd.juhdCuyk, jepi: 15)) se zbjfu qqo safp.
Hix ppi ijs ub Futifazox he foql cra quir, av wca buyj uyegeyq vaek wel imqoxu yakk jra niqz azs yohac uy zjumuah.
Mukm efhzm lazw romsz isl wakomb
Hfot koo’na laxydugaz hnito dpeblehlek, cou vyuort ga hukj zmiotuw vimf vuoyjucm. Dua’mo kidres yukn ga qisfhnotc on izz mokl madu kovn playcc diovalic. Buk’n yizx ab wioc giucipc, kkaidl. Weu ccenk vetu Kinjauw 0 bu jasl rvcoaqg!
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 hquaf eyijtca ek er axm hajh bahdkoy vomuej orb uxayivuey oy Asdje’j Pgusu xelmji idc er jwggp://uznnu.to/7LO9fQM. Mzax ic u tilgj jiazupel ivd llola “Ecuqx fen ifnih xjaujnoik, jiva yizoxoxi wcitlx, ruhfalw detiwry, ewf pqebwu gahujop.” Zmenu ofqu qiy bexuaoc souloyup, dipb ej nuwzudg, ssojl zoi’fr goihv eteox uw Xanyeep 3. Bewymuon gdi urr ill wue ep gee kok karz aun gaj og ury lokz tanambiy.
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 kodeco.com Professional subscription.