يمكن لمورد الرسوم المتحركة تحديد أحد نوعين من الرسوم المتحركة:
- الصور المتحركة للموقع
- يتم إنشاء رسم متحرك عن طريق تعديل قيم الخصائص لعنصر خلال فترة زمنية محددة
من خلال
Animator
. - عرض الصورة المتحركة
-
هناك نوعان من الصور المتحركة يمكنك إجراؤها باستخدام إطار عمل عرض الرسوم المتحركة:
- تأثير الصورة المتحركة في مرحلة ما قبل المدرسة: ينشئ صورة متحركة من خلال إجراء سلسلة من التحويلات على صورة واحدة.
مع
Animation
. - إطار الحركة: ينشئ صورة متحركة من خلال عرض تسلسل من الصور بالترتيب.
مع
AnimationDrawable
.
- تأثير الصورة المتحركة في مرحلة ما قبل المدرسة: ينشئ صورة متحركة من خلال إجراء سلسلة من التحويلات على صورة واحدة.
مع
الصور المتحركة للخصائص
يشير ذلك المصطلح إلى حركة يتم تحديدها في ملف XML تعمل على تعديل خصائص العنصر الهدف، مثل. لون الخلفية أو قيمة ألفا، خلال فترة زمنية محددة.
- مكان الملف:
- يتم استخدام اسم الملف كمعرّف المورد.
- نوع بيانات الموارد المجمّعة:
- مؤشر المورد إلى
ValueAnimator
،ObjectAnimator
، أوAnimatorSet
- مرجع الموارد:
-
في الرمز البرمجي المستند إلى Java أو 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();
- راجِع أيضًا:
-
- نظرة عامة على الصور المتحركة للموقع
- العروض التوضيحية لواجهات برمجة التطبيقات للاطّلاع على الأمثلة حول كيفية استخدام نظام الرسوم المتحركة الخاص بالخصائص
res/animator/filename.xml
عرض الصورة المتحركة
يتيح إطار عمل عرض الصور المتحركة استخدام كل من الصور المتحركة في أول سنتين وإطار بإطار، والتي يتم تعريفها بتنسيق XML. توضّح الأقسام التالية كيفية استخدام الطريقتَين.
صور متحركة ما قبل سن المراهقة
يشير هذا المصطلح إلى رسم متحرك يتم تعريفه في ملف 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); - راجِع أيضًا:
res/anim/filename.xml
أجهزة الاستيفاء
أداة التعديل هي عبارة عن تعديل رسوم متحركة يتم تحديده في ملف XML ويؤثر على معدل التغيير في الرسوم المتحركة. يتيح ذلك تسريع تأثيرات الرسوم المتحركة الحالية أو تسريعها أو تكرارها المرتدة وما إلى ذلك
يتم تطبيق أداة إكمال على عنصر صورة متحركة باستخدام android:interpolator
.
، التي تكون قيمتها مرجعًا لمورد أداة التعديل.
جميع برامج الترجمة الفورية المتوفّرة في نظام Android هي فئات فرعية من فئة Interpolator
. لكل فئة من فئات أداة التعديل،
يشتمل على مورد عام يمكنك الرجوع إليه لتطبيق أداة التعديل على صورة متحركة
باستخدام السمة 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
- مكان الملف:
- يتم استخدام اسم الملف كمعرّف المورد.
- نوع بيانات الموارد المجمّعة:
- مؤشر المورد إلى كائن أداة الاستيفاء المقابل
- مرجع الموارد:
-
في ملف 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" />
res/anim/filename.xml
استخدام الإطارات المتحركة
يشير ذلك المصطلح إلى رسم متحرك يتم تعريفه في ملف 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()
; } - راجِع أيضًا:
res/drawable/filename.xml