A modern programming language that makes developers happier.

kotlinlang

Hi, I need help regarding compose animation. I had an svg file in here, like a spinner that I want to animate to rotate indefinitely. However, I am overwhelmed with the documentation, not sure what should I look into to get the output I needed. I need some guidance, thank you

This might interest you as an alternative to svgs: <https://github.com/airbnb/lottie/blob/master/android-compose.md|https://github.com/airbnb/lottie/blob/master/android-compose.md>

<https://github.com/ismai117/kottie|https://github.com/ismai117/kottie> or <https://github.com/alexzhirkevich/compottie|https://github.com/alexzhirkevich/compottie> for multiplatform

also check out <https://developer.android.com/develop/ui/views/animations/drawable-animation|https://developer.android.com/develop/ui/views/animations/drawable-animation>

I'll be going now

I have svg file, but I can get png or jpeg version of that. I am not sure what vector drawable is (still need to research). I am thinking that I can just animate the image file, can I do that? Or I need to draw it?

Android doesn’t support SVGs directly, you’ll have to convert it to Android’s vector format first. There’s a tool in Android Studio I believe that does that. Then you can load it as a vector resource using Compose APIs and use the Image composable. To animate rotation, you’ll want an infinite repeating animation spec to create a float Animatable to represent the angle. 

<https://medium.com/androiddevelopers/making-jellyfish-move-in-compose-animating-imagevectors-and-applying-agsl-rendereffects-3666596a8888|https://medium.com/androiddevelopers/making-jellyfish-move-in-compose-animating-imagevectors-and-applying-agsl-rendereffects-3666596a8888>
An article on taking this vector drawable and animating parts of it.

Then I've used this <https://github.com/rafaeltonholo/svg-to-compose|https://github.com/rafaeltonholo/svg-to-compose> with great success to turn svgs into a compose ImageVector if you want to do the same

Rebeca’s post and Lottie are major overkill if all you want to do is rotate the whole image though

Oh yeah absolutely. If what you need is something like `graphicsLayer { rotationZ = 90f }` for example then you should absolutely do that instead.

I was able to make it work using this code below.
I am using SVG (moko-resources)

```val rotation = remember { Animatable(0f) }

 LaunchedEffect(Unit) {
        rotation.animateTo(
            targetValue = 360f,
            animationSpec = infiniteRepeatable(
                animation = tween(durationMillis = 1000, easing = LinearEasing),
            )
        )
    }

Image(
      painter = painterResource(id = MR.images.loading.drawableResId),
      contentDescription = "loading",
      modifier = Modifier.rotate(rotation.value)
)```

I would not use the rotation modifier that accepts the angle directly, since that will require recomposition every frame. I would instead use graphicsLayer like <@U010JQZ3FRC> suggested, since that only requires updating the graphics layer itself every frame. 

Thanks Zach, I'll try to research more on that. I'm still new in kotlin multiplatform and I am not sure the do's and don'ts yet. I really appreciate inputs like that.

Updated code:

``` val infiniteTransition = rememberInfiniteTransition(label = "loading")
    val float = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1000, easing = LinearEasing),
            repeatMode = RepeatMode.Restart
        ), label = "loading"
    )

Image(
     painter = painterResource(id = MR.images.loading.drawableResId),
     contentDescription = "loading",
     modifier = Modifier
     .graphicsLayer {
         rotationZ = float.value
      }
)```
Thank you!