Jetpack Compose play pause animation

Question

I would like to achieve this UI using only canvas in jetpack compose, I can draw the circle, the pause lines and even the rounded corner triangle (using Path) But i don't know how to animate one to the other.

The triangle is a shape and the pause is 2 drawLine() on a Canvas object.

Answer 1

You need to combine different shapes you have made using transform like below translate and rotate a triangle on the canvas. For Reference Graphics Docs

withTransform({
translate(left = canvasWidth / 5F)
rotate(degrees = 45F)}) {
drawRect(
    color = Color.Gray,
    topLeft = Offset(x = canvasWidth / 3F, y = canvasHeight / 3F),
    size = canvasSize / 3F
)}