Jetpack Compose의 Spotify와 같은 터치 피드백 애니메이션

유저들에게 클릭피드백을 보여줘야 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ 기본 리플 효과보다 스포티파이의 바운싱 클릭 효과가 더 마음에 드니까 해보자

그 과정에서 몇 가지 수정자와 애니메이션도 살펴볼 것입니다.

이를 위해 UI 요소를 누를 때 크기 와 불투명도를Modifier 줄이는 재사용 가능(클릭 가능한 수정자와 유사)을 생성합니다. 계속해서 모든 코드를 입력하고 설명하겠습니다…

/**
 * 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. 그런 다음 언제 실행하려는 여러 애니메이션이 있으므로 여러 애니메이션을 실행하는 확장 기능을 제공하는 기능을 isPressed == true사용합니다 .updateTransition()
2. 애니메이션을 만들기 위해 animateFloat()확장을 사용하여 두 개의 애니메이션을 만듭니다. scaleFactor하나는 opacity UI 요소에 애니메이션을 적용하는 데 사용할 애니메이션입니다.
3. 스케일 및 알파를 변경하기 위해 graphicsLayer일반적으로 UI 요소에 변환 및 애니메이션을 적용하는 데 사용되는 수정자를 사용했습니다. ( 자세한 내용은 이 훌륭한 기사를 확인하십시오 .)
4. 마지막으로 클릭을 처리하기 위해 클릭 가능한 수정자를 추가하고 indicationparam을 다음 으로 설정하여 기본 파급 효과를 제거합니다.null

그렇군요~ 잘 사용해보세요~

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
        )
    }
)

      
                

                    
                    
                
            

그게 다야, 나는 당신이 블로그를 사랑 바랍니다 ❤️