🙏 Supported by Emerge Tools
The platform for all your mobile performance needs
Bouncy Ropes
Author: Rebecca Franks
Demo that shows some slick gestures, animations and physics to emulate a bouncy rope.
| /* 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) | |
| }) | |
| } |
Have a project you'd like to submit? Fill this form, will ya!
If you like this snippet, you might also like:
Maker OS is an all-in-one productivity system for developers
I built Maker OS to track, manage & organize my life. Now you can do it too!
The #1 destination for all things Jetpack Compose 🤖📱