SUBSCRIBE NOW

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

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)
        
                  })
        
          }

view raw BouncyRopes.kt hosted with ❤ by GitHub

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!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets

	/* 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)
	})
	}