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

تجربة طريقة Compose

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

Spring AnimationSpec →

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

الشكل 1 الصورة المتحركة المستندة إلى حركة النقر

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

• الحركة المستندة إلى الفيزياء
• تحريك الحركة باستخدام فيزياء Spring

إضافة مكتبة 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 في الثانية، ثم تحويلها إلى بكسل في الثانية. يسمح تحديد القيمة بالوحدة dp في الثانية بأن تكون السرعة مستقلة عن كثافة الجهاز وعوامل شكله. لمزيد من المعلومات حول تحويل السرعة الأولية إلى بكسل في الثانية، يُرجى الرجوع إلى قسم تحويل الوحدة dp في الثانية إلى بكسل في الثانية في Spring Animation.

لضبط السرعة، استدعِ الطريقة 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 لأنّ الـ حد الأدنى للتغيير المرئي مستمد من السمة. على سبيل المثال:

• الحد الأدنى التلقائي للتغيير المرئي هو 1 بكسل لسمات العرض مثل 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 بكسل.