عرض الصورة المتحركة

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

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

تحريك السمات →

يمكنك استخدام نظام عرض الرسوم المتحركة لإجراء رسم متحرك متداخل على طرق العرض. تحسب Tween animation الحركة باستخدام معلومات مثل نقطة البداية ونقطة النهاية والحجم والدوران وغيرها من الجوانب الشائعة للحركة.

يمكن أن تُجري الصورة المتحركة المتسلسلة سلسلة من عمليات التحويل البسيطة (الموضع والحجم والدوران والشفافية) على محتوى كائن View. وبالتالي، إذا كان لديك عنصر TextView، يمكنك نقل النص أو تدويره أو تكبيره أو تصغيره. إذا كانت تحتوي على صورة خلفية، سيتم تحويل صورة الخلفية مع النص. يوفّر animation package جميع الصفوف المستخدَمة في الصور المتحركة لمرحلة ما قبل سن المراهقة.

تحدّد سلسلة تعليمات الصور المتحركة الصورة المتحركة في مرحلة ما قبل المراهقة، ويتم تحديدها باستخدام رمز XML أو Android. كما هو الحال مع تحديد تنسيق، ننصح باستخدام ملف XML لأنّه أكثر سهولة في القراءة وإعادة الاستخدام والاستبدال من الترميز الثابت للحركة. في المثال أدناه، نستخدم تنسيق XML. (لمعرفة المزيد من المعلومات حول تعريف الحركة في رمز التطبيق الخاص بك، بدلاً من XML، يمكنك الرجوع إلى الفئة AnimationSet والفئات الفرعية الأخرى في Animation).

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

ينتمي ملف XML الخاص بالحركة إلى دليل res/anim/ في مشروع Android . يجب أن يتضمّن الملف عنصرًا جذرًا واحدًا: إما <alpha> أو <scale> أو <translate> أو <rotate> أو عنصر وسيط أو <set> يحتوي على مجموعات من هذه العناصر (التي قد تتضمّن <set> آخر). ويتم تطبيق جميع تعليمات التحريك تلقائيًا في الوقت نفسه. لكي تحدث هذه العناصر بشكل تسلسلي، يجب تحديد سمة startOffset، كما هو موضّح في المثال أدناه.

يتم استخدام ملف XML التالي من أحد تطبيقات ApiDemos لتمديده، ثم تدويره وتحريكه في الوقت نفسه.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

وإحداثيات الشاشة (غير المستخدَمة في هذا المثال) هي (0,0) في الزاوية العلوية اليمنى، وتزداد مع الانتقال لأسفل وإلى اليمين.

يمكن تحديد بعض القيم، مثل pivotX، نسبةً إلى الكائن نفسه أو بالنسبة إلى العنصر الرئيسي. احرص على استخدام التنسيق الصحيح لما تريده ("50" للنسبة المئوية 50% بالنسبة إلى العنصر الرئيسي، أو "50%" للنسبة المئوية 50% بالنسبة إلى العنصر نفسه).

يمكنك تحديد كيفية تطبيق عملية تحويل بمرور الوقت من خلال تحديد Interpolator. يتضمّن Android العديد من الفئات الفرعية لأداة Interpolator التي تحدّد منحنيات سرعة مختلفة: على سبيل المثال، يطلب AccelerateInterpolator من عملية التحويل البدء ببطء والسرعة. ولكلّ منها قيمة سمة يمكن تطبيقها في ملف XML.

بعد حفظ ملف XML هذا باسم hyperspace_jump.xml في دليل res/anim/ الخاص بالمشروع، سيشير الرمز التالي إليه وسيطبّقه على عنصر ImageView من التنسيق.

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

كبديل عن startAnimation()، يمكنك تحديد وقت بدء الصورة المتحركة باستخدام Animation.setStartTime()، ثم إسناد الصورة المتحركة إلى العرض باستخدام View.setAnimation().

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

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