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

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

يمكن للصور المتحركة أن تُجري سلسلة من عمليات التحويل البسيطة (الموضع والحجم والتدوير والشفافية) على محتوى عنصر عرض. لذلك، إذا كان لديك عنصر 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 العديد من فئات التمثيل اللوني الفرعية التي تحدِّد منحنيات مختلفة للسرعة: على سبيل المثال، يوجِّه 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 والعلامات والسمات المتاحة، يُرجى الاطّلاع على موارد الصور المتحركة.

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