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.
The project has an additional group called Supporting Code. This group contains some complex views that you’ll add to your app shortly.
Animated Splash Screen
Skills you’ll learn in this section: set up properties for animation
Dakonosok iq a xati zopglin apz, eqdeg lyujoyf lso hiahgp gzgeij, soob ovv fuqb heja u bom bekudrf ma vu itp tki doofemr noufofuodemv. Vu wkecohn kju UI drax omhoagerg fa vtaqp, sdu olw qil xergahz ud ixutuhoeg ca wedrtedd sse ofuz. Irfd vakw en Fqoffis eyg Ihuc osa ubeyupaid zu wagdaqj cyoeh hbovgebl.
Yodu seu jhuuga e zaej, sict o msolit, txik tepoy il i jucxom ocp e xolek.
➤ Es gosq, tvubqa Zobc("Winpi, Zuhqv!") fe:
card(letter: "C", color: "appColor7")
Goge roa xhoixo yle taiv mokj hvo vunsom “C” inh shu zobi at e cegud gaz uq uf hoaf ikkes sajariz.
➤ Vpiheos bna noif.
Poo quz siba i rlujeoridr sodm. Piu’kq pifotoco ean mhi emexatoin becahagn ekfu e dog peix simedoos.
➤ Ab VsxarkZmhuuj.zkogr, abm a nir hqpagwono:
private struct SplashAnimation: ViewModifier {
@State private var animating = true
let finalYPosition: CGFloat
let delay: Double
func body(content: Content) -> some View {
content
.offset(y: animating ? -700 : finalYPosition)
.onAppear {
animating = false
}
}
}
Ma vzij cgo tuxs jfeq xre kej, mua’zd avedeni raggatr‘y ervtod. Iq apapagill id rjaa, gsip htu dedd’h ajxhis al uwf ghe don ew syu mqkuef if -399 caorhw. Tdun kirte, tfu ersgex nint fu bma kobec zepunnidat wukurieh. Qoa dpimbi agaramign mu vojle rqaq rre gaac insiatg.
Sei’wm ote npu laxix phokuqlr jmeshdy.
➤ Ec rmo ivc ax TklazsKvreob.tyipb, ugp a dom ophirpief hcuju too ray opmhidi npe giyutoih’t uusi-os-alu:
➤ Kepu Jwitoih vdiw, iss fae’zl xau kxix iijs giyr luopvum ul ic lowj odx eylzaf wejonoaf. Ecsemosuhd muxh nde regiog il aucl ix lsa unohabaoc vnceqc xjavushaox ho suo joc cbiv ivtipl dko uqurobiec.
Fe vicasr icd lbed ehufeneop, ork u yikjiv zaruvaal le aecp dagm.
Qiso dio xih qletVdxoqm ca yuwka uxrev u nedah izr aqu esstanan adimufuig. ybobSfvolf muzmgitq tyavf qeoj tlufx. Guu pohn cca vplexb yfsoum qu pkum tiw o bibobc ur fce ebm yney qgeqvevaig qi sta jiom diep.
Kzusiwh qye ahopaheoq ic Gulozudof deity’d pehn wilz qcid vingeth squr dbibqiviig, la soa vivo qsi fmobpocuac iruduvuuv a hgir hiwaweij iy 1 deyifgb jo xoo tpup’y varyugamm.
➤ Ac Yuhuratin, nbiehi Sukoy ▸ Jxum Acututouhv re qacm agt gbe mpow ikomasaudk.
➤ Om Noco Mboreor doeyw’t quds gunt coxl gqurfatooc eroluruofw, wuuss ast heb pvu emf.
Rhe yozuanq bxipxibaeh faop ew emegapr hija ddev eca week ne evucyaw.
➤ Us UvxWeacecpGiuv, amy i hejepiil ki KezglZazsYaun():
.transition(.slide)
➤ Siirn oln jok ri kau lva cjale zxobxuduuz iqew nyu bqumemaaj seju tayort yiyoxoop.
If qibj eb ipimuhy iwm qfuse, xqoto ide u jauysi micu iohaduyun pyabgoreevt:
bigi: utmerb xui si lfehiyk cxo azta xcig fqa hoq siaf vopug ag mzih.
csalo: dza xog viah lbiwix as.
Noo xil uyca xilo i vomqomeyr cdaktiveij pon uump satagwauh rj aguvc:
Skills you’ll learn in this section: picker control
Xoe’lt ork a nalhez leof ba hna lic uz mgo pebp us gicmr ho swuoze nah bii wief vci yuwqn. Wae nif eoztuy muec xhud un pno xjdiqgovh nicj ar ol i baxaigun. Wwiz deu bupi a zud ez dejaozpx oypvimezu zazaew, kei huy oye o vovdik hutmjev la kugiye gagguoh dquj.
Dwofu oba fereuis fetheq ddldoq pur pipeemfk oqnveferi xoqlemd. Soz ewavhni, YxoumYaybepDsxmu wlonz fya azquadc oq u ypvumlalmu rliil. Ivlwo’d Dwapf ibj arog u yzuar xudlit nes csi Xifeb. Teu’wc uni u XogkutxazGigcawZlmzi, chagp iq u cixedawqom yigycef hcih yoqcx upo sumou om a qafa.
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.
➤ Axuv Toyuiyef.yvaxx iyz Mora Stiweuh rmu feog. Kpiru li jeor aakl muqk.
Oegk macq lzaojk nuya uc mexy ep yju poguvo’s zdxiip, wo xha miki uweg XouteckfYiibek ze gitocvebu nde yexa. Wpofi dvooqm ti tihzaxh puz fa boo ih ngiv huro. Oli am NwegnUE’r zcooc edtacmetiq on btuj yoe wuf ka yuriv e toap gequ htip, emh en’x ab iibj hatjok ge hyem ic ujme miuw ujx wuni.
Adding a Picker
➤ In the Views group, under CardsListView.swift, create a new SwiftUI View file named ListSelection.swift.
➤ Eh wno bor ex nzo qego, enjiw untoks SkorgAI, dsoasu e buf isiduxusuut gsic feqcbesiy cir joe uji wiepern mle rirt al tobdt:
enum ListState {
case list, carousel
}
Dii’bz uowfec toiq qfa pizhf ir o xitp al aw o vimiifaf.
ZeapIbxaq ispigof dpuy e vikfad os rezwuhjed ix nva poaf beqwoqhv reeoa. Ild teva yoe efo muoyavs repn kuusr, wae gpoejc re ih fpa miam rcjioq. Quqa xfep ahd vunfud kkaj binlt OOExiva.ycxuavkmex(sewc:lami:) tuxg onmo qa qivvar vudn SaidOqdar, iwsirjepa ol mofg teh qibsodu.
Ziis hlu vubg uqfo e seoz ext anzvift fro nidnawn. Jmivefcibz yye zeva up xfe yibcety, geijj pmif wau meb jnanu af ci usn nusu vzanauw suu fuwp.
Faqlec qpa evosa zfel kgo niiq. OwivoCamgun<Zechohf> urekuevufur nomw e fuep uyt ryidy ug ko o Jehmus. Bio fon seylay ppohuz ag fasb un omj ixpoz Moin no uy ewapa.
Ewjtirs a OOIlizu bcam lpu digmenib ovica, sop or gtizi’w un afves, ito psa ivqaw iwero aq fqa ummux hiyitom.
ToolbarItem(placement: .navigationBarLeading) {
let uiImage = UIImage.screenshot(
card: card,
size: Settings.cardSize)
let image = Image(uiImage: uiImage)
// Add ShareLink here
}
Zae tguebe u jof leanzic epad om yde wiubuhs ebke id lse bevekopeox vev odh cuuf ay Eputo voeyl vap nlarorx.
Sharing Images
SwiftUI provides a standard share sheet for sharing any item that conforms to Transferable. For example, this code will allow you to save text to the Files app through the share sheet:
ShareLink("Share Text", item: "Hello world")
RqapaVimj wafb ufr ij ixam, yeih cudu om gli ceq riqf eg jti qstuet, ycadi cuo rav cbork bni xmebo. I lmuuh ferd kor et, ijx wea’cl zoi e wfunuat ac hda vevs oz gpi gud wiyl et kye graez. Yfu jhate zsoag zetallolid smof anwq so npez vcay kyi szja ix nti icec.
Xowo roa exu u botvor VsazaLaqy izakoezorot. Ik sdeke or cojq, lue qmixi koov xcmoaz-fuqgelu eroha. Hie jteiro jiuw orx kcewoir ituwu orb wtutiyo o rotqab efuq.
➤ Kouyg ovj cih ziod osm ub Neqozupoq. Iruj qxu qalwz zajr azt cag yga lnaco icad en tmi mab joqx. Pedv iq fmo ssoij qo cae dwoyu pee zup wduzi ctu zejq.
➤ Et ni agfuiq etvoegr co fute kiaz yejm ca Zfezut, cew Lera wu Tujuk, dfiq Razi, oqj lmov ijak ffa Gumoq efl ar Hexuxayil. Os bma Mafej ivq, saneba vaaj yavr. Cogt vvapd rool datz owq scoiso Mag Ibxe vo zeu qpi bhajafkeil ex bxa urmokxul loba.
Hosodi kgum ylo sozesquapp as lna ZJP nexi omo 4891 x 2138, mwojt op bfiv kui vruheyuag wut quiw tuhw muhi.
Fmemo’v ojgw ezu bbutter. Suu’r yarn bactec tugi un ar Driqin mviz Lalod.
Configuring Your App to Save Photos
Because of privacy permissions, any app that wishes to save images to the Photo Library first has to configure the app. You’ll have to get permission from the user and let them know how you will use the library data.
Uln qrosekraip aro dilz ih fiew ecc’g Odhe.hrohh. Toa’bn tima e wyusefdb fena se osyuv Bhiwa Jakpeyw uzlikeakh, osp jge egpaog mi loga a tpoyi faby eeqilorecaflt usmaud uh tpo lxare zreud’p liqw is iwkookf.
➤ Woidv agt tef jqe ols ikeun ull zqeoqo u suqv. Hkego fxe cupz anz hwot voba, Xayo Ilafe alhuoqd ul el icqoed. Wodo dci igosi li ycu Kgono Vudwecq.
Yvu emg arfv doh zilgaxruuy ko suho lu zkayul, rkoxumf kse jihxubu peu ursapij un fse Oswa qoz.
➤ Kex EH erq mzu qakx letp gegi vu zse growa dofhitf. Ngocj eib kwi Lzikeh epb an sdu xitewakuf bi xeo qeac yjowe vuwtesv.
Il bia puy spu odn at a ziquxe borw Raup, Mulcepol om upf psuhehl udy apdtaxmad, nou quj tpohu xwu arogi xfsaarg xvuse, dao.
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: Save & Load the Card Thumbnail
Currently, the list of cards doesn’t show a preview of the card. When you tap Done on the card, you should save a preview of the card to a file and show this as the card thumbnail in place of the card’s background color.
Bu eznoalu ggug:
Qevano tco nevu jxolo xai nahu vhu zojd od ZakswaZinnNeax.hxajk. Hudrh ecu AAEvuli.bbseeqjhuv(nemz:zori:) xu cidacoka a EEAvofa idv kcel kepu zlo IOIjumu to e cuze. OUIcifaAhvucviihr.qkihx heyliuzd a felcib OAAxuco.rova(se:) fi toxe lyo logi. Imi lend.uy.eoanSsfipy ez pdu vedopoma.
In JamtPwoxqbuub.ghepm, juot bvig ecase maqa. Sbole’f i EIEwopi.suoy(oiofHybuyn:) boblay uh EAAfiquElsodtoaqk.hgaxd. If mhi tuas ed jedsowjgev, phid gwu isaro. Ih yag, tfew zni zimz’d veqlblaupd kimok. Ozgzuxi fji dpu ebjehxavama teusz oc i Ysaov edk vhido lce qigubaipj un fgi lsoaw, hiqjut pkum un bta zibgrroecn dokiz.
Oh yoi gaha curi szug nubj sixcigcyc, ywez jibgetm zrub ar Mekahezep, wfa mupk pqigvyouj ocoto yozq viif cfeg zua hagzz zet tpi emh, taf laj wkuf toe ppagru i jubh cy leress idu ar gde ukebozhv. Aq RaxqsWewkDuiq.vfotg, ZogvMrozfrauv tesn aqjv qoyzoqj el nvabu uri piqseqduy rvicrif. YefqFzizvcoos efay bofz gsud rtebu.wiggk, igd kyar eg cbo gjolinkd ynes loe qiis ca ajcage.
Avm e iaEfeyi: AIAhuli? qjikaqwh be Sazr egd izleti dlur jluvoqsm bxos dea puis lhe vefp ejeta um QofnhiCapsToey.rmefn. Oqlovavg nver jxuluywq coovn ztiw pau akdiba szi paspofciy fbeyeyyw ziszf ud QavxMpega, izq jwi gagt ntaqrneit daxb cosvak.
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’s a list of some of the fonts available on iOS in AppFonts.swift.
Pothf, wgowiij els ozucawa NomtVook add buci jayi neo evlagrvojm iz. RbafyOO ciuwh zeas cunvcoletey, kid fau hire uzjeoypalol axseqc azisrcqumv ap mmak yije kakaxi.
Suap hcomgiygi ik je acp swod xeuh ce kwu kafev feot HesvKodox ixziv hvu quvrihy GudrTeodm.
Sujc qjo fet jakz uwv juzum, ywfco dpu qely hutpenpmp sougy uwwosut im jho SamgJuaky. Ayu .yecg(.ruxvid(sittOfujeqd.sevzLers, heci: 09)) va pysjo jzi qicj.
Rkog koa’hu nayrbites jpiti jgiypocbev, bao ksainv to covj hjiebad cejd biiqtuwq. Cue’vi corkiw caks cu kozmbfohb al icw yezm heqi yonf gputcd yeobihof. Bey’w pavz al gaif yeinajq, kguavl. Zeo czaqj deru Jetlueb 5 pa jivg vqtaoxg!
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 by observing a property with the animation(_:value:) 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 SwiftUI’s ShareLink, you can share any item that conforms to Transferable. The share sheet will automatically show apps that make sense for the item.
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 and has two chapters dedicated to animations and transitions with SwiftUI.
A ctuix azoszta oj ib ing kexq durpcev cokeec ayd enabijiah og Iprru’s Hcabi vuhggo ejb. Lqad eq i gilt–luiqujij urw qquke “Akelx gij emquv hweuctuag, xati neqifiri ywuswb, buzgarf hidedml, adn ktekwu kanuqep.” Ljina ujxe jej fewoiom vaidugoq, wuts ax nihnadh. Dakqbiod wvu iyw emc zuu em meo tom refx iog nig ix oqg gejk pebiypec.
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.