عرض الصورة المتحركة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تجربة ميزة "الكتابة"
Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام "الصور المتحركة" في Compose.
يمكنك استخدام نظام عرض الرسوم المتحركة لإجراء رسم متحرك متداخل على طرق العرض. تحسب Tween animation
الحركة باستخدام معلومات مثل نقطة البداية ونقطة النهاية والحجم والدوران وغيرها من الجوانب الشائعة للحركة.
يمكن أن تُجري الصورة المتحركة المتسلسلة سلسلة من عمليات التحويل البسيطة (الموضع والحجم والدوران
والشفافية) على محتوى كائن View. وبالتالي، إذا كان لديك عنصر TextView، يمكنك نقل النص أو تدويره أو تكبيره أو تصغيره. إذا كانت تحتوي على
صورة خلفية، سيتم تحويل صورة الخلفية مع النص. يوفّر animation package جميع الصفوف المستخدَمة في الصور المتحركة لمرحلة ما قبل سن المراهقة.
تحدّد سلسلة تعليمات الصور المتحركة الصورة المتحركة في مرحلة ما قبل المراهقة، ويتم تحديدها باستخدام رمز XML أو Android. كما هو الحال مع تحديد تنسيق، ننصح باستخدام ملف XML لأنّه أكثر سهولة في القراءة
وإعادة الاستخدام والاستبدال من الترميز الثابت للحركة. في المثال أدناه، نستخدم تنسيق XML. (لمعرفة المزيد من المعلومات حول تعريف الحركة في رمز التطبيق الخاص بك، بدلاً من XML، يمكنك الرجوع إلى الفئة AnimationSet والفئات الفرعية الأخرى في Animation).
تحدّد تعليمات الصورة المتحركة عمليات التحويل التي تريد إجراؤها وتوقيت حدوثها والمدة المطلوبة لتطبيقها. يمكن أن تكون عمليات التحويل متسلسلة أو متزامنة،
على سبيل المثال، يمكنك نقل محتوى TextView من اليمين إلى اليسار ثم تدويره بمقدار 180 درجة أو يمكنك نقل النص وتدويره في وقت واحد. وتتطلّب كل عملية تحويل مجموعة من المعلَمات الخاصة بعملية التحويل (الحجم المبدئي وحجم النهاية لتغيير الحجم وزاوية البداية وزاوية النهاية للدوران وما إلى ذلك)، بالإضافة إلى مجموعة من المعلَمات الشائعة (مثل وقت البدء والمدة). لإجراء عمليات تحويل متعددة في الوقت نفسه، امنحها وقت البدء نفسه. ولجعلها تسلسلية، احسب وقت البدء بالإضافة إلى مدة التحويل السابق.
ينتمي ملف XML الخاص بالحركة إلى دليل res/anim/ في مشروع Android
. يجب أن يتضمّن الملف عنصرًا جذرًا واحدًا: إما <alpha> أو <scale> أو <translate> أو
<rotate> أو عنصر وسيط أو <set> يحتوي على
مجموعات من هذه العناصر (التي قد تتضمّن <set> آخر). ويتم تطبيق جميع تعليمات التحريك
تلقائيًا في الوقت نفسه. لكي تحدث هذه العناصر بشكل تسلسلي، يجب
تحديد سمة startOffset، كما هو موضّح في المثال أدناه.
يتم استخدام ملف XML التالي من أحد تطبيقات ApiDemos لتمديده، ثم تدويره
وتحريكه في الوقت نفسه.
<set 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/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400" />
</set>
</set>
وإحداثيات الشاشة (غير المستخدَمة في هذا المثال) هي (0,0) في الزاوية العلوية اليمنى، وتزداد
مع الانتقال لأسفل وإلى اليمين.
يمكن تحديد بعض القيم، مثل pivotX، نسبةً إلى الكائن نفسه أو بالنسبة إلى العنصر الرئيسي. احرص على استخدام التنسيق الصحيح لما تريده ("50" للنسبة المئوية 50% بالنسبة إلى العنصر الرئيسي،
أو "50%" للنسبة المئوية 50% بالنسبة إلى العنصر نفسه).
يمكنك تحديد كيفية تطبيق عملية تحويل بمرور الوقت من خلال تحديد Interpolator. يتضمّن Android العديد من الفئات الفرعية لأداة Interpolator التي
تحدّد منحنيات سرعة مختلفة: على سبيل المثال، يطلب AccelerateInterpolator
من عملية التحويل البدء ببطء والسرعة. ولكلّ منها قيمة سمة يمكن
تطبيقها في ملف XML.
بعد حفظ ملف XML هذا باسم hyperspace_jump.xml في دليل res/anim/ الخاص بالمشروع، سيشير الرمز التالي إليه وسيطبّقه على عنصر ImageView من التنسيق.
Kotlin
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}
Java
ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);
كبديل عن startAnimation()، يمكنك تحديد وقت بدء
الصورة المتحركة باستخدام Animation.setStartTime()View.setAnimation()
لمزيد من المعلومات حول بنية XML والعلامات والسمات المتاحة، يمكنك الاطّلاع على موارد الصور المتحركة.
ملاحظة: بغض النظر عن الطريقة التي قد يتم بها تحريك الصورة المتحركة أو تغيير حجمها، لن يتم تلقائيًا ضبط حدود العرض التي تحتوي على الصورة المتحركة لاستيعابها.
ومع ذلك، سيظلّ يتم رسم الصورة المتحركة خارج حدود العرض ولن يتم اقتصاصها.
ومع ذلك، سيحدث الاقتصاص إذا تجاوزت الصورة المتحركة حدود العرض الرئيسي.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# View Animation\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to use Animations in Compose. \n[Animate properties →](/develop/ui/compose/animation/value-based) \n\nYou can use the view animation system to perform tweened animation on Views. Tween animation\ncalculates the animation with information such as the start point, end point, size, rotation, and\nother common aspects of an animation.\n\nA tween animation can perform a series of simple transformations (position, size, rotation,\nand transparency) on the contents of a View object. So, if you have a [TextView](/reference/android/widget/TextView) object, you can move, rotate, grow, or shrink the text. If it has a\nbackground image, the background image will be transformed along with the text. The [animation package](/reference/android/view/animation/package-summary) provides all the classes used in a tween animation.\n\nA sequence of animation instructions defines the tween animation, defined by either XML or\nAndroid code. As with defining a layout, an XML file is recommended because it's more readable,\nreusable, and swappable than hard-coding the animation. In the example below, we use XML. (To\nlearn more about defining an animation in your application code, instead of XML, refer to the\n[AnimationSet](/reference/android/view/animation/AnimationSet) class and other [Animation](/reference/android/view/animation/Animation) subclasses.)\n\nThe animation instructions define the transformations that you want to occur, when they will\noccur, and how long they should take to apply. Transformations can be sequential or simultaneous\n- for example, you can have the contents of a TextView move from left to right, and then rotate\n180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a\nset of parameters specific for that transformation (starting size and ending size for size\nchange, starting angle and ending angle for rotation, and so on), and also a set of common\nparameters (for instance, start time and duration). To make several transformations happen\nsimultaneously, give them the same start time; to make them sequential, calculate the start time\nplus the duration of the preceding transformation.\n\nThe animation XML file belongs in the `res/anim/` directory of your Android\nproject. The file must have a single root element: this will be either a single\n`\u003calpha\u003e`, `\u003cscale\u003e`, `\u003ctranslate\u003e`,\n`\u003crotate\u003e`, interpolator element, or `\u003cset\u003e` element that holds\ngroups of these elements (which may include another `\u003cset\u003e`). By default, all\nanimation instructions are applied simultaneously. To make them occur sequentially, you must\nspecify the `startOffset` attribute, as shown in the example below.\n\nThe following XML from one of the ApiDemos is used to stretch, then simultaneously spin and\nrotate a View object. \n\n```xml\n\u003cset android:shareInterpolator=\"false\"\u003e\n \u003cscale\n android:interpolator=\"@android:anim/accelerate_decelerate_interpolator\"\n android:fromXScale=\"1.0\"\n android:toXScale=\"1.4\"\n android:fromYScale=\"1.0\"\n android:toYScale=\"0.6\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:fillAfter=\"false\"\n android:duration=\"700\" /\u003e\n \u003cset android:interpolator=\"@android:anim/decelerate_interpolator\"\u003e\n \u003cscale\n android:fromXScale=\"1.4\"\n android:toXScale=\"0.0\"\n android:fromYScale=\"0.6\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\"\n android:fillBefore=\"false\" /\u003e\n \u003crotate\n android:fromDegrees=\"0\"\n android:toDegrees=\"-45\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\" /\u003e\n \u003c/set\u003e\n\u003c/set\u003e\n```\n\nScreen coordinates (not used in this example) are (0,0) at the upper left hand corner, and\nincrease as you go down and to the right.\n\nSome values, such as pivotX, can be specified relative to the object itself or relative to the\nparent. Be sure to use the proper format for what you want (\"50\" for 50% relative to the parent,\nor \"50%\" for 50% relative to itself).\n\nYou can determine how a transformation is applied over time by assigning an [Interpolator](/reference/android/view/animation/Interpolator). Android includes several Interpolator subclasses that\nspecify various speed curves: for instance, [AccelerateInterpolator](/reference/android/view/animation/AccelerateInterpolator)\ntells a transformation to start slow and speed up. Each one has an attribute value that can be\napplied in the XML.\n\nWith this XML saved as `hyperspace_jump.xml` in the `res/anim/`\ndirectory of the project, the following code will reference it and apply it to an [ImageView](/reference/android/widget/ImageView) object from the layout. \n\n### Kotlin\n\n```kotlin\nAnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation -\u003e\n findViewById\u003cImageView\u003e(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)\n}\n```\n\n### Java\n\n```java\nImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);\nAnimation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);\nspaceshipImage.startAnimation(hyperspaceJumpAnimation);\n```\n\nAs an alternative to `startAnimation()`, you can define a starting time for the\nanimation with [Animation.setStartTime()](/reference/android/view/animation/Animation#setStartTime(long)), then assign the animation to the View with [View.setAnimation()](/reference/android/view/View#setAnimation(android.view.animation.Animation)).\n\nFor more information on the XML syntax, available tags and attributes, see [Animation Resources](/guide/topics/resources/animation-resource).\n\n**Note:** Regardless of how your animation may move or resize, the\nbounds of the View that holds your animation will not automatically adjust to accommodate it.\nEven so, the animation will still be drawn beyond the bounds of its View and will not be clipped.\nHowever, clipping *will occur* if the animation exceeds the bounds of the parent View."]]
