نظرة عامة على الصور المتحركة للموقع

تجربة طريقة ComposeAllowed

Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام "الصور المتحركة" في Compose.

animate*AsState →

يُعد نظام الرسوم المتحركة للخصائص إطارًا قويًا يسمح لك لتحريك أي شيء تقريبًا. يمكنك تحديد رسم متحرك لتغيير أي خاصية كائن بمرور الوقت، بغض النظر عما إذا كان يجذب الشاشة أم لا. تغيّر الصورة المتحركة للخصائص (حقل في كائن) خلال مدة زمنية محددة. لتحريك شيء ما، يجب تحديد خاصية الكائن التي تريد تحريكها، مثل موضع العنصر على الشاشة، والمدة التي تريد إضافة تأثيرات حركية إليها، والقيم التي تريد إضافة تأثيرات حركية إليها.

يتيح لك نظام الرسوم المتحركة للخصائص تحديد الخصائص التالية الرسوم المتحركة:

• المدة: يمكنك تحديد مدة التأثير. المدة التلقائية هي 300 ملي ثانية.
• استقراء الوقت: يمكنك تحديد كيفية احتساب قيم الخاصية كـ دالة الوقت المنقضي الحالي للرسم المتحرك.
• عدد التكرارات والسلوكيات: يمكنك تحديد ما إذا كان سيتم تكرار الرسم المتحرك أم لا عند يصل إلى نهاية المدة وعدد مرات تكرار الرسم المتحرك. يمكنك أيضًا لتحديد ما إذا كنت تريد تشغيل الرسوم المتحركة عكسيًا. الضبط على وضع التشغيل العكسي الحركة للأمام ثم للخلف بشكل متكرر، حتى يتم الوصول إلى عدد التكرارات.
• مجموعات الصور المتحركة: يمكنك تجميع الرسوم المتحركة في مجموعات منطقية تعمل معًا أو بشكل تسلسلي أو بعد تأخيرات محددة.
• تأخير تحديث الإطار: يمكنك تحديد عدد مرات تحديث إطارات الصورة المتحركة. تشير رسالة الأشكال البيانية يتم تعيين الإعداد الافتراضي على التحديث كل 10 ملي ثانية، ولكن السرعة التي يمكن بها للتطبيق تحديث الإطارات هي يعتمد بشكل أساسي على مدى انشغال النظام بشكل عام وعلى مدى سرعة النظام في خدمة الموقّت الأساسي.

للاطّلاع على مثال كامل للرسم المتحرك للخصائص، راجع صف واحد (ChangeColor) في النقل المخصص عينة على جيت هب.

آلية عمل الصورة المتحركة للخصائص

أولاً، دعنا نتناول كيفية عمل الرسوم المتحركة باستخدام مثال بسيط. يصور الشكل 1 كائن افتراضي يتضمّن صورة متحركة لسمته x التي تُمثل الموقع الأفقي على الشاشة. يتم تعيين مدة الصورة المتحركة على 40 ملي ثانية والمسافة مسافة السفر 40 بكسل. يتم نقل العنصر كل 10 ملي ثانية، وهو معدّل إعادة تحميل اللقطات التلقائي. أفقيًا بمقدار 10 بكسل. في نهاية 40 ملي ثانية، يتوقف الرسم المتحرك وينتهي الكائن في الموضع الأفقي 40. هذا مثال على رسم متحرك مزود باستكمال خطي، مما يعني يتحرك الكائن بسرعة ثابتة.

الشكل 1. مثال على حركة خطية

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

الشكل 2. مثال على الرسوم المتحركة غير الخطية

دعونا نلقي نظرة مفصلة على كيفية تضمين المكونات المهمة لنظام الرسوم المتحركة للخصائص بحساب الرسوم المتحركة مثل تلك الموضحة أعلاه. يصور الشكل 3 كيف تؤثر الطبقات الرئيسية العمل مع بعضهم البعض.

الشكل 3. كيفية حساب الصور المتحركة

يتتبّع الكائن ValueAnimator توقيت الحركة، مثل مدة تشغيل الرسوم المتحركة، والقيمة الحالية للخاصية التي المتحركة.

يتضمّن ValueAnimator السمة TimeInterpolator التي تحدّد استقراء الصور المتحركة، والسمة TypeEvaluator التي تحدّد كيفية حساب القيم الخاصة بالخاصية. المتحركة. على سبيل المثال، في الشكل 2، سيكون TimeInterpolator المستخدَم هو ستكون قيمة AccelerateDecelerateInterpolator وTypeEvaluator هي IntEvaluator.

لبدء صورة متحركة، أنشئ ValueAnimator وأضِف إليها قيم البداية والنهاية للموقع الذي تريد تحريكه، بالإضافة إلى مدة الرسوم المتحركة. عند استدعاء "start()" الصورة المتحركة تبدأ. أثناء الحركة بأكملها، يحتسب ValueAnimator الكسر المنقضي من 0 إلى 1، بناءً على مدة الصورة المتحركة ومقدار الوقت المنقضي. تشير رسالة الأشكال البيانية يمثل الكسر المنقضي النسبة المئوية لوقت اكتمال الرسم المتحرك، 0 يعني 0% و1 يعني 100٪. على سبيل المثال، في الشكل 1، سيكون الكسر المنقضي عند t = 10 ملي ثانية هو .25 لأن المدة الإجمالية هي t = 40 ملي ثانية.

عند إتمام ValueAnimator لحساب الكسر المنقضي، فإنه بـ TimeInterpolator المعينة حاليًا، لحساب الكسور المستورَدة. يعيّن الكسر المستورَد الكسر المنقضي إلى عدد جديد يراعي استقراء الوقت المحدّد. فعلى سبيل المثال، في الشكل 2، لأن الرسوم المتحركة تتسارع ببطء، الكسر المستقراء، أي حوالي 15 .أقل من الكسر المنقضي، .25، عند t = 10 ملي ثانية. في الشكل 1، يكون الكسر المستورَد هو نفسه دائمًا الكسر المنقضي.

عند حساب الكسر المستورَد، يستدعي ValueAnimator. TypeEvaluator المناسبة لحساب قيمة الذي تقوم بتحريكه، بناءً على الكسر المستورَد والقيمة الأولية نهاية الرسوم المتحركة. على سبيل المثال، في الشكل 2، كان الكسر المستورَد 0 .15 عند t = 10 ملي ثانية، وبالتالي ستكون قيمة الخاصية في ذلك الوقت 0 .15 × (40 - 0) أو 6.

أوجه الاختلاف بين حركة الملكية وحركة العرض

يوفّر نظام عرض الصور المتحركة إمكانية إضافة تأثيرات حركية إلى View فقط. لذا، إذا أردت إضافة تأثيرات حركية إلى كائنات غير View، عليك تنفيذ التعليمات البرمجية الخاصة بك للقيام بذلك. كما أن نظام عرض الرسوم المتحركة مقيد في أنه يعرض بعض جوانب الكائن View لتحريكه، مثل التحجيم تدوير العرض وليس لون الخلفية مثلاً.

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

وباستخدام نظام الصور المتحركة للخصائص، تتم إزالة هذه القيود تمامًا، ويمكنك إضافة تأثيرات متحركة لأي خاصية لأي كائن (Views and non-Views) ويتم تعديل الكائن نفسه فعليًا. كما يعد نظام الرسوم المتحركة للخصائص أكثر قوة في طريقة تنفيذ الرسوم المتحركة. علامة @ مستوى عالٍ، يمكنك تعيين أدوات متحركة للخصائص التي تريد تحريكها، مثل اللون، أو موضعه أو حجمه ويمكنه تحديد جوانب الرسوم المتحركة مثل الاستيفاء مزامنة العديد من منشئي الصور المتحركة.

مع ذلك، يستغرق إعداد نظام عرض الصور المتحركة وقتًا أقل ويتطلب رمزًا أقل للكتابة. ما إذا كانت الصورة المتحركة لعرض الصورة المتحركة توفر كل الإجراءات المطلوبة، أو إذا كانت الرموز الحالية بالطريقة التي تريدها، ليس هناك حاجة لاستخدام نظام الرسوم المتحركة للخصائص. قد يهم أيضًا من المنطقي استخدام كلا نظامي الرسوم المتحركة في مواقف مختلفة عند ظهور حالة الاستخدام.

نظرة عامة على واجهة برمجة التطبيقات

يمكنك العثور على معظم واجهات برمجة التطبيقات لنظام صور المواقع المتحركة في android.animation. لأنّ نظام عرض الصور المتحركة تحدد العديد من المداخلات في اللغة android.view.animation، يمكنك استخدام تلك التعديلات في نظام الرسوم المتحركة للممتلكات أيضًا. تصف الجداول التالية مكونات نظام الرسوم المتحركة للممتلكات.

توفّر الفئة Animator البنية الأساسية للإنشاء. والرسوم المتحركة. أنت لا تستخدم عادةً هذه الفئة مباشرةً لأنها توفر الحد الأدنى الوظيفة التي يجب توسيعها لإتاحة القيم المتحركة بالكامل. ما يلي: تمتد الفئات الفرعية إلى Animator:

الجدول 1. أخصائيو صور متحركة

تخبر المقيّمون نظام الرسوم المتحركة للخصائص بكيفية حساب قيم قيمة الموقع. وهي تأخذ بيانات التوقيت التي يوفّرها Animator. الفئة، وقيمة بداية ونهاية الرسوم المتحركة، وحساب القيم المتحركة للخاصية استنادًا إلى هذه البيانات. يوفر نظام الرسوم المتحركة للخصائص المقيّمين التاليين:

الجدول 2. المقيّمون

يحدد محدِّد الوقت كيفية حساب القيم المحددة في الرسوم المتحركة وظيفة الوقت. على سبيل المثال، يمكنك تحديد الرسوم المتحركة التي تحدث خطيًا على مستوى الكل رسم متحرك، بمعنى أن الرسوم المتحركة تتحرك بالتساوي طوال الوقت، أو يمكنك تحديد الرسوم المتحركة استخدام الوقت غير الخطي، مثل، الإسراع في البداية والتباطؤ في نهاية الرسوم المتحركة. يصف الجدول 3 أدوات الاستيفاء المضمَّنة في android.view.animation. في حال لم يكن أي من محقِّقي الترجمة المقدَّمين مناسبًا وفقًا لاحتياجاتك، يمكنك تنفيذ واجهة TimeInterpolator وإنشاء واجهة مستخدم خاصة بك. راجِع مقالة استخدام أدوات الاستيفاء لمزيد من المعلومات عن طريقة كتابة نص مخصّص. أداة التعديل.

الجدول 3. أجهزة الاستيفاء

إضافة تأثيرات متحركة باستخدام ValueAnimator

تتيح لك الفئة ValueAnimator تحريك قيم من نوع معيّن مدة الحركة من خلال تحديد مجموعة من int أو float أو لون القيم المراد تحريكها. تحصل على ValueAnimator من خلال استدعاء أحد طرق المصنع: ofInt() أو ofFloat() أو ofObject() مثلاً:

ValueAnimator.ofFloat(0f, 100f).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
animation.setDuration(1000);
animation.start();

في هذا الرمز، تبدأ ValueAnimator في احتساب قيم الحركة، من 0 إلى 100، ولمدة 1000 ملي ثانية، عند تشغيل طريقة start().

يمكنك أيضًا تحديد نوع مخصّص لتحريكه من خلال تنفيذ ما يلي:

ValueAnimator.ofObject(MyTypeEvaluator(), startPropertyValue, endPropertyValue).apply {
    duration = 1000
    start()
}

ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);
animation.setDuration(1000);
animation.start();

في هذا الرمز، تبدأ ValueAnimator في احتساب قيم الرسوم المتحركة، بين startPropertyValue وendPropertyValue باستخدام يتم توفيره من قِبل MyTypeEvaluator لمدة 1, 000 ملي ثانية، عند تشغيل طريقة start().

يمكنك استخدام قيم الرسوم المتحركة عن طريق إضافة AnimatorUpdateListener إلى الكائن ValueAnimator، كما هو موضح في الرمز التالي:

ValueAnimator.ofObject(...).apply {
    ...
    addUpdateListener { updatedAnimation ->
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        textView.translationX = updatedAnimation.animatedValue as Float
    }
    ...
}

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

في onAnimationUpdate() يمكنك من خلاله الوصول إلى قيمة الرسوم المتحركة المحدَّثة واستخدامها في خاصية إحدى طرق العرض الخاصة بك. لمزيد من المعلومات حول المستمعين، راجِع القسم حول أدوات معالجة الصور المتحركة:

إنشاء تأثيرات متحركة باستخدام ObjectAnimator

ObjectAnimator هي فئة فرعية من ValueAnimator (تمت مناقشتها في القسم السابق) وتجمع بين التوقيت. احتساب المحرك والقيمة ValueAnimator مع القدرة على تحريك خاصية مُسمّاة لكائن مستهدَف. هذا يجعل تحريك أي كائن بشكل أسهل بكثير، حيث لم تعد بحاجة إلى تنفيذ ValueAnimator.AnimatorUpdateListener، لأنه يتم تحديث الخاصية المتحركة تلقائيًا.

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

ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
    duration = 1000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
animation.setDuration(1000);
animation.start();

لتفعيل ميزة تعديل المواقع الإلكترونية في "ObjectAnimator" بشكل صحيح، يجب عليك القيام بما يلي:

• يجب أن يكون لخاصية الكائن الذي تقوم بتحريكه دالة setter (في حالة الجمل) على شكل set<PropertyName>() لأنّ ObjectAnimator يقوم بتحديث الخاصية تلقائيًا أثناء تشغيل الحركة، يجب أن يكون قادرًا على الوصول إليها باستخدام طريقة التعيين هذه. على سبيل المثال، إذا كان اسم السمة هو foo، يجب تنفيذ ما يلي: على طريقة setFoo(). إذا لم تكن طريقة setter هذه موجودة، يكون لديك ثلاثة الخيارات:
  • أضف طريقة setter إلى الفئة إذا كنت تملك الحق في ذلك.
  • استخدِم فئة برنامج تضمين يحق لك تغييرها واطلب من برنامج تضمين هذا التغيير باستخدام طريقة setter صالحة، ثم إعادة توجيهها إلى الكائن الأصلي.
  • يمكنك استخدام ValueAnimator كبديل.
• إذا حدّدت قيمة واحدة فقط للمَعلمة values... باستخدام إحدى طرق المصنع ObjectAnimator، يُفترض أن تكون هذه القيمة النهائية الرسوم المتحركة. وبالتالي، يجب أن تحتوي خاصية الكائن التي تعمل على تحريكها على دالة getter تُستخدم للحصول على القيمة الأولية للرسوم المتحركة. يجب أن تكون دالة getter في من get<PropertyName>(). على سبيل المثال، إذا كان اسم الخاصية foo، يجب أن تتوفّر لديك طريقة getFoo().
• يجب أن طرق getter (إذا لزم الأمر) والتعيين للخاصية التي تقوم بتحريكها تعمل على نفس نوع قيم البداية والنهاية التي تحددها إلى ObjectAnimator. على سبيل المثال، يجب أن يكون لديك targetObject.setPropName(float) وtargetObject.getPropName() في حال إنشاء ObjectAnimator التالي:

  ObjectAnimator.ofFloat(targetObject, "propName", 1f)
  

• واعتمادًا على الخاصية أو الكائن الذي تقوم بتحريكه، قد تحتاج إلى استدعاء طريقة invalidate() في طريقة العرض لإجبار الشاشة على إعادة رسمها باستخدام القيم المتحركة المحدثة. يمكنك إجراء ذلك في onAnimationUpdate() معاودة الاتصال. فعلى سبيل المثال، تؤدي تحريك خاصية اللون لكائن قابل للرسم فقط إلى حدوث تحديثات في الشاشة عندما يعيد هذا الكائن رسمه. كل أماكن تحديد المواقع على "العرض"، مثل setAlpha() وsetTranslationX() إلغاء صلاحية العرض على نحو سليم، فلا يلزم إلغاء صلاحية العرض عند استدعاء هذه باستخدام قيم جديدة. لمزيد من المعلومات حول المستمعين، راجِع القسم حول أدوات معالجة الصور المتحركة:

تصميم صور متحركة متعددة باستخدام AnimatorSet

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

يُشغِّل مقتطف الرمز التالي ملف Animator التالي. بالشكل التالي:

1. يتم تشغيل bounceAnim.
2. يتم تشغيل squashAnim1 وsquashAnim2 وstretchAnim1 و stretchAnim2 في نفس الوقت.
3. يتم تشغيل bounceBackAnim.
4. يتم تشغيل fadeAnim.

val bouncer = AnimatorSet().apply {
    play(bounceAnim).before(squashAnim1)
    play(squashAnim1).with(squashAnim2)
    play(squashAnim1).with(stretchAnim1)
    play(squashAnim1).with(stretchAnim2)
    play(bounceBackAnim).after(stretchAnim2)
}
val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
}
AnimatorSet().apply {
    play(bouncer).before(fadeAnim)
    start()
}

AnimatorSet bouncer = new AnimatorSet();
bouncer.play(bounceAnim).before(squashAnim1);
bouncer.play(squashAnim1).with(squashAnim2);
bouncer.play(squashAnim1).with(stretchAnim1);
bouncer.play(squashAnim1).with(stretchAnim2);
bouncer.play(bounceBackAnim).after(stretchAnim2);
ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(bouncer).before(fadeAnim);
animatorSet.start();

أدوات معالجة الأحداث المتحركة

يمكنك الاستماع إلى الأحداث المهمة أثناء مدة تشغيل الصورة المتحركة مع المستمعين الموضحين أدناه.

• Animator.AnimatorListener
  • onAnimationStart() - يتم استدعاؤه عند بدء تشغيل الرسوم المتحركة.
  • onAnimationEnd() - يتم استدعاء هذا الإجراء عند انتهاء الصورة المتحركة.
  • onAnimationRepeat(): يتم استدعاؤه عندما يتم تكرار الصورة المتحركة من تلقاء نفسها.
  • onAnimationCancel() - يتم استدعاؤه عند إلغاء الصورة المتحركة. صورة متحركة تم إلغاؤها الاتصال أيضًا بـ onAnimationEnd()، بغض النظر عن كيفية إنهائها.
• ValueAnimator.AnimatorUpdateListener

  • onAnimationUpdate() - يتم استدعاؤه في كل إطار في الصورة المتحركة. الاستماع إلى هذا الحدث إلى استخدام القيم المحسوبة الناتجة عن ValueAnimator خلال الرسوم المتحركة. لاستخدام القيمة، أدخِل طلب بحث عن الكائن ValueAnimator. يتم تمريره إلى الحدث للحصول على القيمة المتحركة الحالية باستخدام الطريقة getAnimatedValue(). إن تنفيذ هذه يجب توفير أداة معالجة الأحداث في حال استخدام ValueAnimator.

    اعتمادًا على الخاصية أو الكائن الذي تقوم بتحريكه، قد تحتاج إلى استدعاء invalidate() في طبقة عرض لفرض هذه المنطقة من لإعادة رسم نفسها باستخدام القيم المتحركة الجديدة. على سبيل المثال، يؤدي تحريك لا تتسبب خاصية اللون لكائن قابل للرسم في إجراء تحديثات على الشاشة إلا عندما يكون هذا الكائن يعيد رسم نفسه. تقع جميع المواقع على View مثل setAlpha() و يلغي setTranslationX() صلاحية العرض بشكل صحيح، لذلك لا تحتاج إلى إلغاء صلاحية العرض عند استدعاء هذه الطرق بقيم جديدة.

يمكنك تمديد الصف AnimatorListenerAdapter بدلاً من تنفيذ واجهة Animator.AnimatorListener، إذا لم يتم تريد تطبيق جميع طرق Animator.AnimatorListener من واجهة pyplot. يوفّر الصف AnimatorListenerAdapter قيمة فارغة. وعمليات التنفيذ للطرق التي يمكنك اختيار تجاوزها.

على سبيل المثال، يُنشئ مقتطف الرمز التالي AnimatorListenerAdapter مقابل onAnimationEnd() فقط رد الاتصال:

ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            balls.remove((animation as ObjectAnimator).target)
        }
    })
}

ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
fadeAnim.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator animation) {
    balls.remove(((ObjectAnimator)animation).getTarget());
}

تحريك تغييرات التنسيق لكائنات ViewGroup

يوفّر نظام الصور المتحركة للخصائص إمكانية تحريك التغييرات على كائنات ViewGroup. فضلاً عن توفير طريقة سهلة لتحريك عناصر العرض نفسها.

ويمكنك تحريك تغييرات التنسيق داخل ViewGroup باستخدام صف واحد (LayoutTransition). يمكن لطريقة العرض داخل ViewGroup حركة تظهر وتختفي عند إضافتها إلى إزالتها من ViewGroup أو عند استدعاء عنصر طريقة واحدة (setVisibility()) مع VISIBLE أو INVISIBLE أو GONE يمكن أيضًا أن تتضمن طرق العرض المتبقية تتحرك في مواضعها الجديدة عند إضافة طرق عرض أو إزالتها. يمكنك تحديد الصور المتحركة التالية في كائن LayoutTransition من خلال الاتصال بـ setAnimator() وتمريره في كائن Animator بإحدى القيم ثوابت LayoutTransition التالية:

• APPEARING - علامة تشير إلى الحركة التي تعمل على العناصر يظهر في الحاوية.
• CHANGE_APPEARING - علامة تشير إلى الحركة التي تعمل على العناصر تتغير بسبب ظهور عنصر جديد في الحاوية.
• DISAPPEARING - علامة تشير إلى الحركة التي تعمل على العناصر تختفي من الحاوية.
• CHANGE_DISAPPEARING - علامة تشير إلى الصورة المتحركة التي تعمل على العناصر تتغير بسبب اختفاء عنصر من الحاوية.

يمكنك تحديد الصور المتحركة المخصصة لهذه الأنواع الأربعة من الأحداث لتخصيص مظهر انتقالات التخطيط أو الاكتفاء بإخبار نظام الرسوم المتحركة باستخدام الرسوم المتحركة الافتراضية.

لضبط السمة android:animateLayoutchanges على true تقوم ViewGroup بما يلي:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/verticalContainer"
    android:animateLayoutChanges="true" />

يؤدي تعيين هذه السمة على "صواب" إلى الحركة تلقائيًا لطرق العرض التي تتم إضافتها أو إزالتها من ViewGroup بالإضافة إلى طرق العرض المتبقية في ViewGroup.

تحريك تغييرات حالة العرض باستخدام StateListAnimator

تتيح لك الفئة StateListAnimator تحديد الرسوم المتحركة التي تعمل عندما تتغير حالة العرض. يعمل هذا الكائن كبرنامج تضمين Animator، ويتم استدعاء هذه الحركة متى تم تحديد تغييرات حالة العرض (مثل التغييرات "الضغطة" أو "التركيز".

يمكن تحديد StateListAnimator في مورد XML باستخدام جذر. عنصر <selector> وعناصر <item> الثانوية التي يحدد كل منها حالة عرض مختلفة تحدّدها الفئة StateListAnimator. على كل يتضمّن <item> تعريف مجموعة صور متحركة للسمات.

على سبيل المثال، ينشئ الملف التالي صورًا متحركة لقائمة حالات يغير المقياس x وy طريقة العرض عند الضغط عليها:

res/xml/animate_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

لإرفاق الصورة المتحركة لقائمة الحالات بأحد طرق العرض، أضف android:stateListAnimator على النحو التالي:

<Button android:stateListAnimator="@xml/animate_scale"
        ... />

يتم الآن استخدام الرسوم المتحركة المحددة في animate_scale.xml عندما يكون هذا الزر تغيرات الحالة.

أو، بدلاً من ذلك، لتعيين صورة متحركة لقائمة حالات في طريقة عرض في التعليمات البرمجية، استخدم AnimatorInflater.loadStateListAnimator()، وتعيين الرسوم المتحركة إلى طريقة العرض باستخدام طريقة View.setStateListAnimator().

أو بدلاً من تحريك خصائص طريقة العرض، يمكنك تشغيل صورة متحركة قابلة للرسم بين تغير الحالة، باستخدام AnimatedStateListDrawable. يمكن لبعض أدوات النظام في ويستخدم Android 5.0 هذه الصور المتحركة تلقائيًا. يوضح المثال التالي كيف لتعريف AnimatedStateListDrawable كمورد XML:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

استخدام أداة TypeEvaluator

إذا كنت تريد إضافة تأثير متحرك إلى نوع غير معروف لنظام Android، يمكنك إنشاء نوعك الخاص والمقيِّم من خلال تنفيذ واجهة TypeEvaluator. إن الأنواع التي التي يعرفها نظام Android هي int، أو float، أو أحد الألوان، وهي متوافق مع الأنواع IntEvaluator وFloatEvaluator وArgbEvaluator المقيّمين.

هناك طريقة واحدة فقط للتنفيذ في TypeEvaluator من واجهة المستخدم، وهي طريقة evaluate(). هذا يسمح أداة الرسوم المتحركة التي تستخدمها لعرض قيمة مناسبة لممتلكاتك المتحركة في النقطة الحالية من الرسوم المتحركة. توضّح الفئة FloatEvaluator كيفية إجراء ذلك:

private class FloatEvaluator : TypeEvaluator<Any> {

    override fun evaluate(fraction: Float, startValue: Any, endValue: Any): Any {
        return (startValue as Number).toFloat().let { startFloat ->
            startFloat + fraction * ((endValue as Number).toFloat() - startFloat)
        }
    }

}

public class FloatEvaluator implements TypeEvaluator {

    public Object evaluate(float fraction, Object startValue, Object endValue) {
        float startFloat = ((Number) startValue).floatValue();
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
    }
}

ملاحظة: عند تشغيل ValueAnimator (أو ObjectAnimator)، يتم حساب الكسر الحالي المنقضي من رسم متحرك (قيمة بين 0 و1) ثم يحسب نسخة مدرجة من ذلك اعتمادًا على أداة التعديل التي تستخدمها الكسر المستورَد هو ما تتلقّاه TypeEvaluator من خلال المعلمة fraction، لذا يمكنك لا يجب أن تأخذ في الاعتبار أداة الاستيفاء عند احتساب القيم المتحركة.

استخدام أدوات الاستيفاء

يحدد عامل الاستيفاء كيفية حساب قيم معينة في الرسوم المتحركة كدالة الوقت. على سبيل المثال، يمكنك تحديد الرسوم المتحركة التي تحدث خطيًا عبر الرسوم المتحركة بأكملها، مما يعني أن الرسوم المتحركة تتحرك بالتساوي طوال الوقت، أو يمكنك تحديد الرسوم المتحركة لاستخدامها أي نظام غير خطي، مثل استخدام التسارع أو التباطؤ في بداية أو نهاية الرسوم المتحركة.

يتلقى المداخلون في نظام الرسوم المتحركة جزءًا من الرسوم المتحركة التي تمثل الوقت المنقضي من الرسوم المتحركة. تقوم المداخلات بتعديل هذا الكسر ليتزامن مع نوع والرسوم المتحركة التي تهدف إلى تقديمها. يوفر نظام Android مجموعة من المحققين الداخليين الشائعين في android.view.animation package. إذا لم يناسبك أي مما سبق يمكنك تنفيذ واجهة TimeInterpolator وإنشاء تمتلكه.

نذكر على سبيل المثال الطريقة التي يتم من خلالها احتساب الكسور المضمَّنة في أداة الاستيفاء التلقائي AccelerateDecelerateInterpolator وLinearInterpolator في ما يلي. ولا تؤثر القيمة LinearInterpolator في الكسر المنقضي. يتسارع AccelerateDecelerateInterpolator إلى الصورة المتحركة يتراجع منها. تحدّد الطرق التالية منطق أدوات الاستيفاء هذه:

AccelerateDecelerateInterpolator

override fun getInterpolation(input: Float): Float =
        (Math.cos((input + 1) * Math.PI) / 2.0f).toFloat() + 0.5f

@Override
public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

محدّد عامل تشغيل الفيديو الخطي

override fun getInterpolation(input: Float): Float = input

@Override
public float getInterpolation(float input) {
    return input;
}

يمثل الجدول التالي القيم التقريبية التي تم احتسابها من خلال هذه القيم أدوات تفسيرية للرسوم المتحركة التي تستمر لمدة 1000 ملّي ثانية:

كما يبيّن الجدول، تغيّر LinearInterpolator القيم. بنفس السرعة، 2. لكل 200 ملّي ثانية تمر. تغيّر القيمة AccelerateDecelerateInterpolator القيم بشكلٍ أسرع من LinearInterpolator بين 200 و600 ملي ثانية وأبطأ بين 600 ملي ثانية. 1000 ملي ثانية.

تحديد الإطارات الرئيسية

يتألف كائن Keyframe من زوج الوقت/القيمة الذي يتيح لك تحديد حالة معينة في وقت معين من الرسوم المتحركة. يمكن أن يكون لكل إطار رئيسي أيضًا محوره أداة الاستيفاء للتحكّم في سلوك الحركة في الفاصل الزمني بين وقت الإطار الرئيسي ووقت هذا الإطار الرئيسي.

لإنشاء مثيل كائن Keyframe، يجب استخدام أحد الشركات المصنِّعة. أو ofInt() أو ofFloat() أو ofObject() للحصول على النوع المناسب من Keyframe. ثم تتصل طريقة المصنع ofKeyframe() الحصول على كائن PropertyValuesHolder. بعد الحصول على الكائن، يمكنك الحصول على رسم متحرك من خلال إدخال الكائن PropertyValuesHolder الكائن المراد تحريكه. يوضح مقتطف الرمز التالي كيفية إجراء ذلك:

val kf0 = Keyframe.ofFloat(0f, 0f)
val kf1 = Keyframe.ofFloat(.5f, 360f)
val kf2 = Keyframe.ofFloat(1f, 0f)
val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2)
ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation).apply {
    duration = 5000
}

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation);
rotationAnim.setDuration(5000);

تحريك طرق العرض

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

نظام الرسوم المتحركة للممتلكات يمكنها تحريك طرق العرض على الشاشة من خلال تغيير الخصائص الفعلية في كائنات "العرض". ضِمن بالإضافة إلى ذلك، يطلق على المشاهدات أيضًا تلقائيًا اسم invalidate() لتحديث الشاشة كلما تم تغيير خصائصها. في ما يلي السمات الجديدة في الفئة View التي تسهّل الصور المتحركة للسمات:

• translationX وtranslationY: تتحكم هذه الخصائص في مكان يقع العرض على شكل دلتا من إحداثياته اليسرى والعلوية التي يتم تعيينها حسب تخطيطه .
• rotation وrotationX وrotationY: هذه السمات التحكم في التدوير في الوضع الثنائي الأبعاد (الخاصية rotation) والعرض الثلاثي الأبعاد حول النقطة المحورية.
• scaleX وscaleY: تتحكم هذه الخصائص في التحجيم الثنائي الأبعاد عرض حول نقطة المحور
• pivotX وpivotY: تتحكم هذه الخصائص في موقع النقطة المحورية، التي يحدث حولها تحويلات الدوران والتحجيم. بشكل افتراضي، في منتصف الكائن.
• x وy: هذه هي خصائص منفعة بسيطة لوصف الموقع النهائي للعرض في حاويته، كمجموع للقيم المتبقية والعلوية قيم translateX وTranslationY.
• alpha: يمثل شفافية ألفا في العرض. هذه القيمة 1 (قيمة فارغة) بشكلٍ تلقائي، مع القيمة 0 التي تمثل الشفافية الكاملة (غير مرئية).

لتحريك خاصية لكائن عرض، مثل لونه أو قيمة تدويره، ما عليك سوى فعله هو إنشاء أداة حركة الخصائص وتحديد خاصية العرض التي تريد صورة متحركة. مثلاً:

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f)

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f);

لمزيد من المعلومات عن إنشاء الرسوم المتحركة، راجع الأقسام المتعلقة بإنشاء الصور المتحركة باستخدام ValueAnimator وObjectAnimator:

إنشاء تأثيرات متحركة باستخدام ViewPropertyAnimator

يوفّر ViewPropertyAnimator طريقة بسيطة لإضافة تأثيرات متحركة متعددة خصائص View بشكل متوازٍ، باستخدام قيمة Animator أساسية واحدة الخاص بك. ويعمل هذا الإجراء إلى حدّ كبير مثل ObjectAnimator، لأنّه يغيّر القيم الفعلية لخصائص الملف الشخصي، ولكنها أكثر كفاءة عند تحريك العديد من الخصائص في مرة واحدة. بالإضافة إلى ذلك، فإن رمز استخدام ViewPropertyAnimator هو أكثر إيجازًا وأسهل في القراءة. توضح مقتطفات الرمز التالية الاختلافات في استخدام رموز ObjectAnimator عنصرًا، عنصر واحد وObjectAnimator، وViewPropertyAnimator عند تحريك السمتَين x وy من ملف شخصي في آنٍ واحد.

كائنات عناصر متحركة متعددة

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}

ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);
ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();

أداة One ObjectAnimator

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start();

ViewPropertyAnimator

myView.animate().x(50f).y(100f)

myView.animate().x(50f).y(100f);

للحصول على معلومات أكثر تفصيلاً حول ViewPropertyAnimator، يمكنك الاطّلاع على مطوّري تطبيقات Android المعنيّين. مدونة مشاركة.

تعريف الصور المتحركة بتنسيق XML

يتيح لك نظام الرسوم المتحركة للخصائص الإعلان عن الرسوم المتحركة للخصائص باستخدام XML بدلاً من برمجيًا. من خلال تحديد الصور المتحركة بتنسيق XML، يمكنك إعادة استخدام الصور المتحركة بسهولة. في أنشطة متعددة وتعديل تسلسل الرسوم المتحركة بسهولة أكبر.

لتمييز ملفات الصور المتحركة التي تستخدم واجهات برمجة التطبيقات الجديدة للصور المتحركة للخصائص عن الملفات التي تستخدم إطار عمل العرض المتحركة القديم بدءًا من الإصدار 3.1 من نظام التشغيل Android، يجب حفظ ملفات XML الخاصة برسوم متحركة للخصائص في دليل res/animator/.

تشمل فئات الرسوم المتحركة للخصائص التالية توافق إعلان XML مع علامات XML التالية:

• ValueAnimator - <animator>
• ObjectAnimator - <objectAnimator>
• AnimatorSet - <set>

للعثور على السمات التي يمكنك استخدامها في بيان XML، يمكنك الاطّلاع على المقالة حركة الموارد يشغّل المثال التالي مجموعتي صور متحركة للكائن بالتسلسل، مع أول مجموعة متداخلة تقوم بتشغيل صور متحركة لكائن معًا:

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

لتشغيل هذه الحركة، يجب تضخيم موارد XML في الرمز البرمجي إلى عنصر AnimatorSet، ثم ضبط العناصر المستهدفة لجميع المؤثرات الحركية. قبل بدء تشغيل الرسوم المتحركة. يؤدي استدعاء setTarget() إلى ضبط كائن مستهدف واحد لكل العناصر الثانوية لـ AnimatorSet لتوفير تجربة مريحة للمستخدمين. يوضح الرمز التالي كيفية إجراء هذا:

(AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) as AnimatorSet).apply {
    setTarget(myObject)
    start()
}

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();

يمكنك أيضًا الإعلان عن ValueAnimator في XML باعتباره كما هو موضح في المثال التالي:

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueType="floatType"
    android:valueFrom="0f"
    android:valueTo="-100f" />

لاستخدام ValueAnimator السابق في الرمز، عليك يجب تضخيم الكائن، وإضافة AnimatorUpdateListener, والحصول على قيمة الرسوم المتحركة المحدّثة، واستخدامها في خاصية من طرق العرض، كما هو موضح في التعليمة البرمجية التالية:

(AnimatorInflater.loadAnimator(this, R.animator.animator) as ValueAnimator).apply {
    addUpdateListener { updatedAnimation ->
        textView.translationX = updatedAnimation.animatedValue as Float
    }

    start()
}

ValueAnimator xmlAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this,
        R.animator.animator);
xmlAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

xmlAnimator.start();

للحصول على معلومات عن بنية XML لتحديد الصور المتحركة للخصائص، يمكنك الاطّلاع على حركة الموارد .

التأثيرات المحتملة على أداء واجهة المستخدم

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

تتم إضافة العمل المطلوب لتحريك واجهة المستخدم إلى مرحلة الصورة المتحركة مسار العرض. يمكنك معرفة ما إذا كانت الرسوم المتحركة تؤثر على مستوى أداء تطبيقك من خلال تفعيل عرض وحدة معالجة الرسومات للملف الشخصي مراقبة مرحلة الرسوم المتحركة. لمزيد من المعلومات، يُرجى الاطّلاع على عرض الملف الشخصي لوحدة معالجة الرسومات. جولة تفصيلية.