android - Jetpack Compose "shortest"旋转动画

Question

我试图在 jetpack compose 中做一个指南针。但是我在制作动画时遇到了问题。我有一个 @Composable 可以让用户手机旋转并以相反的方向旋转指南针图像。我像这样使用 animateFloatAsState:

val angle: Float by animateFloatAsState(
    targetValue = -rotation, \\ rotation is retrieved as argument
    animationSpec = tween(
        durationMillis = UPDATE_FREQUENCY, \\ rotation is retrieved with this frequency
        easing = LinearEasing
    )
)

Image(
    modifier = Modifier.rotate(angle),
    // rest of the code for image
)

一切看起来都很好，但是当 rotation 从 1 更改为 359 或以相反的方式时，就会出现问题。动画不会向左旋转 2 度，而是向右旋转 358 度，这看起来很糟糕。有什么方法可以使用最短的方式制作旋转动画？

Answer 1

我假设您已经(或可以获得)访问当前旋转值(即当前角度)的权限，将其存储起来。

那么，

val angle: Float by animateFloatAsState(
    targetValue = if(rotation > 360 - rotation) {-(360 - rotation)} else rotation
    animationSpec = tween(
        durationMillis = UPDATE_FREQUENCY, \\ rotation is retrieved with this frequency
        easing = LinearEasing
    )
)

Image(
    modifier = Modifier.rotateBy(currentAngle, angle), //Custom Modifier
    // rest of the code for image
)

rotateBy 是一个自定义修饰符，应该不难实现。使用内置的旋转修改器来构建它。逻辑将保持不变