Yangi boshlanuvchilar uchun Android Animatsiyasini amalga oshirish bo'yicha qo'llanma - 1 qism (2 qismli qism)

Tan oling, siz har doim vizual tarzda jozibador ilovalarni yaratishni xohlaysiz. Ammo funktsional birinchi yondashuv tufayli animatsiyalar har doim kechiktirildi. Ortiq yo'q.

Animatsiyalar haqida ozgina asoslar:

Animatsiyaning 3 turi mavjud:

  1. Mulk animatsiyasi - ular ob'ektlarning xususiyatlarini o'zgartirish uchun ishlatiladi (Ko'rishlar yoki ko'rinmaydigan ob'ektlar). O'zgartirish uchun biz ob'ektlarning ma'lum xususiyatlarini (translateX, TextScaleX) belgilaymiz. Animatsiyaning turli xil xususiyatlari boshqarilishi mumkin, bu animatsiya davomiyligi, uni bekor qilish kerakmi yoki animatsiyani necha marta takrorlashni xohlaymiz va hokazo. Ular Android 3.0-da taqdim etilgan (API darajasi 11).
  2. Ko'rish animatsiyasi - Ular o'lcham, pozitsiya, aylanish, shaffoflikni o'zgartirish kabi oddiy animatsiyalarni bajarishda foydalaniladi. Ular qurish oson va juda tez, ammo o'zlarining cheklovlariga ega. Masalan - Ularning holati o'zgaradi, lekin mulklari o'zgarmaydi. Ko'rish animatsiyalari 2-qismida ko'rib chiqiladi.
  3. Chiziladigan animatsiyalar - bu chizmalardan foydalanib animatsiya qilish uchun ishlatiladi. Har xil chizmalar ro'yxatini aniqlaydigan XML fayli xuddi film rolini kabi birma-bir ishlaydigan qilib yaratilgan. Bu juda ko'p ishlatilmaydi, shuning uchun men uni qamrab olmayman.
Android 5.0 boshqa turli xil animatsiyalarni taqdim etdi - Reveal Effect, Faoliyat / Fragmentli o'tish, Shared Element o'tish va boshqalar. Bu haqida ko'proq ma'lumot olish uchun bu erni bosing.
Izoh - 1-bo'limda faqat mulkiy animatsiyalar muhokama qilinadi.

Qaysi turdagi animatsiyadan foydalanish kerak

  1. Agar siz shunchaki teginish yoki bosish kabi boshqa tafsilotlarni ishlatmasdan ko'rinishda oddiy animatsiyalarni qilishni istasangiz, View Animations-dan foydalaning. View Animations bilan bog'liq muammo shundaki, View holati o'zgarsa ham, uning mulki avvalgidek qoladi. Bu shuni anglatadiki, agar ImageButton 0 dan 100 pikselgacha o'ng tomonga o'tkazilsa, u o'ng tomonga jonlantirilsa ham, tasvir tugmachasining tegishi (xususiyati) 0-holatda bo'ladi.
  2. Splash ekranlarida ko'rish animatsiyalaridan foydalanish mumkin. View Animations-dan foydalanganda uni dasturiy ravishda amalga oshirish o'rniga XML-dan foydalaning. XML fayllaridan foydalanib, uni o'qish osonroq va boshqa ko'rinishlar orasida bo'lishish mumkin.
  3. Agar siz teginishni istasangiz, animatsiyadan so'ng cherting, Mulkni Animatsiya-ga o'ting, chunki ular holatni va holatlarni o'zgartiradi.

Mulkni animatsiya tushunchalari

Mulkni animatsiya qilishning ichki qismi. Google'ning iltifoti

Haqiqiy animatsiya Value Animator tomonidan amalga oshiriladi. Bu sinf animatsiya davomiyligini va u jonlantiradigan xususiyatning joriy qiymatini hisobga oladi. TimeInterpolater animatsiya vaqtini (tezligini) kuzatib boradi, masalan, berilgan vaqt ichida doimiy tezlikda bo'ladimi yoki vaqt ichida sekinlashganda tezlashadi. TypeEvaluator, masalan, int, float, rgb va hokazolar uchun ishlatiladigan TypeEvalutor turiga asoslanib kasrlarni hisoblash uchun ishlatiladi, agar biz hech kim bizning ehtiyojlarimizga mos kelmasa, biz CustomEvaluator-dan ham foydalanishimiz mumkin.

ValueAnimator-dan foydalangan holda animatsiyalar

ValueAnimator sinfi animatsiya davomida int, suzuvchi yoki rang qiymatlari to'plamini ko'rsatib animatsiya davomiyligi uchun ba'zi turdagi qiymatlarni jonlantirishga imkon beradi. Siz ValueAnimator-ni uning zavod usullaridan birini chaqirish orqali olasiz: OfInt (), OfFloat () yoki ofObject (). Misol uchun:

yakuniy TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ValueAnimator valueAnimator = ValueAnimator.ofFloat (0f, 500f);
valueAnimator.setInterpolator (yangi AccelerateDecelerateInterpolator ()); // avval tezlikni oshiring, keyin pasaytiring
valueAnimator.setDuration (2000);
valueAnimator.addUpdateListener (yangi ValueAnimator.AnimatorUpdateListener () {
    @Hamma safar
    ommaviy bo'shliq onAnimationUpdate (ValueAnimator animatsiya) {
        float progress = (float) animatsiya.getAnimatedValue ();
        animateTextView.setTranslationY (taraqqiyot);
        // bekor qilish () dan foydalanishning hojati yo'q, chunki u // matn ko'rinishida allaqachon mavjud.
    }
});
valueAnimator.start ();
Gifining hurmati

Xuddi shu narsaga XML kodi yordamida quyidagicha erishish mumkin:

                   /res/animator/value_animator_ex.xml

                     ---- Faoliyat kodi ----
ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator (
        bu, R.animator.value_animator_ex);

valueAnimator.addUpdateListener (yangi ValueAnimator.AnimatorUpdateListener () {
    @Hamma safar
    ommaviy bo'shliq onAnimationUpdate (ValueAnimator animatsiya) {
        float progress = (float) animatsiya.getAnimatedValue ();
        animateTextView.setTranslationY (taraqqiyot);
    }
});

valueAnimator.start ();

ObjectAnimator-dan foydalangan holda animatsiyalar

ObjectAnimator - bu ValueAnimator-ning kichik sinfidir va vaqtni hisoblash mexanizmi va ValueAnimator-ning maqsadli ob'ektning nomlangan xususiyatini jonlantirish qobiliyati bilan birlashtiradi. Bu har qanday ob'ektni jonlantirishni ancha osonlashtiradi, chunki endi siz ValueAnimator.AnimatorUpdateListener-ni amalga oshirishingiz shart emas, chunki animatsiya xususiyati avtomatik ravishda yangilanadi. Ko'p holatlarda biz bundan foydalanishimiz kerak.

Yuqoridagi xuddi shu animatsiya uchun biz ObjectAnimator uchun kodni quyidagicha yozishimiz mumkin:

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = ObjectAnimator.ofFloat (animateTextView, "translationY", 0f, 500f);
textViewAnimator.setDuration (2000);
textViewAnimator.setInterpolator (yangi AccelerateDecelerateInterpolator ());
textViewAnimator.start ();

Ko'rib turganimizdek, matnni ko'rish holatini yangilash uchun tinglovchidan foydalanishimiz shart emas edi, chunki buni ObjectAnimator o'zi amalga oshirgan. Bu erda ko'rishimiz kerak bo'lgan asosiy narsa bu "translationY" dir, bu biz animatsiya qilishni xohlaymiz. Bu android-da aniqlangan xususiyat bo'lishi kerak yoki agar u bizning shaxsiy mulkimiz bo'lsa, biz unga kirish usullarini, ya'ni getter va setter usulini ko'rsatib berishimiz kerak.

Xuddi shu narsani XML yordamida quyidagicha amalga oshirish mumkin:

                /res/animator/object_animator_ex.xml

                        ---- Faoliyat kodi ----

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator (AnimationActivity.this, R.animator.object_animator_ex);
textViewAnimator.setTarget (animateTextView);
textViewAnimator.start ();

Bir vaqtning o'zida bir nechta animatsiyani bajarish

Biz bir nechta ObjectAnimatorlarni bir vaqtning o'zida va bir xil muddatda bir nechta animatsiyani amalga oshirishni boshlashimiz mumkin, ammo bu samarali emas, chunki hech qanday ko'rinish boshqa ko'rinishni bilmaydi. Buning uchun biz AnimatorSet sinfidan foydalanishimiz mumkin.

Hozirgi loyihamda men quyidagi animatsiyani bajardim:

(Tez orada yangilanadi. Noqulayliklar uchun uzr.)

Ko'rib turganimizdek, bir vaqtning o'zida bir nechta animatsiyalar ishlaydi. Bir vaqtning o'zida 4 ta animatsiya davom etmoqda. Qidiruv tasvirchasi bosilganda, avval qidiruv tasvirchasi chapga siljiydi, logotip so'nmoqda, bekor qilish tugmasi yo'qolmoqda va matnni tahrirlash ham susaymoqda. Bekor qilish tugmachasi bosilganda bir xil animatsiya o'ynaladi, ammo teskari.

Buning kodi:

   --------- qidiruv oynasida animatsiyani amalga oshiring ---------- bosing.
// chap tomonga o'tish
DisplayMetrics displayMetrics = getResources (). GetDisplayMetrics ();
int modifierX = - (displayMetrics.widthPixels - v.getWidth ());
xususiy statik final int SEARCH_ANIMATION_DURATION = 1000; // 1 sek
ObjectAnimator searchIconLeftAnimation = ObjectAnimator.ofFloat (v, "translationX", modifikatorX);
searchIconLeftAnimation.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeOutAnimator = ObjectAnimator.ofFloat (mAppLogo, "alfa", 1f, 0f);
logoFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator bekor qilishImageFadeInAnimator = ObjectAnimator.ofFloat (mIvCancelSearch, "alfa", 0f, 1f);
bekor qilishImageFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextAnimator = ObjectAnimator.ofFloat (mEtSearch, "alfa", 0f, 1f);
searchEditTextAnimator.setDuration (SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = yangi AnimatorSet ();
animatorSet.play (searchIconLeftAnimation) .with (logoFadeOutAnimator);
animatorSet.play (searchIconLeftAnimation) .with (bekorImageFadeInAnimator);
animatorSet.play (searchIconLeftAnimation) .with (searchEditTextAnimator);

animatorSet.start ();
   --------- bekor qilish tugmachasidagi barcha animatsiyalarni orqaga qaytarish ----------
ObjectAnimator searchIconRightAnimation = ObjectAnimator.ofFloat (mIvSearch, "translationX", 0);
searchIconRightAnimation.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeInAnimator = ObjectAnimator.ofFloat (mAppLogo, "alfa", 0f, 1f);
logoFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator bekor qilishImageFadeOutAnimator = ObjectAnimator.ofFloat (mIvCancelSearch, "alfa", 1f, 0f);
bekor qilishImageFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextFadeInAnimator = ObjectAnimator.ofFloat (mEtSearch, "alfa", 1f, 0f);
searchEditTextFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = yangi AnimatorSet ();
animatorSet.play (searchIconRightAnimation) .with (logoFadeInAnimator);
animatorSet.play (searchIconRightAnimation) .with (bekorImageFadeOutAnimator);
animatorSet.play (searchIconRightAnimation) .with (searchEditTextFadeInAnimator);

animatorSet.start ();

Bu erda biz turli xil ko'rinishlarda bir nechta ob'ekt Animatorlarini yaratdik va ularni AnimatorSet-dan foydalanib birga o'ynadik. Bunga o'yin () va () bilan usullari yordam beradi.

Animatsiya holatini aniqlash uchun tinglovchilardan ham foydalanishimiz mumkin. Masalan:

animatorSet.addListener (yangi Animator.AnimatorListener () {
    @Hamma safar
    ommaviy bo'shliq onAnimationStart (Animator animatsiyasi) {
        // animatsiya boshlanishidan oldin hamma narsani bajaring
    }

    @Hamma safar
    ommaviy bo'shliq onAnimationEnd (Animator animatsiyasi) {
       // animatsiya tugagandan so'ng boshqa narsalarni qilish
    }

    @Hamma safar
    jamoat bo'shlig'i onAnimationCancel (Animator animatsiyasi) {
      // animatsiya bekor qilinganida biror narsa qilish (foydalanuvchi / dasturchi tomonidan)
    }

    @Hamma safar
    ommaviy bo'shliq onAnimationRepeat (Animator animatsiyasi) {
       // animatsiya takrorlanayotganda nimadir qilish
    }
});

Bitta ko'rinishda bir nechta animatsiyani bajarayotganda

Hozirgacha biz turli xil ko'rish ob'ektlarida animatsiyalarni ko'rdik. Yuqoridagi yondashuvlar yordamida (animator to'plamidan foydalangan holda) biz bitta ko'rinishda bir nechta animatsiyalarni amalga oshirishimiz mumkin, ammo bu AnimatorSet-ni sozlash va parallel ravishda ikkita Animatorni ishga tushirish bilan bir qatorda yuqori darajadagi ishlashdir. Eng yaxshi yondashuv ViewPropertyAnimator-dan foydalanishdir. Undan foydalanib, kodni o'qish osonroq. Masalan:

animateTextView.animate (). aylanish (360f) .y (500f) .setDuration (2000);
     ---------------------------- VS --------------------- --------
ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat (animateTextView, "aylantirish", 360f);
rotationAnimator.setDuration (2000);
ObjectAnimator translateAnimator = ObjectAnimator.ofFloat (animateTextView, "translationY", 500f);
translateAnimator.setDuration (2000);
AnimatorSet to'plami = yangi AnimatorSet ();
set.playTogether (rotatsiyaAnimator, translateAnimator);
set.start ();

Animatsiya mening ilovamni sekinlashtiradimi yoki 16ms chizish oynasi vaqtidan oshib ketadimi? Spektaklda qo'shimcha xarajatlar bormi?

UI-ni yangilaydigan animatorlar animatsiya ishlaydigan har bir freym uchun qo'shimcha ishlash ishlashiga olib keladi. Shu sababli, resurslarni ko'paytiradigan animatsiyalardan foydalanish ilovangiz ishiga salbiy ta'sir ko'rsatishi mumkin.

Foydalanuvchi interfeysini jonlantirish uchun zarur bo'lgan ish ko'rsatiladigan quvur liniyasining animatsion bosqichiga qo'shiladi. Profil GPU Rendering va animatsiya bosqichini kuzatish orqali animatsiyalaringiz ilovangizning ishiga ta'sir qilish-qilmasligini bilib olishingiz mumkin.

Foydalanish sumkasi haqida o'ylang va keyin tegishli usulni qo'llang.

Maqolani o'qiganingiz uchun tashakkur. Takliflar / tuzatishlar / sharhlar har doim ma'qullanadi. Agar sizga yoqsa, iltimos, shunga o'xshash tugmani bosing va maqolani Android hamjamiyati bilan baham ko'ring. Iloji boricha bilimimiz bilan bo'lishaylik.

Izoh - ViewAnimations-ning 2-qismi ham yaqin orada chiqadi.

Shuningdek, About.me, Twitter, LinkedIn, Github va Facebook-da do'st bo'laylik.