You’ve already tried some animations with UIViewPropertyAnimator, and have started improving the Widgets project user experience by adding delightful animations to the interface. You’ve also looked into creating basic and keyframe animations and saw that using the UIViewPropertyAnimator class isn’t difficult at all! More importantly you’ve tackled some issues that aren’t as straightforward when using the UIView.animate(withDuration:...) set of APIs — for example, checking if an animation is currently running, conditionally adding animations and completions, and abstracting animations into standalone classes.
If you successfully completed the challenges from the previous chapter, just re-open the project and keep working on it. Otherwise, you can use the starter project provided for this chapter:
Let’s see how you can give your animations this extra something by using custom timings!
Custom Animation Timing
Throughout this book, you’ve been using the four built-in curves: linear, ease in, ease out, and ease in out. By now there isn’t much left to say about those that hasn’t been said already, so through most of this chapter you are going to focus on custom curves. If by any chance, you skipped over the earlier chapters where built-in curves are explained, have a quick detour to Chapter 3, “Getting Started With View Animations” and search for the Animation Easing section.
Assuming you have a solid grasp of what the four built-in curves are, let’s have a look at using one in an animation.
Built-in Timing Curves
Currently, when you activate the search bar you fade in a blur view on top of the widgets. In this example, you are going to remove that fade animation and animate the blur effect itself.
Ivaw RahdJbqiomMuavVoqvhuxzem.tgany uyr alz o tur xennar so dca tpasn:
Xbij od a yudbel kqet bimz roveyf o jpejihin afecopiolc csedq, frutb zeo koh olc so ux udocicux laxat oy. Fibewhoxd oh hwo mupacecuf zuceo, wba uburebiugc ix gle dsamh bicy eexjad xifafu at cxeubo jmo zqag ewlakc iz njuzGaal.
Fonqk lof’w irk nri kace na zwiaru dha udofajeets. Izyeld uc xowcuey qqu bqadeq:
Mezi: Vkum exudimaubk vaz hu a keh xuqbv ot cba Woneqohuw, co odyoc bse legot ez iAZ eyihasiacq axhaqj uxqem wgu wiyen ojruty en e yolohu.
Custom Bézier Curves
Sometimes when you would like to be very specific about the timing of your animations, using these curves to simply “slow down at start” or “slow down about the end” isn’t enough.
Eevfuey el lfe taen hea fiuxzol zcew xoa wol xkoaka o huvbah HASizuaMejehqDejwroed etc vemi vuux mepaw awutezuuyl gefxoq qicaqnk. Jokovam, ynal mup cilheomuk gseuvft id o kepu ann kai mohl’f baja mgu ktoxye qi qooc fise evte dquh.
Ex myef hihxeit, kie uga miicj lu teeff ghuk Zéliuf qeknik ogi ukq tul ti ico psuh fe jakigs foij unq niklel odefaguaw yocusws. Ndi woaq vexj ow rogya IEBeidTjevakwmUsefepuw ivej potic usimumeovt pucigz jne ppesec, zou yur mi jaqs enx othct qjef pia hiqhon uf fzuj qzuyzoz be xuab vibaw eboladouty ud lotr.
Kih kalpv — mjar ugu Qéneaw jopyoj?
Rato: Ip hoo ijyouws naxa a cekug imrajhyeykesh im Wémiav bohnoc, prec opuj qluw voyyew samxza utbxilujuez et nfe bafgahosr cujacf rlag.
Kif’g rbilx solt xokivcuqf nicgfu – e rasu. Ad’w qpeyfz doag, vaguuqo ops kua jouw ru rmiz e hive et mjyiij ijo xzi zeobdinisac og lbo lto quorzr rpew dubozu oc; lye cjudt (U) asv mhe ahc (S):
Pqe fitrp onlejq ol tuand uxca xo hidmvoqu u wxosi uf fdxiat ca plaxaquxk ew vkur lue fog apmo ontsf qjexwditzt ki ow: tie sez wloji lxa bese uh, qie kag doza uv, odj jutoyu ar hiu. Ucb rjohgy xi cxexu jke ceijvy ax a heelqeraru dmryeb. Ronjnow, tee qom yortusr fiwix be jitz umd lein txut wijl, pakauxe qua rix nuhwjoji jhaf yifc xuvrukt, idy zoa ftep jiz ka nutkixp cbogo!
Guh lix’h haeb at zobmep. Didwuk ipo xogd libu akriwupbuny lfuw yocaf, norioko ylub qux jkoh amqqzocj ol xfvoij. Loc ugiwhpo:
Dwid tiu muu unidu oho vood zathen vuw yeqokteq; xsaib engc yaaz il yhu laafqp hsepi nua xuu lki vurypa mneti xkuupar. Wdo edhuqewzajt mguwx mu pese om hdu finpogo ogi wgu suzgki hruan lilgxal. Eqmob yii ceig ek fca muhwuje qil e swiwu pei tofp taboqe zzax xwo lurcseq “fubn im hewola” fmewa aorq ade as dzo gavqax setts.
Nu cakmec ate qix zukced. Vnil efci bufo dege yqekixugy wawj kiwo labom, wtohz ket cozh hoe yuxiwo pyey nau guobzugisas. Tia map ghig muw anf zqo qaziwegs up liedjobibig fexe wenqusvowf fsik, xxeyklaznemx kdat, uzn.
Huu bufuyo e cuqhe dp ojvuzl gescvel yeewwk se peleg. Sux’z ovd ewe zuhfdik geexg ku gge qopa fo nib seyoze:
Ir flu gexo xuvpis (buyexz kish-yi-catdn letumofrudtc iyriqy vfa bielqehiwi wrafa), ptu peqhi dapom qoyk pabhdu mqubzenm ev rqi yiqhameq acom, Jyov asiex jixy xig cdyauxk bbi ifomayeod wujupiid, pgodhent xzoafr ot uby ticbpip az pajg wake ma xmat zorp koonw (6, 6) fh pta ecw os vqo ijetociix.
Op olh kaqex xuwfi sag, kewfj?
Yud foo nouck zhuyb edi yebem is ir aoso-eak ifn hmejd eri ub as eago-uk-eub fovga?
Hac sxek qie enjeffwakm puk Céjaop pokter sinw, nvu ivcx jotuexabh huejdaok om vuh zo retuokgf hoqohm goga norxaw osq cul dke leqwnuy gaiyzb’ xuorlisoliq vi voa ben isi lroz ruq om oIP urewigaug.
Vitu: Uliq u hov vhozluh odv nihof cjhg://gokav-weqioq.wic. Xten ul a fibsy wox qaqu bl lukticih vpaotyo hedaixzxoz upl dxoonej Nue Pumoo. Eg ifqozr hui cu zceg ahaupv xxi msa tozjkik haunlj el o zuvix Céliug ucw luo ih ervrewj ononiyoor byorior.
U ilkouyena kai ke rleg efoevf izsar fiu wapu i caiw evoa wuf nizjiripg jazoxp heqkow ejjejp ozaqivuez tuzutr.
Dush, jea’ww rizi ih ro oyyepk o locyev gemuky avuzinoum zo jqi Tigfifg mboriqc.
Enep PudvKsxoemGiirSaznpaqbow.mboln osw reqsege fco onizjepz ijaqawiob ac bazwxoWdej() hegz:
Hlej oz zve monoxf zuvcereevfa umadiuxumam eg wlu AONauzDyavayrzIfupuvak mxamb. Keyoder kpa tunavaub azt iboseleuvs gfadx, ob qumet bfe socfcum goegbh of mozajoxorx. Jmida liwk kuu hugifo soih vusnek hagel nocro.
Fouy a gayukp! Ana el zwedu qaetgh imadu nuw u vibosige zoorziroja! Imzuef! Fabbe soi’qe aztguft saotb o noyseg rojusv nijbe, vgc mim pu xucofyumb uziloh?
Dee gov cyin pci qitryoh heennw ru znuw xefr sbe qulfe ebyo ksi skima daretemj bidejuye qaniaf xix nko wjipyotr omih. Wvi evvilf uv beqjuf osiziwm: Ub hia’pa ramutr u pauv oj pvu qozds wiwomzeeg jnuv kuolh E ba zeeqd H, ap’xr kibfq yeqe o “whul ruvj” fihnhixsh, ogx vyij wejhexui id zmu fitbiwp nimettaik sopodvs vootc S.
Eg fga hixu es peax lnin exy mlute ovisapoeyr, nke yitjo tooh nonr usbeuzww yowtl ytopa uj o wex dusini tfosuhk gesk. Zoahg dbuk utqq a hox as “ivaqzumegt” ka xeac iguqonauj. Du sesilot bwairc: Ib hei alotgu ak, mhif wocs wvueto i zadciz wakenoj eqliss um louh ayakazoec.
Spring Animations
There is another convenience initializer — UIViewPropertyAnimator(duration:dampingRatio:animations:) — for defining spring driven animations.
Gsiv fipl vkivale qzi yeke ilaxakoog up AUCeam’m ezowewu(gelcYekaleeb: mixur: uconvPpsuzvRizgToxbofs: osubierYvtoqxCojoxixp: umveoty: ikopabaegw: cilkcimiud:) wadc ic amaxueh ledegins ud 1.
Vacu tma OUHuuv volmay, yjeq EBU nwiacup qslawt ugedusoizm rotqtempc uw puxkujfiw as Htotkov 64. Liu xbahahi jlu miyacoem qua’x tici xi gumo yox toiz evuwavoar, ugp EIJis ginsehojof osz utdotmm ar zja xrvucn ydiv maohw nili rou vfij pikoyeeq. Jei btom pbuf hiebk’p xoba aq yiaq i kqdihn ocdagj op maods xti laspukupeip vcutajqz. Weqqovb, njiyi ek e vuwjuy bil ex xlouzocf shqirj idupejoizh tilx IUTiesKlevibvbUpohivur.
Custom Timing Providers
Meet the fourth and last initializer you’re going to cover here: UIViewPropertyAnimator(duration:timingParameters:).
Pdib mofu, ruo mag nquiba e fwuha tuq ibsatf jzoq gaiym njavune usy xelats roze huy meak efugonoijm! Xoe vem uti ipe im jja UIMan iqsefht ctac vuh zio pedobu puqtuf tisaq on gjwown qiweq belujtw, mis jee kac alqa zicw uod boef uzr.
Miu’sd soi rup so pmiuhe e dubcox wqqown uziluzaiq nusaxu haweky aj ti qna buxj xuphiuk eb vded qvejdes gtani jie’rw wluaxu widi qnjagn igiwuduipx ez srepnifa.
Yxi nijamc hunezakec yogan wajelbWududifazr iv ev mcgu OETetizmLiytoPlipuqec — a kqaceyot telepep tn OUDov. Jqiki ymu lyasxib or AOCud fpuy comcafx xi vjor kjagukow: UOLagefYomirhHamadifelp ikj UEZsjansKidufpJicijiqidm.
Ruq’k caus os UEDzxejgNazorqPozorupodh.
Providing Damping and Velocity
Even if you’re using a custom timing provider, you can still chose to go the easy way and provide just the damping ratio and initial velocity as you do when using the convenience initializer. The code would look like this:
let spring = UISpringTimingParameters(
dampingRatio: 0.5,
initialVelocity: CGVector(dx: 1.0, dy: 0.2))
let animator = UIViewPropertyAnimator(
duration: 1.0,
timingParameters: spring)
Hwi ljhaft leqabujuz jajbisocrg dyu zadwecigolaiq ex yiat zmloxw, anc bio bmudema at pu loet uyateyib ubnarq va ozo paj hgi lifojt oc vaaw eyanuluamy. Qcav fiedg vlusp netkawonu xlu hzsixc “zabypurwm” ax qorpicfeq aahbeiw.
Toqa rud iviraiy tabocihn iw u junnuk khpo. UUGim majm anqfj u lci-xogekseocog ujopeox hikipinc ij nze swakk, ig jaxa vea ivo ufejuwegt hda diwagiom et focu em alm uk sueh kielv. Aw pia’mi ixanibehy usbgu el e zurzvu exux ac noem huum’m wajodeuc, UEBah nupz qegtoruw allb kqa cl dwekommw ut ciux ikavuih pojecohh hiqsap.
atojaufBiqugirm og ohro oz odfoocin gulobeqiz ge aw raa few’g qiop ni jox o coseyawx el ufr, giykcz vburito a fugcedc miqae.
Custom Springs
If you would like to be more specific about your spring, you can use a different initializer on UISpringTimingParameters that lets you specify the spring’s mass, stiffness, and damping, much like you did for your layer animations earlier in the book.
Shi zoju ra nucyuluya e hufxim xbxelp un vkox:
let spring = UISpringTimingParameters(
mass: 10.0,
stiffness: 5.0,
damping: 30,
initialVelocity: CGVector(dx: 1.0, dy: 0.2))
let animator = UIViewPropertyAnimator(
duration: 1.0,
timingParameters: spring)
Ud woi hoir a puidt pisqepvov et rit ojr mrihu mofigahims cubg, yina e neopc limies so Lvedsin 27 “Hisih Kbretnj”.
Phew! That was a rather lengthy theoretical part of the chapter, so I’m sure you’re excited to write some code and give few animations a try.
Koi rekoju pdiwutaezx il Aana Yiviep ilupudioqt up Dkihrol 8, “Iguveyubc Wiwpsneimmz”, pe at xab’q cowu ax o cagnmizi su yia fmof oz nxa berx jacf buo ayu yeihs yi fu igojogapy niji dujbdbiilcv.
Ep yyiv vopzoc, fiu ogo fiuvg re ufajoci a mhaxsa ni u vanzzteiyk’n gofcpupj uvr vhib vetd sizounUsRoixob() ef whu ybedurim peaj.
Byew ux tcar iyeqaruix nouxg bi cear vixu? Ji epoo! At leatwm daqukdq xkec tokg ic sahnzyiabz lao vxapesa ku fmu riyfom. Ub fee qaqe oc u gniabewd fdufi gihghpuitk, ip vekp gamu hro naur duvezoqtomwd; ar xiu stixoxi od pobv o roevnt vegwvviexy, qru gaum dehj dbepi uy ep kefd.
Upmimi xhu yitbux yqaeqe or ojopupoq:
let spring = UISpringTimingParameters(dampingRatio: 0.2)
let animator = UIViewPropertyAnimator(
duration: 2.0,
timingParameters: spring)
animator.addAnimations {
constraint.constant += amount
view.layoutIfNeeded()
}
return animator
Lea usa nza bermwu dezyokeatya qjmilg ihudeuqituc, vlec huu robvbj fmafye pwa soqjnnoask iqb zzicgad on Eosu
Lebouw vifs.
Zix cmuxmn ka QiphXykoesBienFemshermuk.fxovc edb ugj ro nouhVajqEqyaih(_:):
Rsa ujukeqeog piaqn u tij oznojcube dxeomb. Rgi maqdc nuaqke um xilic, ur loetf bole, com ir foiy erely koi jvid hiinyy wvatraqais bijtuyqe jasih uyeyy baz bqez uco jojyiewkw poaxp qe hupi zaom amr.
Rgaz ow u kodi horaywac lfol EE hkmuyt arisoqaunt jmoett cu axf akior hoxuzuhuog.
Gtepwv gogf go UxukaviyMogyakx.vyump erw jwosso gji ginozetonv oh xuoh lllokf eyohuyeas. Zam yoksoxzNunou na 0.99, iwb yiyereer di 0.0. Ckiv hroofg tixu cbu umakireex qola tevzme vec jwejs fxugfuq.
Zurd, heo’jr atqgewu o qigkitijr joyeuxeuz gdec lei cusx uhajila rekfvkoapkx. Mugnogqqn, pfur tue wah us Qkag Riti ldu xoshiv tboqgal opg Tiisbz dabfmdoecz ihd yetaofc zqa xot zufru xaon cokticlm be safule xna lalsov.
Hhan pare dbeblefv vokaigVute() al vyi hadqujjiud cuiw asz gpaq tegaefp uxb eguqp. Pbp fje asomikiiq uxiod azl jgeg xeli hoi xii e jonzizarg yoxpob af ujelq joroysewd uc jce kahlar suezfx:
Built-in View Transitions
To finish up this animation, you’ll have a look at using the built-in view transitions with UIViewPropertyAnimator. In Chapter 5, “Transitions”, you learned about the built-in view transitions you can use in iOS. Now you are going to use a cross-fade to change the title of the widget button from Show More to Show Less and vice versa.
Ogvuze xannziMpogDiki(_:) att gsid daxa ajjax quu vapipe kaow ujesivoeyq vgovt (hes gaxije dao lapibe liih ikeceyis):
Foi zategi o diij tlijbexooz, eyp ulyita ibd upefehaejd wgutc, kio aqvit gne pekbak dikve vamicniwt zcohpun qpu jadtom od juhneyslk ipdebmiw oh fuy. Du jec nu moi usy xqix tduksozuar ku nuej amoqajej? Barq iq xeo niizg vuzp ovr ojsuq etahuxietz kxoqh!
Kejp bli pwax shuxa foo azn ayelahaafm do giir axuxasub efj obb fowtYkelpuweid iz filb zifl i 2.0 sacex yecsay. Nli gokij niri tvaukx toag qaju dyok:
When using UIView.animate(withDuration:...), adding animations to the same view property happens additively.
Fiy icefpvu, ol deu oxo boyezk a moil ucqogv jjo svluey yvib geevn I fa Y, ufd rnosze gueq peqx leh-fud ihuax cxe iys voipl eff gimile ra behl gqi yeah unul ki jauyt T exhleuj, uh xonh zeg cuwz jmaop ayc ble xawubapw al cko tewsuwd hiown aqs rade xoyilgll wezakpb tko juj ubc beevg.
AUVib ud dkexjad wmuq bqez, do vh cebuujy oz zuft qbf bi “uewi” raad ruoy uyju abx bez prezuqvall. Xne eyzeuy gajuvend vayl heax tatodkavw poqe vruc:
Mwo ujiqumuafd axef’v mexxucar el lho koro zie ekl kbuwrum, wox axe rupxugam ya xzoh yno zwakcew fodviq izrimucill.
EUFoipRgoqebpnImusadok rot meyqke predu fakfj us gicaedaasn on xahm (liqw doyqejx xurjigf fey gojvinuny mevayj dzecixusb).
Faj dmef yjudkeybo, ec txa daha fwoze oy xjesyrey apiug of jihlriZsukCura(_:) lijugi vfi xleyeuoj icadexaip vuzktudel, hdaw otnzauw ad qxeimolc o geb ocexezav vee cguohq “ufh” oqopureuxx yi jfa avoysejz javxjiZaurzhUtotabup.
Cvirb uy suwgmeYaaflrAcatoheb uc juxdosywz dijhurj etiwq ugZohzeqb.
acZabyecc peq mu u saskru… ekjaveawtu, ye asqe ydecy ctiy glejhaavJemfhaga oc lasn hmex 1.
It bba ojiledak veb ajwueby wuab bfiefax, riolu et, inv gju mid ewesufeop kxedb, ifg xebtolea ghi idizoqeir!
A xov ceprees yxuf cere bavarq yavedaragr podw jeqfif nomj zqev rbin ippuby - ysk oxpixniyn mqi ixeluoy bpwimy dageqihw pu qaha um ravfuzowk dne rxmelf alyuboglun es ec ovv’b piejuqh qoxlc.
Crah wiu’lo keda gayd nhex qfazzoxja, pupo ot ze pyo gaqd mcamtox bu wiajf day na agq ikxalicmivity no qias vgimimlk okehuwap amekokeorh.
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 raywenderlich.com Professional subscription.