我对喷气背包完全是新手.我正在做一个项目,其中一个形状是围绕特定半径的中心点旋转的.单击按钮后,图形需要开始在比以前更小的半径内旋转.我能够实现那个比特,但当形状切换时,它会暂时停止,以垂直线的方式切换到较小半径的路径,然后再次开始旋转,这给它带来了一种糟糕的外观.我如何才能使形状的这种切换/过渡变得顺畅?以下是我使用的代码:
@Composable
fun AnimateObject(){
val transition = rememberInfiniteTransition()
val animatedProgress = transition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = keyframes {
durationMillis = 3000
0.0f at 0 with LinearEasing
1.0f at 3000 with LinearEasing
},
repeatMode = RepeatMode.Restart
)
)
val outerCircleRadius = 450f
val innerCircleRadius = 250f
var outerCircleCenter = Offset(x = 0f, y = 0f)
var innerCircleCenter = Offset(x = 0f, y = 0f)
var playerXOffset = remember { mutableStateOf(0f) }
var playerYOffset = remember { mutableStateOf(0f) }
var isInOuterCircle = remember { mutableStateOf(true) }
val angle = animatedProgress.value * 360f
val radians = Math.toRadians(angle.toDouble())
Canvas(modifier = Modifier.size(200.dp), onDraw = {
outerCircleCenter = Offset(size.width / 2, size.height / 2)
innerCircleCenter = Offset(size.width / 2, size.height / 2)
CreateCirlcePath(radius = outerCircleRadius, center = outerCircleCenter, drawScope = this)
CreateCirlcePath(radius = innerCircleRadius, center = innerCircleCenter, drawScope = this)
if (isInOuterCircle.value == true) {
playerXOffset.value = outerCircleCenter.x + outerCircleRadius * cos(radians).toFloat()
playerYOffset.value = outerCircleCenter.y + outerCircleRadius * sin(radians).toFloat()
} else {
playerXOffset.value = innerCircleCenter.x + innerCircleRadius * Math.cos(radians).toFloat()
playerYOffset.value = innerCircleCenter.y + innerCircleRadius * Math.sin(radians).toFloat()
}
print("Offset values, ${playerXOffset.value} ")
// Draw the moving shape (circle in this case)
drawCircle(
color = Color.Blue,
center = Offset(playerXOffset.value, playerYOffset.value),
radius = 16.dp.toPx()
)
})
Row {
val buttonTitle = remember { mutableStateOf("Click Me") }
Button(
onClick = {
buttonTitle.value = "Clicked"
isInOuterCircle.value = !isInOuterCircle.value
},
modifier = Modifier.size(width = 150.dp, height = 50.dp)
) {
Text(text = buttonTitle.value)
}
}
}
我正经历着从一条环路到另一条环路的短暂过渡.以下是演示其外观的链接:
我希望这个过渡是平滑的,当从一个圆过渡到另一个圆时,图形继续其运动,在切换过程中,它以倾斜的方式(或像切线一样)落在另一个圆的路径上. 如有任何帮助,我们将不胜感激!谢谢