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

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

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

Spring AnimationSpec →

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

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

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

إضافة مكتبة 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 وقدِّم كائنًا وخاصية الكائن التي تريد تحريكها.

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

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

ضبط السرعة

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

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

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

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

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

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

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

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

ضبط الاحتكاك

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

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

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

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

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

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

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() وأدخِل إما أحد الثوابت الخاصة بالحد الأدنى للتغيير المرئي أو قيمة تحتاج إلى احتسابها لسمة مخصّصة. لمزيد من المعلومات عن احتساب هذه القيمة، راجِع القسم احتساب الحدّ الأدنى لقيمة التغيير المرئي

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

ملاحظة: لا تحتاج إلى ضبط قيمة إلا عند إضافة تأثير متحرك إلى خاصيّة مخصّصة غير محدّدة بالبكسل.

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

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

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

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