الصور المتحركة في Compose
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اطّلِع على كيفية إضافة تأثيرات متحركة إلى قيم الحالة باستخدام عمليات النقل، وإضافة تأثيرات متحركة إلى التغيُّرات في مستوى الرؤية أو الحجم، وعمليات التلاشي باستخدام واجهات برمجة التطبيقات Compose animation APIs.
النقاط الرئيسية
- تكون واجهة برمجة التطبيقات
animate*AsState مفيدة لإضافة تأثيرات متحركة لقيمة واحدة استنادًا
إلى تغيير الحالة.
- لإضافة تأثيرات متحركة على قيم متعدّدة في الوقت نفسه، أنشئ انتقالًا باستخدام الدالة
updateTransition.
- يمكنك تحديد كل قيمة للحركة باستخدام دالة إضافة في كائن
الانتقال.
- لتخصيص سلوك الصورة المتحركة، حدِّد المَعلمة
transitionSpec.
- يُعدّ الرمز
AnimatedVisibility مفيدًا لإضافة تأثيرات متحركة للظهور
والاختفاء.
- تخصيص سلوك الصور المتحركة من خلال تحديد مَعلمات للدخول والخروج
- لإضافة تأثيرات متحركة إلى تغييرات حجم العناصر، استخدِم المُعدِّل
animateContentSize.
- لإضافة تأثيرات متحركة إلى التغييرات عند تبديل أجزاء من واجهة المستخدم، استخدِم العنصر القابل للتجميع
Crossfade.
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول
أهداف تطوير Android الأوسع نطاقًا:
أساسيات الكتابة
تعرِض سلسلة الفيديوهات هذه واجهات برمجة التطبيقات المختلفة لتطبيق Compose،
وتوضّح لك بسرعة ما هو متاح وكيفية استخدامه.
عرض الصور
تعرَّف على أساليب استخدام مرئيات مشرقة وجذابة لمنح تطبيق Android مظهرًا وشعورًا جميلَين.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Animation in Compose\n\n\u003cbr /\u003e\n\nSee how to animate state values, using transitions, animating visibility or size\nchanges and crossfades by using the Compose animation APIs. \n\nKey points\n----------\n\n- The [`animate*AsState`](/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)) API is useful for animating a single value based on a state change.\n- To animate multiple values at the same time, create a transition with the [`updateTransition`](/reference/kotlin/androidx/compose/animation/core/package-summary#updateTransition(kotlin.Any,kotlin.String)) function.\n - You can declare each animation value with an extension function on the transition object.\n- To customize the animation behavior, specify the `transitionSpec` parameter.\n- [`AnimatedVisibility`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)) is useful for animating appearance and disappearance.\n- Customize animation behavior by specifying parameters for enter and exit.\n- To animate size changes of elements, use the [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)) modifier.\n- To animate changes when you swap out portions of your UI, use the [`Crossfade`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).Crossfade(androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,kotlin.Function1)) composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Compose basics\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
