Skip to content

Instantly share code, notes, and snippets.

@riggaroo
Last active Jul 19, 2022
Embed
What would you like to do?
Jetpack Compose Bouncy Ropes code
/* Copyright 2022 Google LLC.
SPDX-License-Identifier: Apache-2.0 */
@Composable
fun BouncyRopes() {
val startCoOrdinate by remember {
mutableStateOf(Offset(0f, 0f))
}
var endCoOrdinate by remember {
mutableStateOf(Offset(100f, 0f))
}
val midPoint by remember {
derivedStateOf {
val distance = (endCoOrdinate.x - startCoOrdinate.x)
Offset(
(endCoOrdinate.x - startCoOrdinate.x) / 2f,
endCoOrdinate.y + distance
)
}
}
val path = remember {
Path()
}
val midPointAnimated = animateOffsetAsState(
midPoint,
animationSpec = spring(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessVeryLow
)
)
Canvas(modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.pointerInput("drag") {
detectDragGestures { change, dragAmount ->
change.consume()
endCoOrdinate += dragAmount
}
},
onDraw = {
path.reset()
path.moveTo(startCoOrdinate.x, startCoOrdinate.y)
path.quadraticBezierTo(
midPointAnimated.value.x,
midPointAnimated.value.y,
endCoOrdinate.x,
endCoOrdinate.y
)
drawPath(path, Color.Black, style = Stroke(4.dp.toPx()))
val radius = 10.dp.toPx()
drawCircle(Color.Black, center = startCoOrdinate, radius = radius)
drawCircle(Color.Black, center = endCoOrdinate, radius = radius)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment