vector animation in android compose

Question

I have some problem: I want do clock arrow animation effect, but I can't find how I can set step count or step degree for my animation.

I'm using the following approach:

val rotation by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        animation = tween<Float>(
            durationMillis = 1000,
            easing = LinearEasing,
        ),
    ),
    label = ""
)


Image(
    painter = painterResource(id = imgRes),
    modifier = Modifier
        .size(imageSize)
        .align(Alignment.CenterHorizontally)
        .rotate(rotation),
    contentDescription = "Image",
)

But the angle changes very "smoothly". I would like it to be jerky (like the second hand on a watch).

I'm trying to do something similar to a loading animation (like this animation).

Can you tell me how I can do this on Compose?

Thanks!

Answer 1

For now I decided to go with a mixed approach. I used xml layout inside compose func:

@Composable
fun TextDialogLoader(
    title: String = "Title",
    text: String = "Dialog Text",
    onDone: (() -> Unit)? = null,
) {
    val Dim = LocalDim.current

    Dialog(
        onDismissRequest = { onDone?.invoke() }
    ) {
        Card(
            colors = CardDefaults.cardColors(
                containerColor = Color.White,
            ),
            shape = RoundedCornerShape(Dim.special24),
            //.wrapContentSize(),
        ) {
            Column(
                modifier = Modifier
                    .padding(Dim.special24)
            ) {
                Text(
                    text = title,
                    textAlign = TextAlign.Start,
                    fontFamily = OpenSansFamily,
                    fontSize = 14.sp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = Dim.special28),
                    maxLines = 2,
                    color = Black,
                    fontWeight = FontWeight.Bold
                )

                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                ) {
                    AndroidView(
                        factory = { context ->
                            LoaderView(context)
                        }
                    )
                }

                Text(
                    text = text,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(Dim.spaceMedium),
                    fontSize = 14.sp,
                    fontFamily = OpenSansFamily,
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

LoaderView:

class LoaderView(
    context: Context,
    attrs: AttributeSet? = null
): FrameLayout(context, attrs) {
    var binding: ImageViewLoaderBinding

    init {
        binding = ImageViewLoaderBinding.inflate(LayoutInflater.from(context), this, true)
    }
}

image_view_loader.xml:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/imageViewLoader"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/anim_loading_new"
    android:visibility="visible"
    tools:ignore="ContentDescription" />

anum_loading_new.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_loader"
    android:pivotX="50%"
    android:pivotY="50%" />

ic_loader.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M12,24C11.55,24 11.25,23.7 11.25,23.25V18.75C11.25,18.3 11.55,18 12,18C12.45,18 12.75,18.3 12.75,18.75V23.25C12.75,23.7 12.45,24 12,24Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.5"
      android:fillColor="#000000"
      android:pathData="M12,6C11.55,6 11.25,5.7 11.25,5.25V0.75C11.25,0.3 11.55,0 12,0C12.45,0 12.75,0.3 12.75,0.75V5.25C12.75,5.7 12.45,6 12,6Z"
      android:strokeAlpha="0.5" />
  <path
      android:fillAlpha="0.5"
      android:fillColor="#000000"
      android:pathData="M15.3,6.9C15.15,6.9 15,6.9 15,6.75C14.7,6.6 14.55,6.15 14.7,5.7L16.95,1.8C17.1,1.5 17.7,1.35 18,1.65C18.3,1.8 18.45,2.25 18.3,2.7L16.05,6.6C15.9,6.75 15.6,6.9 15.3,6.9Z"
      android:strokeAlpha="0.5" />
  <path
      android:fillColor="#000000"
      android:pathData="M17.85,9.2999C17.55,9.2999 17.4,9.1499 17.25,8.8499C17.1,8.5499 17.1,8.0999 17.55,7.7999L21.45,5.5499C21.75,5.3999 22.2,5.3999 22.5,5.8499C22.65,6.1499 22.65,6.5999 22.2,6.8999L18.3,9.1499C18.15,9.2999 18,9.2999 17.85,9.2999Z" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M21.75,18.5999C21.6,18.5999 21.45,18.5999 21.45,18.4499L17.55,16.1999C17.25,16.0499 17.1,15.5999 17.25,15.1499C17.4,14.8499 17.85,14.6999 18.3,14.8499L22.2,17.0999C22.5,17.2499 22.65,17.6999 22.5,18.1499C22.2,18.5999 22.05,18.5999 21.75,18.5999Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M17.55,22.65C17.25,22.65 17.1,22.5 16.95,22.2L14.7,18.3C14.4,18 14.55,17.55 15,17.4C15.3,17.25 15.75,17.25 16.05,17.7L18.3,21.6C18.45,21.9 18.45,22.35 18,22.65C17.85,22.65 17.7,22.65 17.55,22.65Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M6,9.3C5.85,9.3 5.7,9.3 5.7,9.15L1.8,7.05C1.5,6.75 1.35,6.3 1.5,6C1.65,5.7 2.1,5.55 2.55,5.7L6.45,7.95C6.75,8.25 6.9,8.7 6.75,9C6.6,9.3 6.3,9.3 6,9.3Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M8.4,6.9C8.1,6.9 7.95,6.75 7.8,6.45L5.55,2.55C5.4,2.25 5.4,1.8 5.85,1.65C6.15,1.35 6.6,1.5 6.9,1.8L9.15,5.7C9.3,6 9.3,6.45 8.85,6.75C8.7,6.9 8.55,6.9 8.4,6.9Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillColor="#000000"
      android:pathData="M23.25,12.75H18.75C18.3,12.75 18,12.45 18,12C18,11.55 18.3,11.25 18.75,11.25H23.25C23.55,11.25 24,11.55 24,12C24,12.45 23.55,12.75 23.25,12.75Z" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M6.3,22.6501C6.15,22.6501 6,22.6501 6,22.5001C5.7,22.3501 5.55,21.9001 5.7,21.4501L7.95,17.5501C8.1,17.2501 8.55,17.1001 9,17.2501C9.3,17.4001 9.45,17.8501 9.3,18.3001L7.05,22.2001C6.75,22.5001 6.6,22.6501 6.3,22.6501Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M2.2483,18.5999C1.9483,18.5999 1.7983,18.4499 1.6483,18.1499C1.4983,17.8499 1.4983,17.3999 1.9483,17.0999L5.6983,14.9999C5.9983,14.8499 6.4483,14.8499 6.7483,15.2999C6.8983,15.5999 6.8983,16.0499 6.4483,16.3499L2.5483,18.5999C2.5483,18.5999 2.3983,18.5999 2.2483,18.5999Z"
      android:strokeAlpha="0.25" />
  <path
      android:fillAlpha="0.25"
      android:fillColor="#000000"
      android:pathData="M5.25,12.9H0.75C0.3,12.9 0,12.6 0,12.15C0,11.7 0.3,11.4 0.75,11.4H5.25C5.7,11.4 6,11.7 6,12.15C6,12.6 5.7,12.9 5.25,12.9Z"
      android:strokeAlpha="0.25" />
</vector>