![](https://developer.android.com/static/training/animation/videos/drawable-animation.gif?authuser=5&hl=ar)
في بعض الحالات، تحتاج الصور إلى تأثيرات متحركة. ويكون هذا مفيدًا إذا كنت ترغب في عرض رسوم متحركة مخصصة للتحميل تتألف من عدة صور أو إذا كنت تريد أن تتحول الأيقونة بعد إجراء المستخدم. يوفّر Android خيارين لتحريك العناصر القابلة للرسم.
الخيار الأول هو استخدام AnimationDrawable
. يتيح لك ذلك تحديد العديد من الملفات الثابتة القابلة للرسم التي تعرض ملفًا واحدًا في كل مرة لإنشاء صورة متحركة. الخيار الثاني هو استخدام AnimatedVectorDrawable
، ما يتيح لك تحريك خصائص المتجه القابل للرسم.
استخدام AnimationDrawable
تتمثل إحدى طرق إنشاء رسوم متحركة في تحميل سلسلة من الموارد القابلة للرسم، مثل لفافة فيلم.
تستند الفئة AnimationDrawable
إلى هذه الأنواع من الصور المتحركة القابلة للرسم.
يمكنك تحديد إطارات الصور المتحركة في رمزك باستخدام واجهة برمجة تطبيقات AnimationDrawable
class API، ولكن من الأسهل تحديدها باستخدام ملف 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
الناتج:
AnimatedVectorDrawable
.معاينة الرسومات الموجّهة التي يمكن رسمها (AVD)
تتيح لك أداة متحرّكة الرسومات الموجّهة التي يمكن رسمها في "استوديو Android" معاينة الموارد القابلة للرسم المتحركة. تساعدك هذه الأداة في معاينة موارد <animation-list>
و<animated-vector>
و<animated-selector>
في "استوديو Android" وتسهّل تحسين الصور المتحركة المخصّصة.
![مستخدم يعاين ويشغِّل صورة متحركة داخل "استوديو Android"](https://developer.android.com/static/studio/images/releases/avd-preview.gif?authuser=5&hl=ar)
لمزيد من المعلومات، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات لـ
AnimatedVectorDrawable
.