CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-mvvm
Noureddine
Noureddine

Reputation: 3

RotateAnimation in jetpack compose

I have this RotateAnimation from a project on GitHub and I want to apply the same rotation to my Image (Compass with needle arrow inside)

Here are the parameters of RotateAnimation:

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

Here is my code:

        angleCompass.value = -angle
        val an = RotateAnimation(
            -currentAngle, -angle,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f
        )
        currentAngle = azimuth
        an.duration = 500
        an.repeatCount = 0
        an.fillAfter = true
        binding.imgCompass.startAnimation(an)


        val anim = RotateAnimation(
            -currentAngle + qiblaDir, -azimuth,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f
        )
        angleNeedle.value = -azimuth
        currentAngle = azimuth
        anim.duration = 500
        anim.repeatCount = 0
        anim.fillAfter = true
        binding.imgQiblaArrow.startAnimation(anim)

How can I apply the same animation in compose?

Upvotes: 0

Views: 562

Answers (1)

commandiron
commandiron

Reputation: 1473

Simple example, but you can achieve like this;

@Composable
fun AnimatableSurface() {
    val currentAngle = 0f
    val angle = 90f
    val rotateAnim = remember { Animatable(currentAngle) }
    LaunchedEffect(key1 = true){
        rotateAnim.animateTo(angle, tween(2000))
    }
    Surface(
        modifier = Modifier.size(100.dp).rotate(rotateAnim.value),
        color = Color.Red
    ) {}
}

Upvotes: 2

Related Questions