Welcome to my 10 Days of Jetpack Compose Animations! 🎉 In this series, I explore various animations using Jetpack Compose, showcasing creative ways to enhance UI/UX in Android applications.
Simple Roatating Card composable..
Card(
modifier = modifier
.graphicsLayer {
rotationY = positionAxisY // Move card according to value of customY.
cameraDistance = 14f * density
},
) {
// Here, logic is about coordinate system such as [0..90], [91..270], [270..360].
if (abs(positionAxisY.toInt()) % 360 <= 90) {
Box(
Modifier.fillMaxSize()
) {
frontSide()
}
} else if (abs(positionAxisY.toInt()) % 360 in 91..270) {
Box(
Modifier
.fillMaxSize()
.graphicsLayer {
rotationY = 180f // Important to avoid mirror effect.
},
)
}
ThreadCard.mp4
SimpleGame Pad composable.
Position.values().forEach { position ->
val offset = position.getOffset(buttonSizePx)
MyButton(
modifier = Modifier
.offset {
IntOffset(
x = offset.x.roundToInt(),
y = offset.y.roundToInt()
)
}
.graphicsLayer {
alpha = buttonAlpha.value
scaleX = buttonAlpha.value
scaleY = buttonAlpha.value
}
.size(buttonSize)
.padding(8.dp)
,
isSelected = position == currentPosition,
position = position
)
}
}
GamePad.mp4
Simple Story composable.
@Composable
fun rememberSharedAnimatableState(
animatableStates: List<AnimatableState>,
toTargetAnimationsSpec: AnimationSpec<Float>? = null,
toInitialAnimationsSpec: AnimationSpec<Float>? = null
): SharedAnimatableState {
return remember {
SharedAnimatableState(
animatableStates = animatableStates,
toTargetAnimationsSpec = toTargetAnimationsSpec,
toInitialAnimationsSpec = toInitialAnimationsSpec
)
}
}
StoryUi.mp4
// Day 4
Water Wave composable.
val wavesShader by produceState<Shader?>(
initialValue = null,
constraintsHeight,
constraintsWidth,
color,
density
) {
value = withContext(Dispatchers.Default) {
createWavesShader(
width = with(density) { constraintsWidth.roundToPx() },
height = with(density) { constraintsHeight.roundToPx() },
color = color
)
}
}