كيفية إضافة تألق / وهج تأثير على ImageView

تألق تأثير على Imageview بنقرة زر

رأيت لأول مرة هذا التأثير الوهج على التطبيق وموقع flipkart. كان هذا تأثيرًا جذابًا وتساءلت عما إذا كان بإمكاني تنفيذ نفس الشيء في تطبيق Android الخاص بي. المفهوم بسيط ، لكن ذلك جذب انتباهي إليه. قد تكون هذه المشاركة مفيدة للمبتدئين الذين يرغبون في تحقيق هذا التأثير في تطبيق android الخاص بهم.

ما الذي يحدث بالفعل في هذه الرسوم المتحركة؟

يتم تحقيق هذا التأثير فقط من خلال ترجمة نص (وهج) فوق عرض سينمائي مع بعض القيود الخاصة بالوقت والمحرف. الآن يمكنك أن ترى مدى بساطة هذا ، لذلك دعونا نبدأ في تطبيق نفس الشيء:

الخطوة 1: قم بتكوين تخطيط xml الأساسي باستخدام صورة ظلية وزر (لإظهار تأثير التألق مرارًا وتكرارًا للاختبار).

يشبه نموذج التعليمات البرمجية:

<؟ xml version = "1.0" encoding = "utf-8"؟>



    

        
    


    <زر
        الروبوت: معرف = "@ + معرف / زر"
        الروبوت: layout_width = "wrap_content"
        الروبوت: layout_height = "wrap_content"
        الروبوت: layout_alignParentBottom = "صحيح"
        الروبوت: layout_centerHorizontal = "صحيح"
        الروبوت: layout_marginBottom = "100dp"
        الروبوت: layout_marginTop = "32dp"
        android: text = "SHINE" />

قد تسأل لماذا أضع imageview داخل relativelayout آخر. سوف تعرف متى سأضيف الوهج القابل للدوران.

الخطوة 2: الحصول على "تألق" قابل للفك. فليبكارت فعلا تستخدم بابوا نيو غينيا drawable لتأثير تألق الذي تم إنشاؤه سابقا في فوتوشوب. لكننا سنستخدم XML لنظام Android نفسه لإنشاء هذا. بمساعدة الشكل> التدرج ، يمكن تحقيق ذلك بسهولة. يبدو تأثير التعليمة البرمجية للوهج على النحو التالي:

<؟ xml version = "1.0" encoding = "utf-8"؟>

    <التدرج
        الروبوت: centerColor = "# AAffffff"
        الروبوت: endColor = "# 00FFFFFF"
        android: startColor = "# 00ffffff" />

ستبدو المعاينة كالتالي:

تألق drawable

لاحظ أن التدرج مصنوع من ثلاثة ألوان اخترتها ، "لون" الوسط "أبيض" مع بعض الشفافية ، في حين أن اللونين "النهاية" و "البداية" شفافان. يمتد هذا الدرج على imageview مما يعطي تأثير الوهج المرغوب.

الخطوة 3: إضافة هذا drawable إلى XML.

<؟ xml version = "1.0" encoding = "utf-8"؟>



    

        

        
    


    <زر
        الروبوت: معرف = "@ + معرف / زر"
        الروبوت: layout_width = "wrap_content"
        الروبوت: layout_height = "wrap_content"
        الروبوت: layout_alignParentBottom = "صحيح"
        الروبوت: layout_centerHorizontal = "صحيح"
        الروبوت: layout_marginBottom = "100dp"
        الروبوت: layout_marginTop = "32dp"
        android: text = "SHINE" />

الخطوة 4: قم بترميز الرسوم المتحركة للترجمة لـ "تألق" imageview (بمعرف: تألق). ضع هذا الكود داخل clicklistener () من الزر. يتم تقديم نموذج التعليمة البرمجية أدناه:

findViewById (R.id.button) .setOnClickListener (جديد View.OnClickListener () {
    @تجاوز
    باطل عام onClick (عرض v) {
        Animation animation = new TranslateAnimation (0، img.getWidth () + shine.getWidth ()، 0، 0)؛
        animation.setDuration (550)؛
        animation.setFillAfter (كاذبة)؛
        animation.setInterpolator (جديد AccelerateDecelerateInterpolator ()) ؛
        shine.startAnimation (الرسوم المتحركة)؛
    }
})؛

ما أقوم به هو إنشاء رسم متحرك للترجمة يمكنني من خلاله ترجمة خيال اللمعان بمسافة X تساوي "عرض اللمعان القابل للإدراج" + + عرض اللمحة الخلفية. الآن يمكن الإجابة على السؤال لماذا أرفق imageview داخل relativelout؟ في الواقع ، سيكون هذا الأصل الآن بمثابة مستطيل قطع بحيث لا يمكن رؤية اللمعان المتألق خارج حدود الصورة. يمكن رؤية هذا الخطأ عند تشغيل خلفية التخطيط باللون الأسود أو أي لون آخر غير اللون الأبيض.

مرحى! لقد حققت تأثير تألق. مبروك…

نموذج التعليمات البرمجية أعلاه موجود على git: https://github.com/apgapg/ShineEffect.git

يستخدم هذا التأثير حاليًا في أحد تطبيقي المسمى "Reweyou": https://play.google.com/store/apps/details؟id=in.reweyou.reweyou