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

تجربة طريقة Compose

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

إضافة حركة إلى المتّجهات القابلة للرسم ←

في بعض الحالات، يجب إضافة حركة إلى الصور. يكون ذلك مفيدًا إذا أردت عرض صورة متحرّكة مخصّصة للتحميل تتألف من عدة صور أو إذا أردت تغيير شكل رمز بعد إجراء المستخدم. يوفّر 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 ثم يتم تحريكها عند لمس الشاشة:

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() })
}

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 والعلامات والسمات المتاحة، يمكنك الاطّلاع على مقالة موارد الصور المتحركة.

استخدام AnimatedVectorDrawable

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

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

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

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

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

‫res/drawable/vectordrawable.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/animatorvectordrawable.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

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

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

‫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 الناتج:

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

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

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