I have highlighted (red) my problem in the image; I want to animate that blue indicator triangle.
The triangle is moving, but it is not properly moving. I don't know what I am missing.
Timer Image with what I have achieved so far:
This is my code so far.
val center = Offset(size.width / 2f, size.height / 2f)
val beta = (250f * value + 145f) * (PI / 180f).toFloat()
val r = size.width / 2f
val a = cos(beta) * r
val b = sin(beta) * r
drawPoints(
listOf(Offset(center.x + a, center.y + b)),
pointMode = PointMode.Points,
color = Color.Gray,
strokeWidth = (strokeWidth * 2.2f).toPx(),
cap = StrokeCap.Round
)
drawPoints(
listOf(Offset(center.x + a, center.y + b)),
pointMode = PointMode.Points,
color = Color.White,
strokeWidth = (strokeWidth * 2f).toPx(),
cap = StrokeCap.Round
)
drawPoints(
listOf(Offset(center.x + a, center.y + b)),
pointMode = PointMode.Points,
color = PrimaryBlueColor,
strokeWidth = (strokeWidth * 1f).toPx(),
cap = StrokeCap.Round
)
drawImage(
image = vector,
topLeft = Offset(center.x + a, center.y + b)
)
Rotation in Compose is very simple. Insider Canvas or actually DrawScope call
As
Full Sample
Demonstration
Code