تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

موارد الصور المتحركة

يمكن لمورد الرسوم المتحركة تحديد أحد نوعين من الرسوم المتحركة:

يتم إنشاء رسم متحرك عن طريق تعديل قيم الخصائص لعنصر خلال فترة زمنية محددة من خلال Animator.

هناك نوعان من الصور المتحركة يمكنك إجراؤها باستخدام إطار عمل عرض الرسوم المتحركة:

تأثير الصورة المتحركة في مرحلة ما قبل المدرسة: ينشئ صورة متحركة من خلال إجراء سلسلة من التحويلات على صورة واحدة. مع Animation.
إطار الحركة: ينشئ صورة متحركة من خلال عرض تسلسل من الصور بالترتيب. مع AnimationDrawable.

الصور المتحركة للخصائص

يشير ذلك المصطلح إلى حركة يتم تحديدها في ملف XML تعمل على تعديل خصائص العنصر الهدف، مثل. لون الخلفية أو قيمة ألفا، خلال فترة زمنية محددة.

مكان الملف:

res/animator/filename.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>.

العناصر:

<set>

حاوية تحتوي على عناصر متحركة أخرى (<objectAnimator>، <valueAnimator>، أو عناصر <set> أخرى). يمثل AnimatorSet

يمكنك تحديد علامات <set> مدمجة لتقديم والرسوم المتحركة للمجموعة. يمكن لكل <set> تحديد خصائصه الخاصة. السمة ordering.

السمات:

android:ordering

الكلمة الرئيسية. لتحديد ترتيب تشغيل الصور المتحركة في هذه المجموعة.

القيمة	الوصف
`sequentially`	تشغيل الصور المتحركة في هذه المجموعة بالتتابع.
`together` (تلقائي)	تشغيل الصور المتحركة في هذه المجموعة في نفس الوقت.

<objectAnimator>

يتحرك خاصية معينة لكائن خلال فترة زمنية محددة. يمثل ObjectAnimator

السمات:

android:propertyName

سلسلة: مَعلمة مطلوبة. سمة العنصر المطلوب تحريكها، ويُشار إليها باسمها. على سبيل المثال، يمكنك تحديد "alpha" أو "backgroundColor" لكائن View. لا يعرض العنصر objectAnimator عنصر target لذا، لا يمكنك ضبط الكائن ليتم تحريكه في إعلان XML. يجب عليك يمكنك تضخيم مورد XML الخاص بالصور المتحركة من خلال طلب loadAnimator() واستدعاء setTarget() لضبط الإعدادات. الكائن المستهدف الذي يحتوي على هذه السمة.

android:valueTo

float أو int أو color. مَعلمة مطلوبة. القيمة التي تنتهي عندها السمة المتحركة. يتم تمثيل الألوان في شكل أرقام سداسية عشرية مثل #333333.

android:valueFrom

float أو int أو color. القيمة التي تبدأ فيها الخاصية المتحركة. إذا لم يكن كذلك المحدد، تبدأ الحركة من القيمة التي يتم الحصول عليها من خلال طريقة get للسمة. يتم تمثيل الألوان في شكل أرقام سداسية عشرية مثل #333333.

android:duration

int. الوقت بالمللي ثانية للحركة. القيمة التلقائية هي 300 ملي ثانية.

android:startOffset

int. مقدار المللي ثانية الذي يحدث فيه تأخير الرسوم المتحركة بعد تسمّى start().

android:repeatCount

int. عدد مرات تكرار رسم متحرك. ضبط على "-1" إلى ما لا نهاية تكرارًا أو إلى عدد صحيح موجب. على سبيل المثال، تعني القيمة "1" أنّ الحركة مرة واحدة بعد التشغيل الأولي للرسوم المتحركة، بحيث يتم تشغيل الرسم المتحرك مرتين. والقيمة التلقائية هي "0"، ما يعني أنّه ما مِن تكرار.

android:repeatMode

int. آلية عمل الصورة المتحركة عند وصولها إلى نهاية الصورة المتحركة android:repeatCount يجب ضبطها على عدد صحيح موجب أو "-1" لكي يكون لهذه السمة تأثير. تم الضبط على ""reverse"" ضبط الاتجاه العكسي للرسم المتحرك مع كل تكرار أو "restart" للحصول على الصورة المتحركة تكراره من البداية في كل مرة.

android:valueType

الكلمة الرئيسية. لا تحدِّد هذه السمة إذا كانت القيمة لونًا. يعالج إطار عمل الصور المتحركة الألوان تلقائيًا القيم.

القيمة	الوصف
`intType`	لتحديد أن القيم المتحركة هي أعداد صحيحة.
`floatType` (تلقائي)	لتحديد أن القيم المتحركة هي أعداد عشرية.

<animator>

يؤدي هذا الإجراء إلى تنفيذ صورة متحركة خلال فترة زمنية محدّدة. يمثل ValueAnimator.

السمات:

android:valueTo

float أو int أو color. مَعلمة مطلوبة. القيمة التي تنتهي عندها الصورة المتحركة. يتم تمثيل الألوان في شكل أرقام سداسية عشرية مثل #333333.

android:valueFrom

float أو int أو color. مَعلمة مطلوبة. القيمة التي تبدأ فيها الصورة المتحركة. يتم تمثيل الألوان في شكل أرقام سداسية عشرية مثل #333333.

android:duration

int. الوقت بالمللي ثانية للحركة. الإعداد التلقائي هو 300 ملي ثانية.

android:startOffset

int. مقدار المللي ثانية الذي يحدث فيه تأخير الرسوم المتحركة بعد تسمّى start().

android:repeatCount

android:repeatMode

android:valueType

القيمة	الوصف
`intType`	لتحديد أن القيم المتحركة هي أعداد صحيحة.
`floatType` (تلقائي)	لتحديد أن القيم المتحركة هي أعداد عشرية.

مثلا:

تم حفظ ملف 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> المتداخلة).

العناصر:

<set>

حاوية تحتوي على عناصر متحركة أخرى (<alpha> و<scale> و<translate> <rotate>) أو عناصر <set> أخرى. يمثل AnimationSet.

السمات:

android:interpolator: مرجع أداة الإدخال: تمثّل هذه السمة Interpolator لتطبيقه على الصورة المتحركة. يجب أن تكون القيمة مرجعًا لمورد يحدد أداة التعديل، ليس اسمًا لفئة أداة الاستيفاء. هناك برنامج تحميل تلقائي. الموارد المتوفرة من النظام الأساسي أو يمكنك إنشاء مورد أداة التعديل الخاص بك. راجِع المناقشة التالية للحصول على مزيد من المعلومات عن أداة التعديل.
android:shareInterpolator: منطقي. "true" إذا كنت تريد مشاركة أداة التعديل نفسها مع كل الأطفال عناصر.

<alpha>

رسم متحرك يتلاشى للداخل أو يتلاشى. يمثل AlphaAnimation.

السمات:

android:fromAlpha: قيمة عائمة: بدء إزاحة التعتيم، حيث تكون 0.0 شفافة و1.0 غير شفاف.
android:toAlpha: قيمة عائمة: نهاية معادلة التعتيم، حيث تكون 0.0 شفافة و1.0 غير شفاف.

لمزيد من السمات المتوافقة مع <alpha>، يُرجى الاطّلاع على مرجع الفئة Animation، الذي يكتسب هذا العنصر سمات XML الخاصة به

<scale>

صورة متحركة لتغيير حجم الصورة يمكنك تحديد النقطة المركزية للصورة التي تكبُرها. للخارج أو للداخل من خلال تحديد pivotX وpivotY. على سبيل المثال، إذا كانت هذه القيم تساوي 0,0 (في الزاوية العلوية اليسرى)، ويكون النمو كله لأسفل وعلى اليمين. يمثل ScaleAnimation.

السمات:

android:fromXScale: قيمة عائمة: إزاحة حجم س تبدأ، حيث لا تُمثل القيمة 1.0 أي تغيير.
android:toXScale: قيمة عائمة: نهاية إزاحة حجم X، حيث لا يوجد تغيير في 1.0.
android:fromYScale: قيمة عائمة: بدءًا من إزاحة الحجم ص، حيث لا يكون هناك تغيير في 1.0.
android:toYScale: قيمة عائمة: نهاية إزاحة حجم Y، حيث لا يكون هناك تغيير في 1.0.
android:pivotX: قيمة عائمة: الإحداثي السيني (X) الذي يبقى ثابتًا عند قياس حجم الكائن.
android:pivotY: قيمة عائمة: يظل الإحداثي Y ثابتًا عند قياس حجم الكائن.

لمزيد من السمات المتوافقة مع <scale>، يُرجى الاطّلاع على مرجع الفئة Animation، الذي يكتسب هذا العنصر سمات XML الخاصة به

<translate>

حركة عمودية و/أو أفقية. يمثل TranslateAnimation تتيح السمات التالية بأي من التنسيقات الثلاثة التالية:

القيم من -100 إلى 100 تنتهي بـ "%"، للإشارة إلى النسبة المئوية مرتبط بنفسه.
القيم من -100 إلى 100 تنتهي بـ "%p"، مما يشير إلى النسبة المئوية بالنسبة إلى أحد الوالدين.
قيمة عائمة بدون لاحقة تشير إلى قيمة مطلقة.

السمات:

android:fromXDelta: قيمة عائمة أو نسبة مئوية: إزاحة X عند البدء. يتم التعبير عنها إما بالبكسل نسبيًا في الموضع العادي، مثل "5" بالنسبة المئوية بالنسبة إلى عرض العنصر، مثل "5%"؛ أو في النسبة المئوية بالنسبة إلى عرض العنصر الرئيسي، مثل "5%p".
android:toXDelta: قيمة عائمة أو نسبة مئوية: إزاحة النهاية X. يتم التعبير عنها إما بالبكسل نسبيًا في الموضع العادي، مثل "5" بالنسبة المئوية بالنسبة إلى عرض العنصر، مثل "5%"؛ أو في النسبة المئوية بالنسبة إلى عرض العنصر الرئيسي، مثل "5%p".
android:fromYDelta: قيمة عائمة أو نسبة مئوية: بدء الإزاحة Y. يتم التعبير عنها إما بالبكسل نسبيًا في الموضع العادي، مثل "5" بالنسبة المئوية بالنسبة إلى ارتفاع العنصر، مثل "5%"؛ أو في النسبة المئوية بالنسبة إلى الارتفاع الأساسي، مثل "5%p"
android:toYDelta: قيمة عائمة أو نسبة مئوية: نهاية معادلة Y يتم التعبير عنها إما بالبكسل نسبيًا في الموضع العادي، مثل "5" بالنسبة المئوية بالنسبة إلى ارتفاع العنصر، مثل "5%"؛ أو في النسبة المئوية بالنسبة إلى الارتفاع الأساسي، مثل "5%p"

لمزيد من السمات المتوافقة مع <translate>، يُرجى الاطّلاع على مرجع الفئة Animation، الذي يكتسب هذا العنصر سمات XML الخاصة به

<rotate>

رسم متحرك بتدوير يمثل RotateAnimation.

السمات:

android:fromDegrees: قيمة عائمة: بدء الوضع الزاوي بالدرجات.
android:toDegrees: قيمة عائمة: الموضع الزاوي الختامي بالدرجات.
android:pivotX: قيمة عائمة أو نسبة مئوية: الإحداثي X لمركز الدوران. معبَّر إما بالبكسل بالنسبة إلى الحافة اليسرى للعنصر، مثل "5" بالنسبة المئوية على الحافة اليسرى للكائن، مثل "5%" أو بالنسبة المئوية بالنسبة إلى الأصل الحافة اليسرى للحاوية، مثل "5%p".
android:pivotY: قيمة عائمة أو نسبة مئوية: الإحداثي Y لمركز الدوران. معبَّر إما بالبكسل بالنسبة إلى الحافة العلوية للكائن، مثل "5"؛ بالنسبة المئوية إلى الحافة العلوية للكائن، مثل "5%"؛ أو بالنسبة المئوية بالنسبة إلى الأصل الحافة العلوية للحاوية، مثل "5%p".

لمزيد من السمات المتوافقة مع <rotate>، يُرجى الاطّلاع على مرجع الفئة Animation، الذي يكتسب هذا العنصر سمات XML الخاصة به

مثلا:

تم حفظ ملف 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: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 is Animatable) {
    rocketAnimation.start()
}

Java

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}

راجِع أيضًا:

عرض الصورة المتحركة

لمحة عن أنواع الموارد

قائمة حالات الألوان