Här på HASHTAGS , våra kunder är beroende av oss för att hjälpa dem att på ett tillförlitligt sätt hantera sitt sociala medieinnehåll. Sprout-kunder använder våra mobila iOS- och Android-applikationer så att de kan hantera sina sociala medier på språng . När vi bestämde oss för att uppdatera vårt Android-meddelande Compose-upplevelse för support publicering flera bilder bifogade till en Tweet, vi ville göra det tydligt för användaren när flera bilder bifogades, även om de inte syns på skärmen Skriv.



vad betyder 9

Designlösning: Använd animering för att beteckna bilder utanför skärmen

Med tanke på vår design och begränsningarna för en mobil skärm var det möjligt för bifogade bilder att ligga utanför skärmen. Även om detta inte är idealiskt, var det en nödvändig eftergift med tanke på densiteten hos den stödda funktionaliteten på Compose-skärmen. För tillfällen där bilder i själva verket är utanför skärmen bestämde vi oss för att genomföra en horisontell 'studsande' animation som skulle indikera att listan över bilder var rullbar.



Implementeringsval: ObjectAnimator + EasingInterpolator

Det finns många mekanismer för att stödja grundläggande animationer i Android. Vissa kräver konfiguration i kod, andra i xml. När vi valde bland alternativ bestämde vi oss för att prioritera bakåtkompatibilitet (vi stöder SDK version 15+), enkel implementering och konfigurerbarhet. I slutändan bestämde vi oss för att använda en kombination av ObjectAnimator och EasingInterpolator . Båda dessa kan konfigureras i Java-kod, vilket i slutändan är mer utvecklarvänligt: ​​Syntaxen är bekant och animationslogiken kan definieras fullständigt på en plats i kodbasen.

ObjectAnimator är en klass som tillhandahålls av Android-ramverket som möjliggör modifiering av en egenskap för en vy. Eftersom förflyttningen av standardinterpolatorn för ObjectAnimator inte kändes naturlig för vårt användningsfall, bestämde vi oss för att använda EasingInterpolator, vilket är ett praktiskt bibliotek som erbjuder många olika interpolationsmodeller.

android-bounce-animation-easing-sample

Bounce Animation Code

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

Lyckligtvis är koden för att hantera detta beteende mycket kortfattad. I rad 1 specificerar vi hur vi vill animera targetView. I det här fallet vill vi ändra 'translationX' -egenskapen för målvisningen, som är vyens x-position efter layouten. Vi vill animera från en offset på 0dp från utgångsläget till en offset på 25dp till höger och i slutändan komma tillbaka till den ursprungliga offset på 0dp.

I rad 2 specificerar vi vilken typ av interpolation vi vill ha. Vi lekte med olika interpoleringsmodeller, men bestämde oss till slut för att Ease.ELASTIC_IN_OUT såg bäst ut för vårt användningsfall.

1155 nummer nummer
HASHTAGS Android Bounce Animation in Compose

För mer information om att stödja egendomsanimering i Android, kolla in Fastighetsanimeringsutvecklare doc .



nummer 611 som betyder

Animering i aktion

Vi är väldigt glada över våra uppdateringar av Compose-upplevelsen för mobilen. Framöver planerar vi att fortsätta berika vår mobilupplevelse med responsiva visuella gränssnitt. Intresserad av att arbeta med den här typen med oss? Komma jobba med oss på vårt Android-mobilteam!

Dela Med Dina Vänner: