如何在Android Jetpack Compose中实现三角形指示器的旋转与移动？

我想给计时器的蓝色三角形指示器添加动画效果，目前三角形已有移动效果，但表现不符合预期。

参考效果示意图：

当前实现效果截图：

当前代码：

val center = Offset(size.width / 2f, size.height / 2f)
val beta = (250f * value + 145f) * (PI / 180f).toFloat()
val r = size.width / 2f
val a = cos(beta) * r
val b = sin(beta) * r
drawPoints(
    listOf(Offset(center.x + a, center.y + b)),
    pointMode = PointMode.Points,
    color = Color.Gray,
    strokeWidth = (strokeWidth * 2.2f).toPx(),
    cap = StrokeCap.Round
)
drawPoints(
    listOf(Offset(center.x + a, center.y + b)),
    pointMode = PointMode.Points,
    color = Color.White,
    strokeWidth = (strokeWidth * 2f).toPx(),
    cap = StrokeCap.Round
)
drawPoints(
    listOf(Offset(center.x + a, center.y + b)),
    pointMode = PointMode.Points,
    color = PrimaryBlueColor,
    strokeWidth = (strokeWidth * 1f).toPx(),
    cap = StrokeCap.Round
)

drawImage(
    image = vector,
    topLeft = Offset(center.x + a, center.y + b)
)

核心问题：三角形定位锚点错误 #

你现在用drawImage的topLeft属性把矢量图的左上角放到了计算出的坐标点，但实际应该让三角形的**尖端（或你期望的锚点）**对准这个点，这是导致视觉效果不符合预期的主要原因。

修正方案 #

1. 调整定位偏移
   获取矢量图的尺寸，根据锚点位置计算偏移量，让三角形的目标位置对准计算出的坐标：

   // 获取矢量图的宽高
   val vectorWidth = vector.width.toFloat()
   val vectorHeight = vector.height.toFloat()
   
   // 假设三角形的尖端在矢量图的底部中心，计算偏移量让尖端对准目标点
   val targetX = center.x + a
   val targetY = center.y + b
   val topLeftX = targetX - vectorWidth / 2f // 水平居中
   val topLeftY = targetY - vectorHeight // 垂直方向让底部尖端对准目标点
   
   drawImage(
       image = vector,
       topLeft = Offset(topLeftX, topLeftY)
   )
   

   如果你的矢量图锚点不是底部中心，需要根据实际图形调整偏移逻辑，比如尖端在中心就减去一半宽高

2. 可选：让三角形角度适配圆弧方向
   如果需要三角形始终沿着圆弧切线方向指向，可添加旋转变换：

   // 计算旋转角度，基于极角beta调整，适配三角形初始方向
   val rotationAngle = (beta * 180f / PI.toFloat()) + 90f
   
   drawImage(
       image = vector,
       topLeft = Offset(topLeftX, topLeftY),
       transform = Matrix().apply {
           // 以三角形中心为旋转点
           postRotate(rotationAngle, topLeftX + vectorWidth/2f, topLeftY + vectorHeight/2f)
       }
   )
   

3. 优化动画平滑度
   确保value是通过Compose动画API生成的平滑变化值，比如用animateFloatAsState：

   // 替换你的value变量为动画值
   val animatedValue by animateFloatAsState(
       targetValue = yourTargetProgress, // 0到1之间的进度值
       animationSpec = tween(durationMillis = 1000, easing = LinearEasing)
   )
   
   val beta = (250f * animatedValue + 145f) * (PI / 180f).toFloat()
   

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