Jak přidat efekt lesku a oslnění na ImageView

Zářivý efekt na zobrazení snímků pomocí kliknutí na tlačítko

Poprvé jsem viděl tento efekt oslnění na flipkartové aplikaci a na webových stránkách. To byl atraktivní efekt a já jsem přemýšlel, jestli bych mohl implementovat stejný v mé aplikaci pro Android. Koncept je sice jednoduchý, přesto mě to přitahovalo. Tento příspěvek může být užitečný pro začátečníky, kteří chtějí tohoto efektu dosáhnout ve své aplikaci pro Android.

Co se vlastně děje v této animaci?

Tohoto efektu je dosaženo pouze převedením kreslitelného (oslnění) přes zobrazení snímků s určitými časovými a interpolačními omezeními. Nyní jste mohli vidět, jak je to jednoduché, začněme tedy provádět to samé:

Krok 1: Sestavte základní rozložení xml pomocí zobrazení snímků a tlačítka (pouze pro zobrazení efektu lesku znovu a znovu pro testování).

Ukázkový kód je následující:





    

        
    


    

Můžete se zeptat, proč umístím zobrazení obrázků do jiného relativního rozložení. Zjistíte, kdy přidám záblesk vytahovatelný.

Krok 2: Získání 'lesk' 'kreslitelné. Flipkart ve skutečnosti používal png drawable pro efekt lesku, který byl dříve generován ve photoshopu. K tomu však použijeme samotné XML systému Android. To lze snadno dosáhnout pomocí tvaru> Gradient. Vykreslovatelný kód efektu oslnění vypadá takto:



    

Náhled bude vypadat asi takto:

zářící

Pozorujte, že přechod je tvořen třemi barvami, které jsem si vybral, „středovou“ jako „bílou“ s určitou průhledností, zatímco zbývající „koncová“ a „počáteční“ barva je průhledná. Tento kreslitelný soubor přesahuje zobrazení snímků, které dává požadovaný efekt oslnění.

Krok 3: Přidejte tuto kreslitelnou část do xml.





    

        

        
    


    

Krok 4: Kódujte překladovou animaci pro zobrazení „shine“ (s id: shine). Vložte tento kód do clicklistener () tlačítka. Ukázkový kód je uveden níže:

findViewById (R.id.button) .setOnClickListener (nové zobrazení.OnClickListener () {
    @Override
    public void onClick (Zobrazit v) {
        Animace animace = nová TranslateAnimation (0, img.getWidth () + shine.getWidth (), 0, 0);
        animation.setDuration (550);
        animation.setFillAfter (false);
        animation.setInterpolator (nový AccelerateDecelerateInterpolator ());
        shine.startAnimation (animation);
    }
});

Co dělám, je vytvořit překladovou animaci, ve které překládám lesklé zobrazení snímků se vzdáleností X rovnající se „šířce lesklé kreslitelné“ + „šířky zobrazení na pozadí“. Nyní lze odpovědět na otázku, proč vkládám zobrazení snímků do relativního zobrazení? Ve skutečnosti tento rodič bude nyní působit jako ořezový obdélník, takže vytažení lesku nebude vidět za hranice obrázku. Tuto chybu lze vidět, když je pozadí rozvržení černé nebo jiné barvy než bílé.

Hurá! Dosáhli jste lesku. Gratuluji…

Výše uvedený ukázkový kód je na git: https://github.com/apgapg/ShineEffect.git

Tento efekt se aktuálně používá v jedné z mých aplikací s názvem „Reweyou“: https://play.google.com/store/apps/details?id=in.reweyou.reweyou