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

تجربة طريقة Compose

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

إضافة حركة إلى الخصائص ←

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

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

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