Skip to content

Instantly share code, notes, and snippets.

@belinwu
Forked from vishal2376/FlipAnimation.kt
Created April 28, 2024 04:32
Show Gist options
  • Save belinwu/4878ec47c3df950a435b7a8d1c9399d1 to your computer and use it in GitHub Desktop.
Save belinwu/4878ec47c3df950a435b7a8d1c9399d1 to your computer and use it in GitHub Desktop.
Card Flip Animation using Jetpack Compose
package com.vishal2376.animations.ui.theme
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.EaseInOut
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Preview
@Composable
fun FlipAnimation() {
var isCardFlipped by remember { mutableStateOf(false) }
val animDuration = 900
val zAxisDistance = 10f //distance between camera and Card
val frontColor by animateColorAsState(
targetValue = if (isCardFlipped) Color(0xFF789FFF) else Color(0xFF282A31),
animationSpec = tween(durationMillis = animDuration, easing = EaseInOut),
label = ""
)
// rotate Y-axis with animation
val rotateCardY by animateFloatAsState(
targetValue = if (isCardFlipped) 180f else 0f,
animationSpec = tween(durationMillis = animDuration, easing = EaseInOut),
label = ""
)
// text animation
val textAlpha by animateFloatAsState(
targetValue = if (isCardFlipped) 0f else 1f,
tween(durationMillis = 1500),
label = ""
)
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = Modifier
.size(200.dp, 300.dp)
.graphicsLayer {
rotationY = rotateCardY
cameraDistance = zAxisDistance
}
.clip(RoundedCornerShape(24.dp))
.clickable { isCardFlipped = !isCardFlipped }
.background(frontColor)
)
Spacer(modifier = Modifier.height(32.dp))
Text(
modifier = Modifier.graphicsLayer {
alpha = if (isCardFlipped) 1f - textAlpha else textAlpha
},
text = if (isCardFlipped) "Reveal" else "Hide",
color = Color.Black,
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment