Công cụ sửa đổi ảnh động và thành phần kết hợp

Compose đi kèm với các thành phần kết hợp và đối tượng sửa đổi được tích hợp sẵn để xử lý các trường hợp sử dụng ảnh động phổ biến.

Thành phần kết hợp ảnh động tích hợp sẵn

Tạo ảnh động xuất hiện và biến mất bằng AnimatedVisibility

Hình 1. Tạo ảnh động cho sự xuất hiện và biến mất của một mục trong cột

Thành phần kết hợp AnimatedVisibility tạo ảnh động làm xuất hiện nội dung của ảnh động và làm nội dung đó biến mất.

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

Theo mặc định, nội dung xuất hiện theo kiểu rõ dần và mở rộng, và biến mất theo kiểu mờ dần và thu nhỏ. Quá trình chuyển đổi có thể được tuỳ chỉnh bởi hàm cụ thể EnterTransition và 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

Như có thể thấy trong ví dụ trên, bạn có thể kết hợp nhiều đối tượng EnterTransition hoặc ExitTransition với toán tử + và mỗi đối tượng sẽ chấp nhận các tham số tuỳ chọn để tuỳ chỉnh hoạt động của đối tượng đó. Hãy xem phần tham khảo để biết thêm thông tin.

Ví dụ về EnterTransition và ExitTransition

EnterTransition	ExitTransition
fadeIn	fadeOut
slideIn	slideOut
slideInHorizontally	slideOutHorizontally
slideInVertically	slideOutVertically
scaleIn	scaleOut
expandIn	shrinkOut
expandHorizontally	shrinkHorizontally
expandVertically	shrinkVertically

AnimatedVisibility cũng cung cấp một biến thể nhận MutableTransitionState. Biến thể này cho phép bạn kích hoạt một ảnh động ngay khi bạn thêm AnimatedVisibility vào cây sáng tác. Việc này cũng hữu ích khi quan sát trạng thái ảnh động.

// 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

Nhập và thoát hình ảnh động cho bố cục con

Nội dung trong AnimatedVisibility (bố cục con trực tiếp hoặc gián tiếp) có thể sử dụng công cụ sửa đổi animateEnterExit để xác định chế độ ảnh động khác nhau cho từng thành phần. Hiệu ứng hình ảnh cho mỗi bố cục con là sự kết hợp của các ảnh động được chỉ định trong thành phần kết hợp AnimatedVisibility và nhập và thoát ảnh động của riêng bố cục con.

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

Trong một số trường hợp, bạn có thể không áp dụng AnimatedVisibility cho ảnh động nào để bố cục con có thể có ảnh động của riêng mình bằng animateEnterExit. Để đạt được mục đích này, hãy chỉ định EnterTransition.None và ExitTransition.None tại thành phần kết hợp AnimatedVisibility.

Thêm ảnh động tuỳ chỉnh

Nếu bạn muốn thêm các hiệu ứng ảnh động tuỳ chỉnh ngoài các ảnh động nhập và thoát được tích hợp sẵn, hãy truy cập phiên bản Transition dưới đây thông qua thuộc tính transition bên trong hàm lambda nội dung dành cho AnimatedVisibility. Mọi trạng thái ảnh động được thêm vào phiên bản Chuyển đổi sẽ chạy đồng thời với các ảnh động nhập và thoát của AnimatedVisibility. AnimatedVisibility đợi cho đến khi tất cả các ảnh động trong Transition hoàn tất trước khi xoá nội dung. Đối với các ảnh động thoát được tạo độc lập với Transition (chẳng hạn như sử dụng animate*AsState), AnimatedVisibility sẽ không thể tính đến các ảnh động đó và vì thế, có thể xoá nội dung thành phần kết hợp trước khi hoàn tất.

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

Hãy xem updateTransition để biết thông tin chi tiết về Transition.

Tạo ảnh động dựa trên trạng thái mục tiêu bằng AnimatedContent

Thành phần kết hợp AnimatedContent tạo hoạt ảnh cho nội dung của nó khi thay đổi theo trạng thái mục tiêu.

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

Lưu ý phải luôn sử dụng tham số hàm lambda và phản ánh tham số đó vào nội dung. API sử dụng giá trị này làm chìa khoá để xác định nội dung hiện đang hiển thị.

Theo mặc định, nội dung ban đầu mờ dần và sau đó nội dung mục tiêu rõ dần (hoạt động này được gọi là mờ dần qua). Bạn có thể tuỳ chỉnh hành vi ảnh động này bằng cách chỉ định đối tượng ContentTransform cho tham số transitionSpec. Bạn có thể tạo ContentTransform bằng cách kết hợp EnterTransition với ExitTransition bằng cách sử dụng hàm infix with. Bạn có thể áp dụng SizeTransform cho ContentTransform bằng cách gắn nó với hàm infix 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 xác định cách hiển thị của nội dung mục tiêu, còn ExitTransition xác định cách làm biến mất nội dung ban đầu. Ngoài tất cả các hàm EnterTransition và ExitTransition có sẵn cho AnimatedVisibility, AnimatedContent cung cấp slideIntoContainer và slideOutOfContainer. Đây là các lựa chọn thay thế thuận tiện cho slideInHorizontally/Vertically và slideOutHorizontally/Vertically để tính khoảng cách trên trang trình bày dựa trên kích thước của nội dung ban đầu và nội dung mục tiêu của AnimatedContent.

SizeTransform xác định cách kích thước sẽ tạo ảnh động giữa nội dung ban đầu và nội dung mục tiêu. Bạn có quyền truy cập vào cả kích thước ban đầu và kích thước mục tiêu khi tạo ảnh động. SizeTransform cũng kiểm soát việc có nên cắt nội dung thành kích thước thành phần trong các hình ảnh động hay không.

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

Tạo hiệu ứng động cho hiệu ứng chuyển đổi vào và thoát của thành phần con

Cũng giống như AnimatedVisibility, công cụ sửa đổi animateEnterExit có sẵn bên trong nội dung hàm lambda của AnimatedContent. Sử dụng thuộc tính này để áp dụng EnterAnimation và ExitAnimation cho từng bố cục con trực tiếp hoặc gián tiếp.

Thêm ảnh động tuỳ chỉnh

Giống như AnimatedVisibility, trường transition có sẵn bên trong hàm lambda nội dung của AnimatedContent. Sử dụng trường này để tạo hiệu ứng ảnh động tuỳ chỉnh chạy đồng thời với quá trình chuyển đổi AnimatedContent. Hãy xem updateTransition để biết thông tin chi tiết.

Tạo ảnh động giữa 2 bố cục bằng Crossfade

Crossfade tạo ảnh động giữa hai bố cục bằng một ảnh động chuyển đổi. Bằng cách chuyển đổi, giá trị được chuyển sang thông số current, nội dung được chuyển đổi với một ảnh động chuyển đổi.

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

Đối tượng sửa đổi ảnh động tích hợp

Tạo ảnh động cho các thay đổi về kích thước thành phần kết hợp bằng animateContentSize

Hình 2. Thành phần kết hợp tạo ảnh động mượt mà giữa kích thước nhỏ và kích thước lớn hơn

Công cụ sửa đổi animateContentSize sẽ tạo ảnh động cho việc thay đổi về kích thước.

Lưu ý: Thứ tự animateContentSize được đặt trong chuỗi công cụ sửa đổi của bạn rất quan trọng. Để có ảnh động mượt mà, hãy chắc chắn bạn đặt giá trị đó trước bất kỳ đối tượng sửa đổi kích thước nào, chẳng hạn như size hoặc defaultMinSize để đảm bảo animateContentSize báo cáo mọi thay đổi giá trị hoạt ảnh đối với Bố cục.

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

Ảnh động cho mục danh sách

Nếu bạn đang tìm cách tạo ảnh động cho việc sắp xếp lại thứ tự mục bên trong lưới hoặc danh sách Lazy, hãy xem tài liệu ảnh động của mục bố cục lazy.