반응형
- 얼마 전에 리플 효과를 적용시킨 FAB 버튼을 구현했었다.
- 리플 내부에는 클릭 상태를 감지하는 interactionSource를 포함하고 있다. 이를 통해 리플뿐만 아니라 버튼 자체의 스케일이 변하는 애니메이션까지 추가해 보겠다.
interactionSource = interactionSource,
indication = rememberRipple(
color = colorResource(R.color.color_system_label_default_light).copy(alpha = 0.16f),
bounded = true
),
onClick = onClick
- 먼저 아래 값들을 선언해 준다. 모두 pressed 상태를 감지하기 위한 요소이다.
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
- animateFloatAsState()를 선언해준다. Float 값과 스펙을 통해 스케일 변경 등의 애니메이션 적용이 가능하다.
val scale = animateFloatAsState(
if (isPressed) 0.95f else 1f,
animationSpec = tween(
durationMillis = 200,
easing = FastOutSlowInEasing,
delayMillis = 0
), label = ""
)- easing은 애니메이션에서 값이 시간에 따라 어떻게 변할지를 결정하는 요소다. 디자인 시스템 구성 중에 이야기가 나왔다.
- 이제 효과 대상이 될 컴포저블의 modifier clickable에 interactionSource 연결 및 Ripple 코드를 구현해 주면 된다.
- 또한 스케일 애니메이션 효과를 위해 modifier scale을 선언해 주는 것도 잊지 말자
Surface(
modifier = Modifier
.size(52.dp)
.scale(scale.value)
.clip(CircleShape)
.clickable(
interactionSource = interactionSource,
indication = rememberRipple(
color = colorResource(R.color.color_system_label_default_light).copy(alpha = 0.16f),
bounded = true
),
onClick = onClick
),
반응형
