نقل طرق العرض باستخدام صورة متحركة سريعة

تجربة ميزة "الكتابة"

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

Spring AnimationSpec →

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

الشكل 1. المؤثرات الحركية للتنقّل السريع

للاطّلاع على مواضيع ذات صلة، يُرجى قراءة الأدلة التالية:

• حركة مستنِدة إلى الفيزياء
• إضافة حركة متحركة باستخدام قوانين الربيع

إضافة مكتبة AndroidX

لاستخدام الرسومات المتحرّكة المستندة إلى التأثيرات الفيزيائية، عليك إضافة مكتبة AndroidX إلى مشروعك على النحو التالي:

1. افتح ملف build.gradle الخاص بوحدة تطبيقك.
2. أضِف مكتبة AndroidX إلى قسم dependencies.

   رائع

           dependencies {
               implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
           }
           

   Kotlin

           dependencies {
               implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
           }
           

إنشاء صورة متحركة للرمي

تتيح لك فئة FlingAnimation إنشاء تأثير متحرك للرمي لكائن. لإنشاء صورة متحركة سريعة، يمكنك إنشاء مثيل للفئة FlingAnimation وتقديم كائن وسمة العنصر الذي تريد تحريكه.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

ضبط السرعة

تحدِّد السرعة المتجهة الابتدائية السرعة التي تتغيّر بها سمة الصورة المتحركة في بداية الصورة المتحركة. يتم ضبط السرعة التلقائية للبدء صفر بكسل في الثانية. لذلك، عليك تحديد سرعة البدء لضمان عدم انتهاء الصورة المتحركة على الفور.

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

لضبط السرعة، استخدِم الطريقة setStartVelocity() وأدخِل السرعة بالبكسل في الثانية. تُعرِض الطريقة عنصر الرمي الذي تم ضبط السرعة عليه.

ملاحظة: استخدِم فئتَي GestureDetector.OnGestureListener و VelocityTracker لاسترداد واحتساب سرعة الإيماءات التي يتم إجراؤها باللمس، على التوالي.

ضبط نطاق قيم الصورة المتحركة

يمكنك ضبط الحد الأدنى والحد الأقصى لقيم الصور المتحركة عندما تريد الحد من قيمة السمة إلى نطاق معيّن. يكون عنصر التحكّم في النطاق مفيدًا بشكل خاص عند إضافة مؤثرات متحركة إلى الخصائص التي لها نطاق أساسي معيّن، مثل شفافية اللون (من 0 إلى 1).

ملاحظة: عندما تصل قيمة الرسوم المتحركة للرمي السريع إلى الحد الأدنى أو الأقصى، تنتهي الرسوم المتحركة.

لضبط الحد الأدنى والأقصى للقيمة، استخدِم الطريقتَين setMinValue() وsetMaxValue()، على التوالي. تُرجع كلتا الطريقتين كائن الرسوم المتحركة الذي تم تعيين القيمة له.

ضبط الاحتكاك

تتيح لك الطريقة setFriction() تغيير معاناة الصورة المتحركة. ويحدّد هذا المقياس مدى سرعة انخفاض السرعة في الصورة المتحركة.

ملاحظة: إذا لم تضبط الاحتكاك في بداية الرسم المتحرّك، سيستخدم الرسم المتحرّك قيمة احتكاك تلقائية تبلغ 1.

تُعيد الطريقة العنصر الذي يستخدم قيمة الاحتكاك التي تقدِّمها.

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

يوضّح المثال التالي انحدارًا أفقيًا. والسرعة التي تم تسجيلها من أداة تتبُّع السرعة هي velocityX، وتم ضبط حدود الانتقال على 0 وmaxScroll. تم ضبط معامل الاحتكاك على 1.1.

Kotlin

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

ضبط الحد الأدنى للتغيير المرئي

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

ليس من الضروري استدعاء هذه الطريقة عند إضافة تأثيرات متحركة إلى DynamicAnimation.ViewProperty لأنّ مقياس الحد الأدنى للتغيير المرئي يتم استخراجه من السمة. مثلاً:

• الحد الأدنى التلقائي لقيمة التغيير المرئية هو وحدة بكسل واحدة لسمات الملف الشخصي، مثل TRANSLATION_X وTRANSLATION_Y وTRANSLATION_Z وSCROLL_X وSCROLL_Y.
• بالنسبة إلى الصور المتحركة التي تستخدم التدوير، مثل ROTATION ROTATION_X وROTATION_Y، يكون الحد الأدنى للتغيير المريء هو MIN_VISIBLE_CHANGE_ROTATION_DEGREES أو 1/10 بكسل.
• بالنسبة إلى الرسوم المتحركة التي تستخدم الشفافية، يكون الحد الأدنى للتغيير المرئي هو MIN_VISIBLE_CHANGE_ALPHA أو 1/256.

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

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

ملاحظة: يجب تمرير قيمة فقط عند تحريك خاصية مخصّصة لم يتم تحديدها بالبكسل.

احتساب الحد الأدنى لقيمة التغيير المرئي

لاحتساب الحد الأدنى لقيمة التغيير المرئي لسمة مخصّصة، استخدِم المعادلة التالية:

الحد الأدنى للتغيير المرئي = نطاق قيمة السمة المخصّصة / نطاق الرسوم المتحركة بالبكسل

على سبيل المثال، ينتقل المقياس الذي تريد إضافة مؤثرات متحركة إليه من 0 إلى 100. ويعادل ذلك تغييرًا في 200 بكسل. وفقًا للصيغة، الحد الأدنى لقيمة التغيير المرئي هو 100 / 200 يساوي 0.5 بكسل.