تحريك الرسومات القابلة للرسم

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

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

الخيار الأول هو استخدام AnimationDrawable. ويتيح لك ذلك تحديد العديد من الملفات الثابتة القابلة للرسم والتي تعرض واحدًا تلو الآخر لإنشاء صورة متحركة. الخيار الثاني هو استخدام AnimatedVectorDrawable، الذي يتيح لك تحريك خصائص المتّجه القابل للرسم.

استخدام AnimationDrawable

تتمثل إحدى طرق إنشاء الرسوم المتحركة في تحميل سلسلة من الموارد القابلة للرسم، مثل لفة فيلم. تمثل فئة AnimationDrawable الأساس لهذه الأنواع من الرسوم المتحركة القابلة للرسم.

يمكنك تحديد إطارات الصورة المتحركة في رمزك باستخدام واجهة برمجة التطبيقات للفئة AnimationDrawable، ولكن من الأسهل تحديد هذه الإطارات باستخدام ملف XML واحد يسرد الإطارات التي تشكّل الصورة المتحركة. وينتمي ملف XML لهذا النوع من الصور المتحركة إلى دليل res/drawable/ لمشروع Android الخاص بك. في هذه الحالة، توفر التعليمات ترتيب كل إطار ومدته في الرسم المتحرك.

يتكوّن ملف XML من عنصر <animation-list> بصفته العقدة الجذر وسلسلة من عُقد <item> الثانوية التي تحدد كل منها إطارًا، وهو مورد قابل للرسم ومدته. في ما يلي مثال على ملف XML لصورة متحرّكة Drawable:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

تعمل هذه الرسوم المتحركة لثلاثة إطارات. ويؤدي ضبط السمة android:oneshot في القائمة على true إلى تشغيل الدورة مرة واحدة ثم التوقّف مع الاستمرار في الإطار الأخير. في حال ضبط السمة android:oneshot على false، سيتم تكرار الرسوم المتحركة.

إذا حفظت XML باسم rocket_thrust.xml في دليل res/drawable/ الخاص بالمشروع، يمكنك إضافته كصورة خلفية إلى View ثم طلب start() لتشغيله. وفي ما يلي مثال على نشاط تتم فيه إضافة الصورة المتحركة إلى ImageView ثم إضافة مؤثرات حركية إليها عند لمس الشاشة:

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

يُرجى العِلم أنّه لا يمكن طلب طريقة start() التي سيتم استدعاءها في AnimationDrawable أثناء استخدام طريقة onCreate() على Activity، لأنّ AnimationDrawable لم يتم ربطها بالنافذة بالكامل بعد. لتشغيل الصورة المتحركة على الفور بدون الحاجة إلى تفاعل، يمكنك استدعاؤها من طريقة onStart() في Activity، وهو ما يتم استدعاؤه عندما يجعل Android العرض مرئيًا على الشاشة.

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

استخدام MoveVectorDrawable

المتّجه القابل للرسم هو نوع من الرسومات القابلة للرسم التي تكون قابلة للتوسّع بدون أن تتقطّع أو تكون مموهة. تتيح لك فئة AnimatedVectorDrawable و AnimatedVectorDrawableCompat للتوافق مع الأنظمة القديمة إمكانية تحريك خصائص الخط المتجه القابل للرسم، مثل تدويره أو تغيير بيانات المسار لتحويلها إلى صورة مختلفة.

يمكنك عادةً تحديد الرسومات المتجهة المتحركة القابلة للرسم في ثلاثة ملفات XML:

  • متجه قابل للرسم مع عنصر <vector> في res/drawable/.
  • متّجه متحرك قابل للرسم يحتوي على عنصر <animated-vector> في res/drawable/.
  • واحد أو أكثر من أدوات الصور المتحركة للكائنات مع العنصر <objectAnimator> في res/animator/.

يمكن للعناصر المتحركة القابلة للرسم باتجاهات حركية متحركة لسمات العنصرَين <group> و<path>. يحدد العنصر <group> مجموعة من المسارات أو المجموعات الفرعية، ويحدّد العنصر <path> المسارات التي سيتم رسمها.

عند تحديد متّجه قابل للرسم لتحريكه، استخدِم السمة android:name لتحديد اسم فريد للمجموعات والمسارات، كي تتمكّن من الرجوع إليها من خلال تعريف برامج الصور المتحرّكة. على سبيل المثال:

res/drawable/forward drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

يشير تعريف المتجه المتحرك القابل للرسم إلى المجموعات والمسارات في المتجه القابل للرسم بأسمائها:

res/drawable/animator تعذّر drawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

تمثّل تعريفات الصور المتحركة كائنات ObjectAnimator أو AnimatorSet. يقوم أول اختصاصي في هذا المثال بتدوير المجموعة المستهدفة بزاوية 360 درجة:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

يقوم حامل الرسوم المتحركة الثاني في هذا المثال بتحويل مسار المتجه القابل للرسم من شكل إلى آخر. يجب أن تكون المسارات متوافقة مع عملية التشكيل، فيجب أن تحتوي على عدد الأوامر نفسه وعدد المعلمات نفسه في كل أمر.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

إليك قيمة AnimatedVectorDrawable الناتجة:

الشكل 2. AnimatedVectorDrawable.

معاينة قابلة للرسم على شكل ملف متّجه (AVD)

تتيح لك أداة Move Vector Drawable في "استوديو Android" معاينة موارد الرسوم المتحركة القابلة للرسم. تساعدك هذه الأداة في معاينة موارد <animation-list> و<animated-vector> و<animated-selector> في "استوديو Android" وتسهّل تحسين الصور المتحركة المخصّصة.

مستخدم يعاين صورة متحركة ويشغّلها داخل &quot;استوديو Android&quot;
الشكل 3. أداة Move Vector Drawable في "استوديو Android"

للمزيد من المعلومات، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ AnimatedVectorDrawable.