คำแนะนำโดยย่อเกี่ยวกับภาพเคลื่อนไหวใน Compose

การเขียนมีกลไกภาพเคลื่อนไหวในตัวมากมาย และอาจทำให้ รู้ว่าต้องเลือกอันไหน ด้านล่างนี้คือรายการกรณีการใช้งานภาพเคลื่อนไหวที่พบบ่อย สำหรับ ข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับชุดตัวเลือก API ต่างๆ ทั้งหมดที่มีให้ใช้งาน โปรดอ่านเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหวของ Compose ฉบับเต็ม

ทำให้คุณสมบัติที่ประกอบได้ทั่วไปเคลื่อนไหว

Compose มี API ที่ใช้ง่ายซึ่งช่วยให้คุณแก้โจทย์ ของภาพเคลื่อนไหว ส่วนนี้จะสาธิตวิธีสร้างภาพเคลื่อนไหว ของ Composable

ภาพเคลื่อนไหวที่ปรากฏ / หายไป

วันที่

ใช้ AnimatedVisibility เพื่อซ่อนหรือแสดง Composable เด็กๆ ในวงการ AnimatedVisibility สามารถใช้ Modifier.animateEnterExit() สำหรับการป้อนของตนเอง หรือออกจากการเปลี่ยน

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

พารามิเตอร์การเข้าและออกของ AnimatedVisibility ช่วยให้คุณกำหนดค่าวิธี Composable จะทำงานเมื่อปรากฏขึ้นและหายไป อ่าน ฉบับเต็ม สำหรับข้อมูลเพิ่มเติม

อีกตัวเลือกหนึ่งสำหรับการทำให้การมองเห็น Composable เคลื่อนไหวคือการทำให้แท็ก เมื่อเวลาผ่านไปโดยใช้ animateFloatAsState:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

อย่างไรก็ตาม การเปลี่ยนอัลฟ่ามาพร้อมกับข้อควรระวังว่า Composable นั้นยังคงอยู่ ในการเรียบเรียงและยังคงครอบคลุมพื้นที่ที่วางองค์ประกอบไว้ ช่วงเวลานี้ อาจทำให้โปรแกรมอ่านหน้าจอและกลไกการเข้าถึงอื่นๆ รายการบนหน้าจอ ในทางกลับกัน AnimatedVisibility จะนำออกในท้ายที่สุด จากการเรียบเรียง

วันที่

ทำให้สีพื้นหลังเคลื่อนไหว

วันที่

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

ตัวเลือกนี้มีประสิทธิภาพมากกว่าการใช้ Modifier.background() Modifier.background() ใช้ได้กับการตั้งค่าสีแบบภาพเดียว แต่เมื่อ ทำให้สีเคลื่อนไหวเมื่อเวลาผ่านไป ซึ่งอาจทําให้การจัดองค์ประกอบใหม่มีมากกว่า ตามความจำเป็น

หากต้องการให้สีพื้นหลังเคลื่อนไหวได้ไม่รู้จบ โปรดดูการสร้างภาพเคลื่อนไหวซ้ำๆ

ทำให้ขนาดของ Composable เคลื่อนไหว

วันที่

Compose ช่วยให้คุณทําให้ขนาดของ Composable เคลื่อนไหวได้ใน 2-3 วิธี ใช้ animateContentSize() สำหรับภาพเคลื่อนไหวระหว่างการเปลี่ยนขนาดที่เขียนได้ด้วยที่ประกอบกันได้

ตัวอย่างเช่น หากคุณมีช่องที่มีข้อความซึ่งสามารถขยายจาก 1 เป็น หลายบรรทัดที่คุณสามารถใช้ Modifier.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

คุณยังใช้ AnimatedContent พร้อม SizeTransform เพื่ออธิบายได้ด้วย ควรเปลี่ยนขนาดอย่างไร

ภาพเคลื่อนไหวตำแหน่งของ Composable

วันที่

หากต้องการทำให้ตำแหน่งของ Composable เคลื่อนไหว ให้ใช้ Modifier.offset{ } ร่วมกับ animateIntOffsetAsState()

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

หากต้องการให้แน่ใจว่า Composable ไม่ได้วาดทับหรืออยู่ใต้ส่วนอื่น Composable เมื่อทำให้ตำแหน่งหรือขนาดเคลื่อนไหว ให้ใช้ Modifier.layout{ } ช่วงเวลานี้ ตัวแก้ไขจะส่งผลการเปลี่ยนแปลงขนาดและตำแหน่งไปยังระดับบน ซึ่งจะส่งผลต่อ กับเด็กคนอื่นๆ

เช่น หากคุณย้าย Box ภายใน Column และแท็กย่อยอื่นๆ ที่ต้องเคลื่อนที่เมื่อ Box ขยับ ให้ใส่ข้อมูลออฟเซ็ตด้วย Modifier.layout{ } ดังนี้

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

วันที่

ทำให้ระยะห่างจากขอบของ Composable เคลื่อนไหว

วันที่

หากต้องการสร้างภาพเคลื่อนไหวให้กับระยะห่างจากขอบของ Composable ให้ใช้ animateDpAsState ร่วมกับ Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

สร้างภาพเคลื่อนไหวของ Composable

หากต้องการสร้างการเคลื่อนไหวของ Composable ให้ใช้ animateDpAsState ร่วมกับ Modifier.graphicsLayer{ } สำหรับการเปลี่ยนแปลงระดับความสูงครั้งเดียว ให้ใช้ Modifier.shadow() ถ้ากำลังทำให้เงาเคลื่อนไหว ตัวแก้ไข Modifier.graphicsLayer{ } เป็นตัวเลือกที่มีประสิทธิภาพมากกว่า

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

หรือใช้ Card Composable และตั้งค่าพร็อพเพอร์ตี้ระดับความสูงเป็น ค่าที่ต่างกันต่อรัฐ

ทำให้การปรับขนาดข้อความ การแปล หรือการหมุนเป็นภาพเคลื่อนไหว

วันที่

เมื่อทำให้การปรับขนาด การแปล หรือการหมุนข้อความเคลื่อนไหว ให้ตั้งค่า textMotion พารามิเตอร์ใน TextStyle เป็น TextMotion.Animated วิธีนี้จะทำให้ราบรื่นขึ้น การเปลี่ยนไปมาระหว่างข้อความเคลื่อนไหวได้ ใช้ Modifier.graphicsLayer{ } เพื่อ แปล หมุน หรือปรับขนาดข้อความ

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

ทำให้สีข้อความเคลื่อนไหว

วันที่

หากต้องการให้สีข้อความเคลื่อนไหว ให้ใช้ lambda ของ color ใน Composable BasicText ดังนี้

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

สลับระหว่างเนื้อหาประเภทต่างๆ

วันที่

ใช้ AnimatedContent เพื่อสร้างภาพเคลื่อนไหวระหว่าง Composable ต่างๆ หากคุณ แค่ต้องการให้ Composable มาตรฐานจางลง ให้ใช้ Crossfade

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

สามารถปรับแต่ง AnimatedContent เพื่อแสดงการป้อนและ ออกจากทรานซิชัน สำหรับข้อมูลเพิ่มเติม โปรดอ่านเอกสารประกอบใน AnimatedContent หรืออ่านบล็อกโพสต์นี้ใน AnimatedContent

เคลื่อนไหวขณะนำทางไปยังจุดหมายต่างๆ

วันที่

สร้างภาพเคลื่อนไหวการเปลี่ยนระหว่าง Composable เมื่อใช้ navigation-compose จะระบุ enterTransition และ exitTransition ใน Composable คุณยังตั้งภาพเคลื่อนไหวเริ่มต้นเป็น ใช้สำหรับปลายทางทั้งหมดที่ระดับบนสุด NavHost: วันที่

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

การเปลี่ยนเข้าและออกที่ใช้มีหลายประเภท ผลกระทบต่างๆ กับเนื้อหาขาเข้าและขาออก โปรดดู เอกสารประกอบเพิ่มเติม

เล่นภาพเคลื่อนไหวซ้ำ

วันที่

ใช้ rememberInfiniteTransition ด้วย infiniteRepeatable animationSpec เพื่อแสดงภาพเคลื่อนไหวซ้ำไปเรื่อยๆ เปลี่ยน RepeatModes เป็น ระบุว่าจะให้ระบบกลับไปกลับมาอย่างไร

ใช้ finiteRepeatable เพื่อทำซ้ำจำนวนครั้งที่กำหนดไว้

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

เริ่มภาพเคลื่อนไหวเมื่อเปิดตัว Composable

LaunchedEffect จะทำงานเมื่อ Composable เข้าสู่การเรียบเรียง เริ่ม ภาพเคลื่อนไหวในการเปิดตัว Composable ที่คุณสามารถใช้เพื่อขับเคลื่อนภาพเคลื่อนไหว การเปลี่ยนสถานะ ใช้ Animatable กับเมธอด animateTo เพื่อเริ่มต้น ภาพเคลื่อนไหวเมื่อเปิดตัว

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

สร้างภาพเคลื่อนไหวตามลำดับ

วันที่

ใช้ coroutine API ของ Animatable เพื่อดำเนินการตามลำดับหรือพร้อมกัน ภาพเคลื่อนไหว กำลังโทรหา animateTo บน Animatable หลังเกิดเหตุการณ์อื่นๆ ภาพเคลื่อนไหวแต่ละภาพเพื่อรอให้ภาพเคลื่อนไหวก่อนหน้าจบก่อน จึงดำเนินการต่อ เพราะเป็นฟังก์ชันระงับ

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

สร้างภาพเคลื่อนไหวพร้อมกัน

วันที่

ใช้ Coroutine API (Animatable#animateTo() หรือ animate) หรือ Transition API เพื่อสร้างภาพเคลื่อนไหวพร้อมกัน หากคุณใช้หลายอุปกรณ์ เปิดใช้งานฟังก์ชันในบริบทโครูทีน เปิดตัวภาพเคลื่อนไหวพร้อมกับ เวลา:

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

คุณสามารถใช้ updateTransition API เพื่อใช้สถานะเดียวกันในการขับรถได้ ภาพเคลื่อนไหวของคุณสมบัติที่แตกต่างกันได้หลายตัวพร้อมกัน ตัวอย่างด้านล่างเป็นภาพเคลื่อนไหว มีพร็อพเพอร์ตี้ 2 รายการที่ถูกควบคุมโดยการเปลี่ยนแปลงสถานะ ได้แก่ rect และ borderWidth

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

เพิ่มประสิทธิภาพของภาพเคลื่อนไหว

ภาพเคลื่อนไหวในการเขียนอาจก่อให้เกิดปัญหาด้านประสิทธิภาพ เนื่องจากลักษณะ ภาพเคลื่อนไหวเป็นอย่างไร ทั้งการเคลื่อนไหวหรือเปลี่ยนพิกเซลบนหน้าจออย่างรวดเร็ว ทีละเฟรมเพื่อสร้างภาพลวงตาของการเคลื่อนไหว

พิจารณาระยะต่างๆ ในการเขียน ได้แก่ การจัดองค์ประกอบ เลย์เอาต์ และการวาดภาพ ถ้า ภาพเคลื่อนไหวจะเปลี่ยนระยะของเลย์เอาต์ต้องใช้ Composable ที่ได้รับผลกระทบทั้งหมด การส่งต่อและวาดใหม่ หากภาพเคลื่อนไหวของคุณเกิดขึ้นในระยะการวาด ค่าเริ่มต้นจะมีประสิทธิภาพมากกว่ากรณีที่คุณเรียกใช้ภาพเคลื่อนไหวในเลย์เอาต์ เพราะจะทำให้มีงานทำในภาพรวมน้อยลง

เลือก lambda เพื่อให้แอปทำงานน้อยที่สุดขณะแสดงภาพเคลื่อนไหว Modifier หากเป็นไปได้ การดำเนินการนี้จะข้ามการจัดองค์ประกอบใหม่และดำเนินการ ภาพเคลื่อนไหวนอกระยะการเรียบเรียง Modifier.graphicsLayer{ } เนื่องจากตัวแก้ไขนี้จะทำงานเสมอในการเสมอกัน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ โปรดดูส่วนการเลื่อนการอ่านใน เอกสารประกอบเกี่ยวกับประสิทธิภาพ

เปลี่ยนเวลาของภาพเคลื่อนไหว

โดยค่าเริ่มต้น การเขียนจะใช้ภาพเคลื่อนไหวฤดูใบไม้ผลิสำหรับภาพเคลื่อนไหวส่วนใหญ่ Springs หรือ ภาพเคลื่อนไหวที่อิงตามฟิสิกส์ ให้ความรู้สึกเป็นธรรมชาติมากขึ้น และยังรบกวนผู้ใช้ได้ด้วย จะคำนึงถึงความเร็วปัจจุบันของวัตถุ ไม่ใช่เวลาคงที่ หากต้องการลบล้างค่าเริ่มต้น API ภาพเคลื่อนไหวทั้งหมดที่แสดงข้างต้น สามารถตั้งค่า animationSpec เพื่อปรับแต่ง วิธีแสดงภาพเคลื่อนไหวได้ คุณต้องการให้ทำงาน เป็นระยะเวลาหนึ่งหรือให้เด้งดึ๋งขึ้น

ต่อไปนี้เป็นข้อมูลสรุปเกี่ยวกับตัวเลือกต่างๆ ของ animationSpec:

• spring: ภาพเคลื่อนไหวแบบฟิสิกส์ เป็นค่าเริ่มต้นสำหรับภาพเคลื่อนไหวทั้งหมด คุณ เปลี่ยนความแข็งหรืออัตราส่วนการหน่วงได้เพื่อให้ได้ภาพเคลื่อนไหวแบบอื่น รูปลักษณ์และความรู้สึก
• tween (ย่อมาจาก between): ภาพเคลื่อนไหวที่อิงตามระยะเวลา, ภาพเคลื่อนไหว ระหว่าง 2 ค่าด้วยฟังก์ชัน Easing
• keyframes: ข้อกำหนดสำหรับการระบุค่าที่จุดสำคัญบางจุดใน ภาพเคลื่อนไหว
• repeatable: ข้อกำหนดตามระยะเวลาที่จะทำงานตามจำนวนครั้งที่กำหนด ระบุโดย RepeatMode
• infiniteRepeatable: ข้อกำหนดตามระยะเวลาที่ทำงานตลอดไป
• snap: สแนปไปยังค่าสิ้นสุดทันทีโดยไม่ต้องมีภาพเคลื่อนไหว

ดูข้อมูลเพิ่มเติมเกี่ยวกับ animationSpecs ได้ในเอกสารประกอบฉบับเต็ม

แหล่งข้อมูลเพิ่มเติม

สำหรับตัวอย่างภาพเคลื่อนไหวสนุกๆ ใน Compose โปรดดูข้อมูลต่อไปนี้

• ภาพเคลื่อนไหวสั้นๆ 5 แบบใน Compose
• การทำให้แมงกะพรุนเคลื่อนไหวใน Compose
• การปรับแต่ง AnimatedContent ใน Compose
• การค่อยๆ เปลี่ยนฟังก์ชันการค่อยๆ เปลี่ยนใน Compose