يمكن لمورد الرسوم المتحركة تحديد نوع من نوعين من الرسوم المتحركة:
- الصور المتحركة في الموقع
- يتم إنشاء صورة متحركة عن طريق تعديل قيم سمة العنصر خلال فترة محدّدة
باستخدام
Animator
. - عرض الصورة المتحركة
-
هناك نوعان من الرسوم المتحركة التي يمكنك تنفيذها باستخدام إطار عمل الرسوم المتحركة للعرض:
- الصور المتحركة للمراهقين: يتم إنشاء صورة متحركة من خلال تنفيذ سلسلة من عمليات التحويل على صورة واحدة باستخدام
Animation
. - إطار الصور المتحركة: يتم إنشاء صورة متحركة من خلال عرض سلسلة من الصور بالترتيب باستخدام العلامة
AnimationDrawable
.
- الصور المتحركة للمراهقين: يتم إنشاء صورة متحركة من خلال تنفيذ سلسلة من عمليات التحويل على صورة واحدة باستخدام
مؤثرات حركية للموقع
صورة متحركة يتم تحديدها في XML تعدِّل خصائص العنصر المستهدف، مثل لون الخلفية أو قيمة ألفا، خلال فترة زمنية محددة.
- موقع الملف:
res/animator/filename.xml
يتم استخدام اسم الملف كرقم تعريف المورد.- نوع بيانات المورد المجمّع:
- مؤشر المورد إلى
ValueAnimator
أوObjectAnimator
أوAnimatorSet
- مرجع للموارد:
-
في الرموز البرمجية المستندة إلى JavaScript أو لغة Kotlin:
R.animator.filename
في ملف XML:@[package:]animator/filename
- بناء الجملة:
-
<set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["restart" | "reverse"] android:valueType=["intType" | "floatType"]/> <animator android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["restart" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ... </set> </set>
يجب أن يحتوي الملف على عنصر جذر واحد: إما
<set>
أو<objectAnimator>
أو<valueAnimator>
. يمكنك تجميع عناصر الرسوم المتحركة معًا داخل العنصر<set>
، بما في ذلك عناصر<set>
الأخرى. - العناصر:
- مثلا:
-
ملف XML تم حفظه في
res/animator/property_animator.xml
:<set android:ordering="sequentially"> <set> <objectAnimator android:propertyName="x" android:duration="500" android:valueTo="400" android:valueType="intType"/> <objectAnimator android:propertyName="y" android:duration="500" android:valueTo="300" android:valueType="intType"/> </set> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="1f"/> </set>
لتشغيل هذه الحركة، عليك تضخيم موارد XML في رمزك إلى كائن
AnimatorSet
، ثم ضبط الكائنات المستهدفة لكل الصور المتحركة قبل بدء مجموعة الصور المتحركة. يؤدي استدعاءsetTarget()
إلى تعيين كائن هدف واحد لجميع عناصرAnimatorSet
الثانوية لتسهيل الأمر. ويوضح الرمز التالي كيفية إجراء ذلك:Kotlin
val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) .apply { setTarget(myObject) start() }
Java
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext, R.animator.property_animator); set.setTarget(myObject); set.start();
- راجِع أيضًا:
-
- نظرة عامة على الصور المتحركة للموقع
- عروض توضيحية لواجهة برمجة التطبيقات للاطّلاع على أمثلة حول كيفية استخدام نظام الصور المتحركة للمواقع
عرض الصورة المتحركة
يتوافق إطار عمل الصور المتحركة للعرض مع الرسوم المتحركة التي يتم عرضها عند المراهقة أو كل إطار على حدة، والتي يتم تعريفها بتنسيق XML. توضّح الأقسام التالية كيفية استخدام كلتا الطريقتين.
رسوم متحركة للمراهقين
يشير ذلك المصطلح إلى صورة متحركة يتم تحديدها في XML وتنفّذ انتقالات على أحد الرسومات مثل التدوير والتلاشي والحركة والتمديد.
- موقع الملف:
res/anim/filename.xml
يتم استخدام اسم الملف كرقم تعريف المورد.- نوع بيانات المورد المجمّع:
- مؤشر المرجع على
Animation
- مرجع للموارد:
-
في لغة Java:
R.anim.filename
في ملف XML:@[package:]anim/filename
- بناء الجملة:
-
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] > <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" android:pivotY="float" /> <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /> <set> ... </set> </set>
يجب أن يحتوي الملف على عنصر جذر واحد: إما عنصر
<alpha>
أو<scale>
أو<translate>
أو<rotate>
أو<set>
يحتوي على مجموعة (أو مجموعات) من عناصر الرسوم المتحركة الأخرى (بما في ذلك عناصر<set>
المدمجة). - العناصر:
- مثلا:
-
ملف XML تم حفظه في
res/anim/hyperspace_jump.xml
:<set xmlns:android="http://schemas.android.com/apk/res/android" 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/accelerate_interpolator" android:startOffset="700"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> </set> </set>
يطبّق رمز التطبيق التالي الصورة المتحركة على
ImageView
ويبدأ الحركة:Kotlin
val image: ImageView = findViewById(R.id.image) val hyperspaceJump: Animation = AnimationUtils.
loadAnimation
(this, R.anim.hyperspace_jump) image.startAnimation
(hyperspaceJump)Java
ImageView image = (ImageView) findViewById(R.id.image); Animation hyperspaceJump = AnimationUtils.
loadAnimation
(this, R.anim.hyperspace_jump); image.startAnimation
(hyperspaceJump); - راجِع أيضًا:
مخترقون
أداة تبادل البيانات هي أداة تعديل للصور المتحركة يتم تعريفها في ملف XML وتؤثر في معدل التغيير في إحدى الصور المتحركة. ويتيح ذلك إمكانية تسريع تأثيرات الرسوم المتحركة الحالية أو إبطاءها أو تكرارها أو ارتدادها، وما إلى ذلك.
يتم تطبيق أداة الاستيفاء على عنصر الرسوم المتحركة الذي يتضمّن السمة android:interpolator
، وتُعتبر قيمته مرجعًا لمورد أداة الاستيفاء.
جميع أنواع الكلمات الرئيسية المتوافقة مع التطبيق المتوفّرة على Android هي فئات فرعية من الفئة Interpolator
. لكل فئة من فئات أداة الاستيفاء، يتضمّن Android
موردًا عامًا يمكنك الرجوع إليه لتطبيق أداة الاستيفاء على صورة متحركة
باستخدام السمة android:interpolator
.
يحدد الجدول التالي المورد المراد استخدامه لكل أداة إقراض:
فئة الإذعان | معرِّف المورد |
---|---|
AccelerateDecelerateInterpolator |
@android:anim/accelerate_decelerate_interpolator |
AccelerateInterpolator |
@android:anim/accelerate_interpolator |
AnticipateInterpolator |
@android:anim/anticipate_interpolator |
AnticipateOvershootInterpolator |
@android:anim/anticipate_overshoot_interpolator |
BounceInterpolator |
@android:anim/bounce_interpolator |
CycleInterpolator |
@android:anim/cycle_interpolator |
DecelerateInterpolator |
@android:anim/decelerate_interpolator |
LinearInterpolator |
@android:anim/linear_interpolator |
OvershootInterpolator |
@android:anim/overshoot_interpolator |
وفي ما يلي كيفية تطبيق إحدى هذه الطرق باستخدام السمة android:interpolator
:
<set android:interpolator="@android:anim/accelerate_interpolator"> ... </set>
أجهزة دمج مخصّصة
إذا لم تكن راضيًا عن أداة الاستيفاء التي توفرها المنصة، يمكنك إنشاء مورد مخصص من أداة الاستيفاء بسمات معدَّلة.
على سبيل المثال، يمكنك ضبط معدّل التسارع في AnticipateInterpolator
أو ضبط عدد الدورات لـ CycleInterpolator
. للقيام بذلك، يمكنك إنشاء مورد
الاستيفاء الخاص بك في ملف XML.
- موقع الملف:
res/anim/filename.xml
يتم استخدام اسم الملف كرقم تعريف المورد.- نوع بيانات المورد المجمّع:
- مؤشر المورد إلى كائن الاستيفاء المقابل
- مرجع للموارد:
-
في ملف XML:
@[package:]anim/filename
- بناء الجملة:
-
<?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" />
إذا لم تطبِّق أي سمات، سيعمل الملخّص الخاص بك تمامًا كتلك التي توفّرها المنصة، والمذكورة في الجدول السابق.
- العناصر:
- ملاحظة: عند تحديد كل تطبيق
Interpolator
في ملف XML، يكون له اسم يبدأ بحرف صغير. - مثلا:
-
ملف XML تم حفظه في
res/anim/my_overshoot_interpolator.xml
:<?xml version="1.0" encoding="utf-8"?> <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:tension="7.0" />
يستخدم ملف XML في شكل رسوم متحركة هذا أداة الاستيفاء:
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/my_overshoot_interpolator" android:fromXScale="1.0" android:toXScale="3.0" android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%" android:pivotY="50%" android:duration="700" />
إطار الصورة المتحركة
صورة متحركة يتم تحديدها في ملف XML وتعرض سلسلة من الصور بالترتيب، مثل فيلم.
- موقع الملف:
res/drawable/filename.xml
يتم استخدام اسم الملف كرقم تعريف المورد.- نوع بيانات المورد المجمّع:
- مؤشر المرجع على
AnimationDrawable
- مرجع للموارد:
-
في لغة Java:
R.drawable.filename
في ملف XML:@[package:]drawable.filename
- بناء الجملة:
-
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" /> </animation-list>
- العناصر:
- مثلا:
-
ملف XML تم حفظه في
res/drawable/rocket_thrust.xml
:<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <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>
يضبط رمز التطبيق التالي الصورة المتحركة كخلفية
View
، ثم شغِّل الصورة المتحركة:Kotlin
val rocketImage: ImageView = findViewById(R.id.rocket_image) rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust) val rocketAnimation = rocketImage.background
if (rocketAnimation isAnimatable
) { rocketAnimation.start()
}Java
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust); rocketAnimation = rocketImage.getBackground()
; if (rocketAnimation instanceofAnimatable
) { ((Animatable)rocketAnimation).start()
; } - راجِع أيضًا: