Skip to content

Instantly share code, notes, and snippets.

@MotasemF
Created September 19, 2023 19:09
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MotasemF/c6b165ed29ca34138cace50b9e09844b to your computer and use it in GitHub Desktop.
Save MotasemF/c6b165ed29ca34138cace50b9e09844b to your computer and use it in GitHub Desktop.
@Preview()
@Composable
fun Card() {
var rotationX by remember { mutableStateOf(0f) }
var rotationY by remember { mutableStateOf(0f) }
Box(
Modifier
.fillMaxSize()
.background(Color.Black)) {
Box(
modifier = Modifier
.size(300.dp, 200.dp)
.align(Alignment.Center)
.blur(5.dp, 5.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
.background(
brush = Brush.sweepGradient(
colors = listOf(
Color(0xFF00FFFF),
Color(0xFFFF00FF),
Color(0xFFFFFF00),
Color(0xFF00FFFF)
),
),
shape = RoundedCornerShape(10.dp)
)
)
Box(
modifier = Modifier
.size(300.dp, 200.dp)
.graphicsLayer {
this.rotationX = rotationX
this.rotationY = rotationY
}
.align(Alignment.Center)
.clip(RoundedCornerShape(10.dp))
.background(Color.Black)
.pointerInput(Unit) {
detectDragGestures { change, dragAmount ->
val rotationYI = (0f..300.dp.toPx()).convert(change.position.x, (0f..1f))
val rotationXI = (0f..200.dp.toPx()).convert(change.position.y, (0f..1f))
rotationX = lerp(6f, -6f, rotationXI)
rotationY = lerp(-3f, 3f, rotationYI)
}
}
){
Row(modifier = Modifier.padding(20.dp).align(Alignment.BottomStart), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
Box(
Modifier
.size(40.dp)
.clip(CircleShape)
.background(Color.Gray.copy(0.4f)))
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
Box(
Modifier
.size(120.dp, 15.dp)
.clip(CircleShape)
.background(Color.Gray.copy(0.4f)))
Box(
Modifier
.size(60.dp, 15.dp)
.clip(CircleShape)
.background(Color.Gray.copy(0.4f)))
}
}
}
}
}
fun lerp(start: Float, stop: Float, fraction: Float) =
(start * (1 - fraction) + stop * fraction)
fun ClosedFloatingPointRange<Float>.convert(number: Float, target: ClosedFloatingPointRange<Float>): Float {
val ratio = number / (endInclusive - start)
return ratio * (target.endInclusive - target.start)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment