أدوات تعديل الصور المتحركة والتركيبات

تأتي أداة Compose مع عناصر قابلة للتجميع وعناصر تعديل مدمجة للتعامل مع حالات الاستخدام الشائعة للرسوم المتحركة.

العناصر المركّبة المتحركة المضمّنة

إضافة مؤثرات متحركة للظهور والاختفاء باستخدام AnimatedVisibility

الشكل 1. تحريك مظهر عنصر واختفائه في عمود

يتميّز العنصر القابل للإنشاء AnimatedVisibility بشكل متحرك شكل المحتوى واختفائه.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

يظهر المحتوى تلقائيًا من خلال التلاشي والتوسيع، ويختفي من خلال التلاشي والتقلص. يمكن تخصيص الانتقال من خلال تحديد EnterTransition و ExitTransition.

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text(
        "Hello",
        Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}
AnimationSnippets.kt

كما هو موضّح في المثال أعلاه، يمكنك دمج عناصر EnterTransition أو ExitTransition متعددة باستخدام عامل التشغيل +، ويقبل كلّ منهما مَعلمات اختيارية لتخصيص سلوكه. يمكنك الاطّلاع على المراجع للحصول على مزيد من المعلومات.

أمثلة على EnterTransition وExitTransition

انتقال	خروج انتقال
fadeIn	fadeOut
slideIn	slideOut
slideInHorizontally	slideOutHorizontally
slideInVertically	slideOutVertically
scaleIn	scaleOut
expandIn	shrinkOut
expandHorizontally	shrinkHorizontally
expandVertically	shrinkVertically

يوفّر AnimatedVisibility أيضًا خيارًا يأخذ قيمة MutableTransitionState. ويتيح لك ذلك تشغيل صورة متحركة فور إضافة AnimatedVisibility إلى شجرة التكوين. وهو مفيد أيضًا لمحاولة مراقبة حالة الصورة المتحركة.

// Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
val state = remember {
    MutableTransitionState(false).apply {
        // Start the animation immediately.
        targetState = true
    }
}
Column {
    AnimatedVisibility(visibleState = state) {
        Text(text = "Hello, world!")
    }

    // Use the MutableTransitionState to know the current animation state
    // of the AnimatedVisibility.
    Text(
        text = when {
            state.isIdle && state.currentState -> "Visible"
            !state.isIdle && state.currentState -> "Disappearing"
            state.isIdle && !state.currentState -> "Invisible"
            else -> "Appearing"
        }
    )
}
AnimationSnippets.kt

إضافة حركة للدخول والخروج للأطفال

يمكن للمحتوى ضمن AnimatedVisibility (العناصر المباشرة أو غير المباشرة) استخدام المُعدِّل animateEnterExit لتحديد سلوك مؤثرات متحركة مختلف لكل منها. إنّ التأثير البصري لكلّ من هذه العناصر الفرعية هو عبارة عن تركيبة من الرسوم المتحرّكة المحدّدة في العنصر القابل للتركيب AnimatedVisibility والرسوم المتحرّكة الخاصة بالعنصر الفرعي للدخول والخروج.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.DarkGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content of the notification…
        }
    }
}
AnimationSnippets.kt

في بعض الحالات، قد ترغب في عدم تطبيق أي صور متحركة من قِبل AnimatedVisibility على الإطلاق، وذلك لكي يتمكّن كل طفل من إنشاء صور متحركة مميزة من خلال animateEnterExit. لتحقيق ذلك، حدِّد EnterTransition.None و ExitTransition.None في العنصر القابل للتجميع AnimatedVisibility.

إضافة صورة متحركة مخصّصة

إذا كنت تريد إضافة تأثيرات مخصّصة للحركة إلى جانب تأثيرات الظهور والخروج المضمّنة، يمكنك الوصول إلى مثيل Transition الأساسي من خلال سمة transition داخل دالة lambda للمحتوى في AnimatedVisibility. سيتم تشغيل أيّ حالات لصورة متحركة تمت إضافتها إلى مثيل Transition (الانتقال) في الوقت نفسه مع رسوم التحريك للدخول والخروج في AnimatedVisibility. ينتظر AnimatedVisibility حتى تتم إنهاء جميع الصور المتحركة في Transition قبل إزالة محتواها. بالنسبة إلى الصور المتحركة للخروج التي تم إنشاؤها بشكل مستقل عن Transition (مثل استخدام animate*AsState)، لن تتمكّن AnimatedVisibility من احتسابها، وبالتالي قد تزيل المحتوى القابل للتركيب قبل اكتمالها.

var visible by remember { mutableStateOf(true) }

AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) { // this: AnimatedVisibilityScope
    // Use AnimatedVisibilityScope#transition to add a custom animation
    // to the AnimatedVisibility.
    val background by transition.animateColor(label = "color") { state ->
        if (state == EnterExitState.Visible) Color.Blue else Color.Gray
    }
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(background)
    )
}
AnimationSnippets.kt

اطّلِع على updateTransition لمعرفة تفاصيل عن Transition.

إضافة رسوم متحركة استنادًا إلى حالة الاستهداف باستخدام AnimatedContent

يضيف العنصر القابل للتجميع AnimatedContent تأثيرًا متحركًا إلى محتواه عند تغيُّره استنادًا إلى حالة مستهدفة.

Row {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Add")
    }
    AnimatedContent(
        targetState = count,
        label = "animated content"
    ) { targetCount ->
        // Make sure to use `targetCount`, not `count`.
        Text(text = "Count: $targetCount")
    }
}
AnimationSnippets.kt

يُرجى العِلم أنّه يجب دائمًا استخدام مَعلمة lambda وعرضها في المحتوى. وتستخدم واجهة برمجة التطبيقات هذه القيمة كمفتاح لتحديد المحتوى المعروض حاليًا.

يتم تلقائيًا إخفاء المحتوى الأولي ثم ظهور المحتوى المستهدَف (يُعرف هذا السلوك باسم الاختفاء التدريجي). يمكنك تخصيص سلوك هذه الحركة من خلال تحديد عنصر ContentTransform للمَعلمة transitionSpec. يمكنك إنشاء ContentTransform من خلال دمج EnterTransition مع ExitTransition باستخدام الدالة with. يمكنك تطبيق SizeTransform على ContentTransform من خلال إرفاقه بالدالة using البادئة.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        // Compare the incoming number with the previous number.
        if (targetState > initialState) {
            // If the target number is larger, it slides up and fades in
            // while the initial (smaller) number slides up and fades out.
            slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
        } else {
            // If the target number is smaller, it slides down and fades in
            // while the initial number slides down and fades out.
            slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
        }.using(
            // Disable clipping since the faded slide-in/out should
            // be displayed out of bounds.
            SizeTransform(clip = false)
        )
    }, label = "animated content"
) { targetCount ->
    Text(text = "$targetCount")
}
AnimationSnippets.kt

تحدِّد السمة EnterTransition طريقة ظهور المحتوى المستهدَف، وتحدّد ExitTransition كيفية اختفاء المحتوى الأولي. بالإضافة إلى جميع دوال EnterTransition وExitTransition المتاحة AnimatedVisibility، يوفّر AnimatedContent slideIntoContainer وslideOutOfContainer. هذه بدائل ملائمة لـ slideInHorizontally/Vertically و slideOutHorizontally/Vertically التي تحسب مسافة الشريحة استنادًا إلى أحجام المحتوى الأولي والمحتوى المستهدَف لمحتوى AnimatedContent.

تحدّد السمة SizeTransform الشكل الذي يجب أن يتحرّك الحجم بين المحتوى الأولي والمحتوى المستهدَف. يمكنك الوصول إلى كلّ من الحجم الأولي والحجم المستهدَف عند إنشاء التأثير المتحرك. تتحكّم السمة SizeTransform أيضًا في ما إذا كان يجب اقتصاص المحتوى إلى حجم المكوِّن أثناء استخدام الصور المتحركة.

var expanded by remember { mutableStateOf(false) }
Surface(
    color = MaterialTheme.colorScheme.primary,
    onClick = { expanded = !expanded }
) {
    AnimatedContent(
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(150, 150)) togetherWith
                fadeOut(animationSpec = tween(150)) using
                SizeTransform { initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            // Expand horizontally first.
                            IntSize(targetSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            // Shrink vertically first.
                            IntSize(initialSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
        }, label = "size transform"
    ) { targetExpanded ->
        if (targetExpanded) {
            Expanded()
        } else {
            ContentIcon()
        }
    }
}
AnimationSnippets.kt

إضافة حركة إلى انتقالات دخول الطفل وخروجه

تمامًا مثل AnimatedVisibility، يتوفّر المُعدِّل animateEnterExit داخل دالة lambda للمحتوى في AnimatedContent. ويمكن استخدام ذلك لتطبيق EnterAnimation وExitAnimation على كل عنصر من العناصر الثانوية المباشرة أو غير المباشرة بشكل منفصل.

إضافة صورة متحركة مخصّصة

تمامًا مثل AnimatedVisibility، يتوفر الحقل transition داخل محتوى lambda في AnimatedContent. ويمكنك استخدامها لإنشاء تأثير رسوم متحركة مخصص يتم تشغيله بالتزامن مع تأثير انتقال AnimatedContent. يمكنك الاطّلاع على updateTransition لمعرفة التفاصيل.

إضافة تأثيرات متحركة بين تنسيقَين باستخدام Crossfade

يستخدم Crossfade مؤثرات حركية بين تنسيقين باستخدام حركة التلاشي المتقاطع. من خلال تبديل القيمة التي تم تمريرها إلى المَعلمة current، يتم تبديل المحتوى باستخدام تأثير متحرك للانتقال بين الصور.

var currentPage by remember { mutableStateOf("A") }
Crossfade(targetState = currentPage, label = "cross fade") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
AnimationSnippets.kt

أدوات التعديل المدمجة في الصور المتحركة

إضافة تأثيرات متحركة إلى تغييرات الحجم القابلة للتجميع باستخدام animateContentSize

الشكل 2. أن يكون مكوّنًا متحركًا بسلاسة بين حجم صغير وحجم أكبر

يُنشئ المُعدِّل animateContentSize رسمًا متحركًا لتغيير الحجم.

ملاحظة: يُرجى العِلم أنّ ترتيب وضع animateContentSize في سلسلة المُعدِّلات مهم. للحصول على صور متحركة سلسة، تأكَّد من وضعها قبل أيّ مُعدِّلات للحجم، مثل size أو defaultMinSize، لضمان أن يُبلِغ animateContentSize عن تغيير القيمة المتحركة في التصميم.

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

الصور المتحركة لعناصر القائمة

إذا كنت تريد إضافة تأثيرات متحركة إلى عمليات إعادة ترتيب العناصر داخل قائمة أو شبكة بطيئة التحميل، اطّلِع على مستندات تأثيرات الصور المتحركة لعناصر التنسيق البطيء.