Jetpack compose image rotation pivot

446 views Asked by At

I would like to make animated rotation for image arrow like in the video. Right now I can rotate that image, but the rotate pivot is from center of image, how to change it into edge of image?

Is there any way to change rotation pivot? I already tried by using canvas, but still no progress so far.

here my current code

              Column() {
                        Box(
                            modifier = Modifier
                                .size(160.dp),
                            contentAlignment = Alignment.Center

                            ) {
                            IconButton(
                                onClick = {
                                    rotation = 270
                                }, modifier = Modifier
                                    .rotate(315f)
                                    .offset(x = 0.dp, y = -60.dp)

                            ) {
                                Icon(
                                    imageVector = Icons.Default.Home, contentDescription = "",
                                    modifier = Modifier
                                )
                            }

                            IconButton(
                                onClick = {
                                    rotation = 315
                                }, modifier = Modifier
                                    .rotate(0f)
                                    .offset(x = 0.dp, y = -60.dp)

                            ) {
                                Icon(
                                    imageVector = Icons.Default.Favorite, contentDescription = "",
                                    modifier = Modifier
                                )
                            }

                            IconButton(
                                onClick = {
                                    rotation = 0
                                }, modifier = Modifier
                                    .rotate(45f)
                                    .offset(x = 0.dp, y = -60.dp)
                            ) {
                                Icon(
                                    imageVector = Icons.Default.Person, contentDescription = "",
                                    modifier = Modifier
                                )
                            }

                            Box(
                                modifier = Modifier
                                    .size(70.dp)
                                    .background(color = Color.Red, shape = CircleShape)
                                    .align(
                                        Alignment.Center
                                    ),
                            ) {

                                Image(
                                    modifier = Modifier.size(24.dp).align(Alignment.Center).rotate(angle),
                                    painter = painterResource(id = R.drawable.gender_arrow), contentDescription = "")
                            }
                        }
                    }

Expected result

enter image description here

My progress

enter image description here

0

There are 0 answers