Jetpack Compose中如何实现与RotateAnimation等效的旋转动画

你可以直接用Compose的状态动画API完全复现原View体系的旋转效果，不需要手动维护动画实例和起始角度，代码比原生View写法更简洁。

核心参数对应关系 #

• 原代码中Animation.RELATIVE_TO_SELF, 0.5f的中心枢轴配置：对应Compose中TransformOrigin.Center，即绕组件自身正中心旋转
• 原代码duration=500、repeatCount=0、fillAfter=true配置：对应Compose的tween动画规格，动画单次播放时长500ms，播放结束后自动停留在最终值，无回弹
• 原代码手动维护currentAngle作为动画起始值的逻辑：Compose的animateFloatAsState会自动记录当前动画值作为下一次动画的起始点，不需要手动维护上一次的角度值

完整实现代码 #

首先定义状态与动画逻辑，直接对接传感器回调或业务层传入的方位角、朝向偏移值即可：

// 两个数据源变量，直接对接传感器回调或业务数据更新即可
var azimuth by remember { mutableStateOf(0f) }
var qiblaDir by remember { mutableStateOf(0f) }

// 罗盘旋转动画：自动平滑过渡到目标角度 -azimuth
val compassRotation by animateFloatAsState(
    targetValue = -azimuth,
    animationSpec = tween(durationMillis = 500),
    label = "compass_rotate"
)

// 指针箭头旋转动画：如果需要和原代码完全一致toDegrees为-azimuth就直接填-azimuth，需要叠加朝向偏移就改为 -azimuth + qiblaDir
val needleRotation by animateFloatAsState(
    targetValue = -azimuth,
    animationSpec = tween(durationMillis = 500),
    label = "qibla_arrow_rotate"
)

在布局中给两个叠放的图片组件添加旋转效果即可：

// 罗盘底图
Image(
    painter = painterResource(id = R.drawable.img_compass),
    contentDescription = "罗盘",
    modifier = Modifier
        .graphicsLayer {
            transformOrigin = TransformOrigin.Center
            rotationZ = compassRotation
        }
)

// 朝向指针箭头
Image(
    painter = painterResource(id = R.drawable.img_qibla_arrow),
    contentDescription = "方向指针",
    modifier = Modifier
        .graphicsLayer {
            transformOrigin = TransformOrigin.Center
            rotationZ = needleRotation
        }
)

效果对齐说明 #

该实现和原View代码逻辑1:1对齐：

1. 两个组件均以自身中心点为旋转锚点，不会出现旋转偏移
2. 动画时长固定500ms，默认缓动效果和原ViewRotateAnimation默认的AccelerateDecelerateInterpolator效果一致，无感知差异
3. 动画仅播放一次，结束后永久保留最终角度，不会出现动画结束后回弹到初始状态的问题
4. 当azimuth或qiblaDir值更新时，动画会自动从当前角度平滑过渡到新的目标角度，不需要手动编写动画启动逻辑

内容的提问来源于stack exchange，提问作者Noureddine