Как да добавите блясък / ефект на отблясъци върху ImageView

Блясък ефект върху Imageview с натискане на бутон

За първи път видях този ефект на отблясъци в приложението и уебсайта flipkart. Това беше атрактивен ефект и се чудех дали мога да го прилагам в приложението си за Android. Концепцията е макар и проста, но въпреки това привлече погледа ми към нея. Тази публикация може да бъде полезна за начинаещи, които искат да постигнат този ефект в приложението си за android.

Какво всъщност се случва в тази анимация?

Този ефект се постига само чрез превеждане на чертеж (отблясъци) върху изображение с някои времеви ограничения и ограничения на интерполаторите. Вече можете да видите колко просто е това, така че нека започнем да прилагаме същото:

Стъпка 1: Конструирайте основния xml оформление с изображение и бутон (за да покажете ефекта на блясък отново и отново за тестване).

Примерният код е такъв:





    

        
    


    <Бутон
        андроид: ID = "+ ID / бутона"
        андроид: layout_width = "wrap_content"
        андроид: layout_height = "wrap_content"
        андроид: layout_alignParentBottom = "истинска"
        андроид: layout_centerHorizontal = "истинска"
        андроид: layout_marginBottom = "100dp"
        андроид: layout_marginTop = "32dp"
        android: text = "SHINE" />

Може да попитате защо поставям изображението в друг относителен план. Ще се запознаете кога ще добавя отблясъците.

Стъпка 2: Получаване на „блясък“ за рисуване. Flipkart всъщност използва png чертеж за ефекта на блясък, който преди това беше генериран в Photoshop. Но ще използваме самия XML на Android, за да генерираме това. С помощта на форма> Градиент това може да се постигне лесно. Кодът за изтегляне с ефект на отблясъци изглежда така:



    <градиент
        Android: centerColor = "# AAffffff"
        Android: endColor = "# 00ffffff"
        android: startColor = "# 00ffffff" />

Визуализацията ще изглежда така:

блясък черен

Наблюдавайте, че градиентът е направен от три цвята, от които избрах, цвят „център“ като „бял“ с известна прозрачност, докато останалите цвят „край“ и „старт“ са прозрачни. Това чертожно надвишава изображението, което дава желания ефект на отблясъци.

Стъпка 3: Добавете това изтегляне към xml.





    

        

        
    


    <Бутон
        андроид: ID = "+ ID / бутона"
        андроид: layout_width = "wrap_content"
        андроид: layout_height = "wrap_content"
        андроид: layout_alignParentBottom = "истинска"
        андроид: layout_centerHorizontal = "истинска"
        андроид: layout_marginBottom = "100dp"
        андроид: layout_marginTop = "32dp"
        android: text = "SHINE" />

Стъпка 4: Кодирайте анимацията за превод на „shine“ viewview (с id: блясък). Поставете този код вътре в clicklistener () на бутона. Примерният код е даден по-долу:

findViewById (R.id.button) .setOnClickListener (нов View.OnClickListener () {
    @Override
    публична невалидност onClick (View v) {
        Анимация за анимация = ново TranslateAnimation (0, img.getWidth () + shine.getWidth (), 0, 0);
        animation.setDuration (550);
        animation.setFillAfter (фалшива);
        animation.setInterpolator (нов AccelerateDecelerateInterpolator ());
        shine.startAnimation (анимация);
    }
});

Това, което правя, е създаване на анимация за превод, в която превеждам изображението на блясъка на изображение с разстояние X, равно на „ширината на блясъка, която може да се рисува“ + „ширината на фоновото изображение“. Сега на въпроса може да се отговори защо затварям изображението в относително платно? Всъщност този родител сега ще действа като изрязващ правоъгълник, така че блясъка, който може да се рисува, да не се вижда отвъд границите на изображението. Тази грешка може да се види, когато фонът на оформлението е черен или друг цвят, различен от бял.

Ура! Постигнахте ефекта на блясък. Поздравления…

Горният примерен код е на git: https://github.com/apgapg/ShineEffect.git

Понастоящем този ефект се използва в едно от моето приложение, наречено „Reweyou“: https://play.google.com/store/apps/details?id=in.reweyou.reweyou