Her på HASHTAGS , vores kunder er afhængige af os for at hjælpe dem pålideligt med at styre deres sociale medieindhold. Sprout-kunder bruger vores mobile iOS- og Android-applikationer, så de kan administrere deres sociale medier på farten . Da vi besluttede at opdatere vores Android-besked Compose-oplevelse til support forlagsvirksomhed flere billeder knyttet til en Tweet, vi ønskede at gøre det klart for brugeren, når der var vedhæftet flere billeder, selv når de ikke var synlige på Compose-skærmen.

Designløsning: Brug animation til at betegne billeder uden for skærmen

I betragtning af vores design og begrænsningerne ved en mobilskærm var det muligt for vedhæftede billeder at være uden for skærmen. Selvom dette ikke er ideelt, var det en nødvendig indrømmelse i betragtning af densiteten af ​​understøttet funktionalitet på Compose-skærmen. I tilfælde, hvor billeder faktisk er uden for skærmen, besluttede vi at implementere en vandret 'bounce' -animation, der ville indikere, at listen over billeder kunne rulles.

Implementeringsvalg: ObjectAnimator + EasingInterpolator

Der er mange mekanismer til understøttelse af grundlæggende animationer i Android. Nogle kræver konfiguration i kode, andre i xml. Ved valg af alternativer besluttede vi at prioritere bagudkompatibilitet (vi understøtter sdk version 15+), enkelhed ved implementering og konfigurerbarhed. I sidste ende besluttede vi at bruge en kombination af ObjectAnimator og EasingInterpolator . Begge disse kan konfigureres i Java-kode, som i sidste ende er mere udviklervenlig: Syntaksen er kendt, og animationslogikken kan defineres fuldstændigt et sted i kodebasen.



ObjectAnimator er en klasse, der leveres af Android-rammen, der muliggør ændring af en egenskab for en visning. Da bevægelsen af ​​standardinterpolatoren til ObjectAnimator ikke føltes naturlig for vores brugssag, besluttede vi at bruge EasingInterpolator, som er et praktisk bibliotek, der giver mange forskellige interpolationsmodeller.

hvordan man får betalt for at promovere på instagram
android-bounce-animation-easing-prøve

Bounce-animationskode

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(); }

Heldigvis er koden til håndtering af denne adfærd meget kortfattet. I linje 1 specificerer vi, hvordan vi vil animere targetView. I dette tilfælde ønsker vi at ændre egenskaben “translationX” for targetView, som er visningens x-position efter layout. Vi vil animere fra en forskydning på 0dp fra startpositionen til en forskydning på 25dp til højre og i sidste ende vende tilbage til den originale forskydning på 0dp.

I linje 2 specificerer vi den type interpolation, vi gerne vil have. Vi legede rundt med forskellige interpolationsmodeller, men besluttede i sidste ende Ease.ELASTIC_IN_OUT så bedst ud til vores brugssag.

HASHTAGS Android Bounce Animation i komponere

For mere information om understøttelse af Property animation i Android, se Ejendom Animation udvikler dok .

Animation i aktion

Vi er virkelig glade for vores opdateringer til den mobile Compose-oplevelse. Fremadrettet planlægger vi at fortsætte med at berige vores mobiloplevelse med lydhør visuelle grænseflader. Er du interesseret i at arbejde på denne slags ting sammen med os? Komme arbejde med os på vores Android mobile team!