Kako ustvariti animacijo Bounce za Android

Tukaj na MREŽE , so naše stranke odvisne od nas, da jim pomagamo zanesljivo upravljati z vsebino v družabnih medijih. Stranke Sprout uporabljajo naše mobilne iOS in Android aplikacije, da lahko upravljajo svoje družabni mediji na poti . Ko smo se odločili, da posodobimo naše Android sporočilo Sestavi izkušnjo za podporo založništvo več slik, pripetih k tweetu, smo želeli uporabniku pojasniti, kdaj je priloženih več slik, tudi če niso vidne na zaslonu za sestavljanje.

Rešitev za oblikovanje: z animacijo označite slike zunaj zaslona

Glede na našo zasnovo in omejitve mobilnega zaslona je bilo mogoče, da so priložene slike zunaj zaslona. Čeprav to ni idealno, je bila potrebna koncesija glede na gostoto podprtih funkcij na zaslonu za sestavljanje. Za primere, ko so slike dejansko zunaj zaslona, ​​smo se odločili, da bomo izvedli vodoravno animacijo 'odbijanja', ki bo pokazala, da je seznam slik mogoče premikati.

Izbira izvedbe: ObjectAnimator + EasingInterpolator

Obstaja veliko mehanizmov za podporo osnovnih animacij v Androidu. Nekateri zahtevajo konfiguracijo v kodi, drugi v xml. Pri izbiri alternativ smo se odločili dati prednost združljivosti za nazaj (podpiramo različico sdk 15+), enostavnosti izvedbe in prilagodljivosti. Na koncu smo se odločili za kombinacijo ObjectAnimator in EasingInterpolator . Oboje je mogoče konfigurirati v kodo Java, ki je na koncu bolj prijazna za razvijalce: sintaksa je znana, animacijsko logiko pa je mogoče popolnoma definirati na enem mestu v kodni bazi.

ObjectAnimator je razred, ki ga zagotavlja ogrodje Android, ki omogoča spreminjanje lastnosti pogleda. Ker se gibanje privzetega interpolatorja za ObjectAnimator ni zdelo naravno za naš primer uporabe, smo se odločili za uporabo EasingInterpolatorja, ki je priročna knjižnica, ki ponuja veliko različnih modelov interpolacije.

Koda animacije Bounce

private void doBounceAnimation(View targetView) { ObjectAnimator animator = ObjectAnimator.ofFloat(targetView, 'translationX', 0, 25, 0); animator.setInterpolator(new EasingInterpolator(Ease.ELASTIC_IN_OUT)); animator.setStartDelay(500); animator.setDuration(1500); animator.start(); }

Na srečo je koda za ravnanje s tem vedenjem zelo jedrnata. V 1. vrstici določimo, kako želimo animirati targetView. V tem primeru želimo spremeniti lastnost “translationX” za targetView, ki je položaj x pogleda po postavitvi. Želimo animirati od odmika 0dp od začetnega položaja do odmika 25dp v desno in se na koncu vrniti k prvotnemu zamiku 0dp.

V vrstici 2 določimo vrsto interpolacije, ki jo želimo. Igrali smo se z različnimi modeli interpolacije, vendar smo se na koncu odločili, da je Ease.ELASTIC_IN_OUT najbolj primeren za naš primer uporabe.

Za več informacij o podpori animacije lastnosti v Androidu si oglejte Razvijalec nepremičninske animacije doc .

Animacija v akciji

Resnično smo veseli naših posodobitev izkušnje sestavljanja za mobilne naprave. V prihodnosti načrtujemo, da bomo svojo mobilno izkušnjo še naprej bogatili z odzivnimi vizualnimi vmesniki. Vas zanima tovrstne zadeve pri nas? Pridi sodelujte z nami v naši mobilni ekipi za Android!

Delite S Prijatelji: