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

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

استخدام ImageVectorDrawable

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

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

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

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

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

res/drawable/vectorable.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 للحفاظ على هذا التنسيق

<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. ويجب أن يكون عنوان URL الخاص بـ AnimatedVectorDrawable.

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

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

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

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