Chạm vào Hoạt ảnh phản hồi như Spotify trong Jetpack Compose

Điều cần thiết là hiển thị phản hồi nhấp chuột của người dùng bla bla bal, Tóm lại, tôi thích hiệu ứng nhấp chuột nảy của Spotify hơn hiệu ứng Ripple mặc định, vì vậy hãy làm điều đó

Đồng thời, chúng ta cũng sẽ khám phá một số công cụ sửa đổi và hoạt ảnh…

Để làm điều đó, chúng tôi sẽ tạo một công cụ có thể sử dụng lại Modifier(tương tự như công cụ sửa đổi có thể nhấp) để giảm tỷ lệ và độ mờ khi nhấn phần tử giao diện người dùng.
Tôi sẽ tiếp tục và đặt tất cả mã và sau đó giải thích nó…

/**
 * Adds a bouncing click effect to a Composable.
 *
 * @param enabled whether the UI element should be enabled and clickable
 * @param onClick the action to perform when the UI element is clicked
 */
fun Modifier.bouncingClickable(
    enabled: Boolean = true,
    onClick: () -> Unit
) = composed {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    val animationTransition = updateTransition(isPressed, label = "BouncingClickableTransition")
    val scaleFactor by animationTransition.animateFloat(
        targetValueByState = { pressed -> if (pressed) 0.94f else 1f },
        label = "BouncingClickableScaleFactorTransition",
    )
    val opacity by animationTransition.animateFloat(
        targetValueByState = { pressed -> if (pressed) 0.7f else 1f },
        label = "BouncingClickableOpacityTransition"
    )

    this
        .graphicsLayer {
            this.scaleX = scaleFactor
            this.scaleY = scaleFactor
            this.alpha = opacity
        }
        .clickable(
            interactionSource = interactionSource,
            indication = null,
            enabled = enabled,
            onClick = onClick
        )
}

1. Sau đó, vì chúng tôi có nhiều hoạt ảnh mà chúng tôi muốn chạy khi nào isPressed == true, nên chúng tôi sử dụng updateTransition()chức năng mở rộng để chạy nhiều hoạt ảnh.
2. Để tạo hoạt ảnh, chúng tôi sử dụng animateFloat()tiện ích mở rộng để tạo hai hoạt ảnh, một cho scaleFactorvà một cho hoạt ảnh opacity mà chúng tôi sẽ sử dụng để tạo hiệu ứng cho thành phần giao diện người dùng của mình.
3. Để thay đổi tỷ lệ & alpha, chúng tôi đã sử dụng graphicsLayerCông cụ sửa đổi thường được sử dụng để áp dụng các phép biến đổi và hoạt ảnh cho một thành phần giao diện người dùng. ( xem bài viết tuyệt vời này để tìm hiểu thêm )
4. Cuối cùng, chúng tôi thêm một công cụ sửa đổi có thể nhấp để xử lý nhấp chuột và xóa hiệu ứng gợn sóng mặc định bằng cách đặt indicationtham số thànhnull

Vậy là xong, dùng thôi nào

Box(
    modifier = Modifier
        .bouncingClickable {
            println("Clicked...")
        }
        .size(100.dp)
        .clip(CircleShape)
        .background(Color.Black)
) {}

      
                

                    
                    
                
            

val scaleFactor by animationTransition.animateFloat(
    targetValueByState = { pressed -> if (pressed) 0.94f else 1f },
    label = "BouncingClickableScaleFactorTransition",
    transitionSpec = {
        spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    }
)

      
                

                    
                    
                
            

Vậy đó, tôi hy vọng bạn yêu thích blog ❤️