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
My progress