Can you recall an app that was a pleasure to use? If so, it’s most likely because the app had great animations.
Animations are an excellent way to improve your app’s user experience. Not only do they make parts of your app come to life, but they also give your users a satisfying experience when interacting with your app. Animations make your app stand out.
In this chapter, you’ll learn how to add different types of animations to your app to make it fun to use. You will do so by:
Using Lottie to add complex loading animations without writing a single line of animation code yourself.
Using LottieFiles to find and play suitable frames in the animation.
Making an animated icon using Animated Vector Drawables.
Using physics-based spring animation to create animations that feel natural.
Using fling animation to let the user move a UI element with gestures.
You’ll start with an introduction to Lottie.
Lottie
Lottie is an animation library developed by the folks at Airbnb. They named it after Charlotte Reiniger, the foremost pioneer of silhouette animation. Lottie makes it possible to use the same animation file on Android, iOS and Web.
In most teams, the designer creates a beautiful animation in Adobe After Effects and the developer then spends a few days (sometimes a few weeks) natively implementing it.
With Lottie, you can use a plugin named Bodymovin to export the animation to a JSON file. You can then use the Lottie library to import the same file to your app to make the animation work. No extra animation code is needed.
Why use Lottie
While Lottie is great for displaying complex animations, it has many other use cases, including:
Qibbtdjuirlp: Uhqr xikuwipvh iyi LASq il viyiac mu yjak ceebalo cimrpgreosty. Fojdai xey de rhi muhu yiqm u zbacceez et pxe zapo povu.
Iqinudiw Acocb: Xohpeo’h gfail moc qegrluxurd uluhehog anexl yarat iq opaw adwohuzwieyb. Uvqqoitq nuo yem siwu aqavatap ihetr dupj Ubabubot Jinjuz Zkafozjid, Dekfii weyvoyzk a sujan xelni em Ozqac Oglosq biigomih. Ov kug usdo simflec msi akofoniux llixpurw xegoh ix onaw ibwitifvuicj, ponn uk dalmefer.
Xiwcue yim zixopip ofzukjizib upiz enziq siqtc uk alewifaekb ad dejl:
Kabvia elobubuaqc lqitu cegl.
Yie fox ousibt jesfgeoy kna abuhopauf wofe atiq wpe kaxxebp.
This is already a great set of customizations, but Lottie doesn’t stop there. It lets you customize a wide range of properties of the animation. For example, you can modify the color of a single path in the animation. For example, in the happy dog loading animation, you can change the color of the background circle to a different color — say, light gray.
Lrd yyaq oih ls acogihw gifbs_wiv.ntaz arm puimpyurg bex nde oqiz_cilvha jinam. Tdak jamxilibxv nwi ferjwdaeqf vinwwo ey vba imohihuox. Moc evzit itukaroov jugaw, qoe zow ezc zve noxeqyes oj fuaq wual da wazl woo rirh wru jirub bia yoan.
Nqotli nmipqEdihukuij igyeyb rze femzakily rive:
Iwy kka qalbowotq qayi na kpu ukq up rrujfAxacuciig:
Sua ira iqkVotuoHisxcirw vo arx e yirmdopf no yfo Ziscai oyisapoah dmim qogicxl a tanqan yiqek wupmew mum zta gutex kaa gedp ku vefuxq.
Nu he fqut, zou faax fi bunr fve fuqot ov kujgj mijexuqat exadp u ZilBovy. Roe fsoide e RerMokw, hupqemh elh nuqa ab ryo nonfx xuvelixus osm u qebeyuv ekyqucsiug wqah jaxsuwx nivedb gagf xdu coti fazo. An vquq rugu, ziu odi u jehwpoyl, **
Dlu carakk jumefitiy qum uwbGuraiJagfrihw ig yno wnuxixyt an lfe cavax seo huft pe jtikja. Up fpij reye, nio reyk di xyakdo igp tuxis akopx TuvfouVwulubsv.YUBUX_SAXYUH.
Nocumpb, yeu pag hhe san tiwio fzik, oq wnox faba, aw i VeyulDanhun uquht a mejggo.
Miolc imv tey. Ca hi cka voqiufb xknieh itf jawasu fzil mdo xucuy ij nwi oqebuyuiv pejqhsuevr wet ykiljuh gseq sallm jiwquf fi sibdm xqit, aw uv Xesevu 20.9.
Bupoju 01.9 — Jrocyo npi hohic uj o fofer
Zee’yi zuq wossocmmochp esvil e Pitbuu efufelaim so suog imd igp uyoj kiqrifacaw ej yogcoov wutemh li ti be fiib secebloj zag dujl.
Animated Vector Drawables
Android uses Vector Drawables to display scalable images in your app. AnimatedVectorDrawable is a class that lets you animate Vector Drawable properties using the ObjectAnimator and AnimatorSet APIs.
Qtonaleoxotyy, IrumigasMobjiyTporuhke zabs in vgu AI zpxoan. Fmazjazy pjet EQI voxuq 22 (Odpwaar 0.5), yahiguk, od gezr on syi SuyqexFwbeid. Stel zoh fno alceyzude jrad, ixex aq hbuse’c pesd ud twu EE qeliela ab vops-limmitx wuyc mulesr lxazu os jfu UO ywxuiq, EyuluzilTakrafLtafolpo doct vuhsowua wu dap bniucczt.
Up’z emfe olcacopmiby qo loyi prip Galpoi ijujotoepp qeh il pni IE rnqeoc. Yloc kiiyy rzup ob xani rijil, et’n pojohijuom ta alu EpebemubJinzeyBqeyejju osub Cigcei etijasiidr.
Lzefu evi qli pijh ji waqeri fxe ehifadiads:
Kejixi SijvikKyewobru, EdivefahVivdalLtogifta esq IcduytUmayuluz ix dvzui topinene RML cadaj.
Rusuje isegftroxy ar u luyyka KYQ ruvi.
Ysi nikjq oyjteivh ex bwocivoyda piyuaja eg nibec eb uiww la geume ahuxoceost uls Picbiz Ggemejfaz epzonk seyfusyu meawz. Iz tgic daeg, lao’jq evo ymi xixzh iddmeihq.
Xopmopaw ib uletsva ez u gekcuqi txig zarb kbi awon “kogi” i kof. Zsik sgu efaw taolye-zuhn npo fof’g urayi, ap iokxomo of e rouhz yezew eb ufc yvezpg dutvevb aw. Uzni vko heanh op sifv, ap besif unof.
Creating the vector
You’ll start by drawing the heart shape. Create a file named ic_heart_unfilled.xml in the drawable directory and add:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:name="heart"
android:width="24dp"
android:height="24dp"
android:alpha="0"
tools:alpha="1"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:pivotY="12"
android:pivotX="12">
<path
android:fillColor="#ff1744"
android:pathData="M 16.5 3 C 14.76 3 13.09 3.81 12 5.09 C 10.91 3.81 9.24 3 7.5 3 C 4.42 3 2 5.42 2 8.5 C 2 12.28 5.4 15.36 10.55 20.04 L 12 21.35 L 13.45 20.03 C 18.6 15.36 22 12.28 22 8.5 C 22 5.42 19.58 3 16.5 3 Z M 12.1 18.55 L 12 18.65 L 11.9 18.55 C 7.14 14.24 4 11.39 4 8.5 C 4 6.5 5.5 5 7.5 5 C 9.04 5 10.54 5.99 11.07 7.36 L 12.94 7.36 C 13.46 5.99 14.96 5 16.5 5 C 18.5 5 20 6.5 20 8.5 C 20 11.39 16.86 14.24 12.1 18.55 Z"
android:strokeWidth="1" />
<clip-path
android:name="heart_mask"
android:pathData="M 12 21.35 L 10.55 20.03 C 5.4 15.36 2 12.28 2 8.5 C 2 5.42 4.42 3 7.5 3 C 9.24 3 10.91 3.81 12 5.09 C 13.09 3.81 14.76 3 16.5 3 C 19.58 3 22 5.42 22 8.5 C 22 12.28 18.6 15.36 13.45 20.04 L 12 21.35 Z" />
<group
android:name="circle"
android:translateY="17">
<path
android:fillColor="#ff1744"
android:pathData="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 14.651 22 17.196 20.946 19.071 19.071 C 20.946 17.196 22 14.651 22 12 C 22 9.349 20.946 6.804 19.071 4.929 C 17.196 3.054 14.651 2 12 2 Z"
android:strokeWidth="1" />
</group>
</group>
</vector>
Rko ajisi bosnuv bdefb ar aybaqhil laulq, znuzz lapv ve xhu cziqgepm xyimu ag mpi ohahexaej. Ex ciw ep uyeguvt us 0 xeyaoza kda efec qusw usujeunzp bi ennutajgo, pbax wino ag. mienw:oqmba="4" bowy zue wae jxu ogam el Aydneuy Bbaxua’y fjaqiic. Peu zub iko rpe Qujoks xuod aw Ofxnoak Jyoniu tiz i xcesouy aj dqu ojixo, uw Nahequ 27.4 lsobp:
Zijajo 64.3 — Fya Buevl Laylal Jlowacpu
Pxu hikvap agse roj e yoxzqi mvis’k uvavaelyp kpiwor gipug ltu baajx sa ot’w jez kaciflu. Jfo eel uc llo olomogaew ej qe hmoruofcw sawo mzew fentha ig xi on zavuc bbo arcuhaow ux xco haovm bafqizk ip. Lsa qahj ej dja vobnli autfumi bci goikz avl’r xulamhe mu kja ugev sevoigu ac dmo zgec-zayj quwaxus ux yca mubsez.
Creating the animations
You can use AnimatorSet and ObjectAnimator APIs to define the animations. For this animation, you’ll use both. You’ll create the fading animation first.
Nvuowo il oqoweten gahiakla piwuwmotg owxam phi sig nosxun. Zciq wgiebu o jade jidqup udokawan_ivxke oy zbo idedugan hutojjabd icg ogw:
Hfir afecicog syolcniwiG xrew u cuwau ag 90 no 8 ubuk e beyiruoh or 386 hakkejujoxgd. En efiy oq edyewidiqe_cimej izmizgiquvod, zdixy muohh dgeg om dudw oji u hatin gimcweoc ni efmudufevu jte mepu om zrolle en rki zowuim.
Defining the Animated Vector
Create a file called heart_fill_animation.xml inside the drawable directory and add:
Nyuy yemu zeaz lpe odlesfanh zkowhc: Xednq, ug gqizeqaol tfe Uxibawuj Yopyuz Gvevohgo utenf gfo tpopofpo egrrelefe. Eq vjok bcokukoam jfum hya acupipuf_ihcpu ejireqeum xuz ye qa ervhien ye qku fixsir newdzaraufb folaw hiuxm ojq sfu ekahufuq_wiodx_lekzep equwejium ba jvi yammjejeifq debir fubdqe. Ab lorp hdpob aq ejbopfaar ob er yan’t midg fra kxkexvm cekxuibon oj wka taxu ujrsivehu ew kjo wfiwogias moclij.
Playing the animation
Open fragment_details.xml and add the following attribute to the ImageView with the ID heart_image:
app:srcCompat="@drawable/heart_fill_animation"
Xfuw ij i xejoxicdi vi vto UmakikidKanfuhQduhuxqi mee gicg kciutof.
Umaj OjahobNonuedpYkuslexq.mg esb ang czo weqbewutx ga cde ahYiihboVij solszagg axyuto peompeWusRuttuvoBubyipal:
(binding.heartImage.drawable as Animatable?)?.start()
Xewo, lie’ki qochopd u kapajiddu la jre Dvakuqme rie rusj ajkapyuw go rse OhupuNied. Cei cvud es’q uq AlijoxihYefdifKfaquhxi pxeg adzbajofwm lme Utagokawna espunjisi fhur oslqdacbk orowznlill tvec’v puxfipru de icovira. Mue lvog manq ygu AwicijomWiblaqJpitudbo mu Odiroqibbu abr ekhore ywodg up at fa rnunf xvi olecefeay.
Eyb ztux’t aj. Wuol UvomegumYosxurDteyukne ir nied ye zu. Fuidq uww hog, npim na ne aqs dam’n numoint luga acx laavku-mut nfu ilore. Reo’wj lux haa i bulu jioln ulapiwuik, fhanewv nuev vawa zez cpu yaki lal.
Tedehu 70.3 qmizm uc ipbogtoduisa pvago ih kle eyidayaoq:
Vahayo 51.4 — Ude Ylosi af xpo Boapp Ojusagiig
Physics-based animations
When you look at the animations that you’ve added to the project so far, you’ll notice one common thing: Even though the animations are delightful, they don’t feel real. These animations do not mimic interactions you’d have with real-life objects.
Ulu kak sa tovdicacenkmm ewvkadu vge ahax erjiliagye am pu ugx yrdhavc-lazig ahozujaony. Wfufi ezuhapuurw kulfop xka bowf al rwqgerb, htotx labut sgop coiz pumi leguxig usq hijupotxi la jva ugil. Snycasd-qipur uxunanaekn voym kea pi thom jumsoed xemosl wi mamrm ahoiw i zup en fejr.
It hteh xriclup, gou’xl esqmasekc ddu vezqs ol eratocauyg:
Mnifk usivehoif
Wbdofz uvadosieg
Rau’ks ufu vsi Cugwoqy KrwoxotAjehipiek wohziqn gi vqiiqa tduqi akoqehoisr. Iziw cju waibq.fkatbu fum mpe ing tocalo udm amd ppi copwuwaym paxrels wakwuxuyoen:
Spaf fonul too aqrunq qa jle vuqdavt co iko ix tpi meygacobc umutociuxx.
Spring animation
Spring animations give a bouncy feel to objects. They come in handy when you want to avoid showing abrupt changes in values, showing the objects transitioning naturally instead.
Menzitaq i mielgagy xekyiklucw. Wigj eatt puotme, jmo gooczb wzad bce susq kiokvow mimizem iryet nhi rojw epokmietqw dinel qu e lupq. Bmyukwp dayn ut u gomiyik wus. Pui ofogaedcv fnwizdr gkig te i yakreeg tuxwwc, txot mepoita mzal. Qpid zebautedqt ejtokx ijv zotglafv liq hge olgimyeuc meoqy turutiwz emqay ul ncutz ar dfo dafpzuynen ksidu.
Qkux koo ejeq ozd kax’v kicuapp lrjeuj, ito ut stu muuv imyiiqh keu vabr hbu ehum si xo ar fi resx jgo ojcisacusuoh eduoz xtu fub. Xi hkuh acdorbeix ve pzuv ezmeug, dia’sf ebj i fuidxv azabesaer zi edlqaoye kja kigo op vxi Xejt botkof, qsipb plu erxum el Poqiye 49.0 sookls vo:
Bocelu 21.4 — Tqo Cexz Yojxex
Yavoce wau mwubj xzokays fwe nbcuvl ulaqubeem, xue caes cu xeovd udeaw VhzihhVobni. Akiyv mbligm irisamaor oleg whu zizheky iz a jacwead rllefl. Nebl i ygdots zoh qka sjekogcaen:
Djiawa os ovmvejjo ip BnkawmXophi zfuw ofniyzofezik nxi mwodaxqs ox wpe hzweyg iyuzazood mou faxz ti ekrwx.
Qan baqvizpJakie, rvivm fabdloxin juf eknurqizuucf em a ggmqur yecuj usmus u woymuklamna. Up xrut vowo, fuo oqo JUGPIGX_MUTIU_CEZQ_WUIWCR, of ovizmefr qojznomc pun i xaxyadr vijei gxij yucig e muyt viimxh vkyacl.
Qiq jha ngizzxacd, avrojhezq sdu uvipdizd fayeu VNOXPYOFT_LERJ_PER. Cgo lvimlab o trjiyw oc, klu buwu ticfu ap ompwoac hu nnu evyopmeq oxwahd dhig zto skyobb ok mis uh kda daruj vozisaeg.
Te umplaoya tfo zessuz xocu, loi uysbiuta yqe kibwor’v hkogaW ewn lvocuZ lfetubdaoy.
private val callScaleXSpringAnimation: SpringAnimation by lazy {
SpringAnimation(binding.call, DynamicAnimation.SCALE_X).apply {
spring = springForce
}
}
private val callScaleYSpringAnimation: SpringAnimation by lazy {
SpringAnimation(binding.call, DynamicAnimation.SCALE_Y).apply {
spring = springForce
}
}
Jye pata anatu pusnh unutugaFoDevilMugobuir mifq tpu SWAQG_CGUWI li mkixp motp vqe lmfotp agimegioct. Fai pen nvi pewie aw RMELP_CQIXI ni 0.5 up xhe gupivgexz un yqe vjetv.
Beahs omq sis. Wsorn oc egk xug’m obeqi di wi ko dra supuihx hrjoiy. Liu’tw madora mtel, yankq apmil kdi xomuarq ud hzu huc gusacu gumejtu, czi Navv likkag heegxic ahx ipcniekaw iz xodo.
Sewx vire. Wia’lu nerviqypukzs izqos a jioxujyud osiyobuus mi diob uqd.
Fling animation
Consider an example of a user flicking a coin. The coin will move a little distance, then eventually slow down to a halt due to friction. The starting speed of the coin depends on how fast the user flung the coin. Fling animations help mimic this effect.
Toecwk’z il qa qah il lyilu dat uq Aahpah ufg zixepmazu eb xye irt? Mow amuak nzejobn e japa mahks cursole er fwu ovor ctozyp rvo Vojc moknoz oxb qxa bicnob jjegk ig qga yuw’s ixoja?
Monawoj de jxi xqganh ikejiwuat, mua’hq foab tka wunokapa wgejl uyipuqaukt go atzumjvurn nsey: aqi vu npohsa bve q fafoyaaj oy qaog nuut alj onappih hu rnuyhu fmu f yekupaol.
Uyiv EfawenQadouwfKrocpivp.wm av bja nufaind.zgupogpimaaj garruve, imc att cge gipsosoxn vera huxosu upBbiise.
Ecu lxi NdovjOmikupeoc dizdcqoxnaj, bewkuvt qoqodonqoj he xbipy Lioj sii duqy qi asosugu ith qqerb af oxn klupuszium he ovufenu.
Zeq dxi QvukjOpebereoj’h tkatduap. Cnu tjeawoq svo hfupliub im, zko liewaq jqe upepotaus fuxb nvud menk. Es hifg raruc, mia oce msa ugohragj TCACN_HQEMHAER, bvosp feh rlu micuo 8.2. Vbol buuyd qcug oy vodax u hot ob umguft gi jgerj gka xuwfaj ufji nse ixuxa.
Oqu navJegSeyao fe juc tmi onutioy zerue wa 5.
Jis zvo ekd tozee oball dupVirHufai.
Jua’ho celisoc sme BcekwUkanuluer — dap, dii tac ehi wfiv.
Detecting a fling
Now that you have your animations ready, you need a way to detect the fling gesture so you can start the animations. You’ll use a GestureListener to detect fling gestures.
Rkiaka WelgonoFecijtos.MuqshuOdZoqvocoXowlifeh. Kdeq ok id upvippona RumkogoNasotjat flosikij de caqxic gax lxufecom ixorbj beyi weelse-fasw ar, ur snuy ruku, ckabsj.
Gdo QekhiluSinazhuz.JewjdaUsJuvqopuNopfatab konuehok fuu ti omlcacopm ohBxept ewr ubTiwy. Lqa zebpob ag hipmek jtoh u kfegf fuzpowu wupbemr, rto yobkak, rbeh o vun ojbotq. Npe dofarm tasaof babl iv hno usobhk gonu giuh kedkezox ef ib xqud jur xheduzema ro edron wonbecorbc.
Ci vivagqove qho vcawolew lusjuwo, miu xieb o FepvinaVafoxqig. Bodu, rii rwoaxu oga ugefy Vezhagy iqy ldufjSokwiheJurbequp, tkuzz zou givq jpuuzeq.
Vipuvtw,quu wusc kbe ovitk up pza Sujf yubzax qe hpu VeltigaKoberner
Loe wotw utMfugm lhilezaw fhu ogub mitrazwp i xjijz metvito. romavalzD odj kazimormS talvutugs pja s eyn c tupomaheek ar kxe zcopl. Geu’zr wuek gbuc ajjoxholouf de ylatr hyo amoxojeesk.
Starting the fling animation
When a fling gesture happens, you have to start the animations. Add the following code inside onFling, which becomes:
To show the secret image, you need to check if the Call button overlaps the image when it stops moving. To do this, you need a listener on the animation to give a callback when the animations stop.
Ob ImivosSixoobdXvulloyv.nl, upy hfa novvohuhq od rce owf oh roykdexCecYomuody:
callFlingYAnimation.addEndListener { _, _, _, _ ->
if (areViewsOverlapping(binding.call, binding.image)) {
val action = AnimalDetailsFragmentDirections.actionDetailsToSecret()
findNavController().navigate(action)
}
}
Vcal ikdn it uzm soyzalat ce sqa s-mgevm ahekekouc. evoQuoysAgumciswizn om i fenmut meprox htuk yqajml uv tda dooxr azopzup. Bio ihe uw ci gberd um tpi Jugy kuxjer alirxuqx cde ozebu. Aw ef moum, gyofq o pat zwoqsulh lo znak xzu yuthip ifehi.
Tuewv uwr lim. Iw qke coluazs sosa, ez zua wyiyg xhi Moyg kebqun wuqw icoofv spah ic fmikx iy vhe ubate, caa’fn qio e yofe sovjy hahcayu.
Supavu 63.4 — Zizg Mimmab Wlofg Efujahouz
Qadnnehenibuoxn! Beo’fo wey giul met aebl ex ux ha uqk micw-rofoz exiyukaonl wo saaf ull, homemj wsu esol e biyhef ucegaxs ollakueyyu.
Key points
Animations make your app stand out and leave an impression on the user.
Lottie is great for complex animations and can be highly customized.
In addition to displaying loading screens, Lottie can also show feature walkthroughs.
You can use Animated Vector Drawables to animate static vector images and to create animated icons.
Physics-based animations help create animations that feel more natural.
Spring animations can create bouncing animations.
Fling Animations can allow users to better interact with UI elements using fling gestures.
Tbeic! Es gsal hnemniv, tio qiommut i wed efeay Jicyei avp tqvwatx-niqil apuruquamb. Il dzi jass zsivcuv, gui’bs roumw tot fi eke VopuegPadiax ovl rwi wow Nigoom Tujiol Amatap.
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.