Jetpack Compose 中连续运动的动画答案

【问题标题】：Animation for Continuous Movement in Jetpack ComposeJetpack Compose 中连续运动的动画
【发布时间】：2021-11-10 03:08:42
【问题描述】：

我试图让一个框或图像对象能够使用从控制台/命令行或外部应用程序接收的 X 和 Y 坐标在屏幕上平移。有没有办法调整 Modifier PointerInput() 以接受连续的 X 和 Y 输入而不是检测拖动手势？我正在使用 Jetpack Compose API。

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        val animationState = remember{ mutableStateOf(false)}

        var offsetX by remember { mutableStateOf(0.dp) }
        var offsetY by remember { mutableStateOf(0.dp) }
        val imageSize = 200.dp



// Receive X,Y inputs from some device or continously read from command line inputs
        do{
            offsetX = 0.dp
            offsetY = 5000.dp
        } while(animationState.value)


        BoxWithConstraints(
            modifier = Modifier
                .fillMaxSize()
                .background(color = Color.White)
        ) {
            someImage(
                flashyMovement = animationState.value,
                maxWidth = maxWidth,
                maxHeight = maxHeight,
                offsetX = offsetX,
                offsetY = offsetY
            )

        }
    }

@Composable
fun someImage(
maxWidth: Dp,
maxHeight: Dp,
offsetX: Dp,
offsetY: Dp) {

val resource: Painter
val modifier: Modifier
val imageSize = 200.dp

    val xPositionState = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 20000,
                easing = LinearEasing
            )
        )
    )

    modifier = Modifier.offset(
        x = offsetX,
        y = offsetY
    )

}
Image(
    modifier = modifier.width(imageSize).height(imageSize),
    painter = resource,
    contentDescription = "some Image",
)}


            Box() {
            var offsetX by remember { mutableStateOf(0f) }
            var offsetY by remember { mutableStateOf(0f) }

            Box(
                Modifier
                    .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                    .background(Color.Blue)
                    .size(150.dp)
                    //.border(BorderStroke(2.dp, SolidColor(Color.Red)))
                    .pointerInput(Unit) {
                        detectDragGestures { change, dragAmount ->
                            change.consumeAllChanges()
                            //offsetX += dragAmount.x
                            offsetX = 150.dp.toFloat() 
                            offsetY += dragAmount.y
                        }
                    }
            )

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

var OffsetX = remember { Animatable(0f) }
var OffsetY = //same as abov

Modifier.offset { IntOffset(OffsetX.value, OffsetY.value) }.pointerInput(Unit) 内部

coroutineScope.launch{
while(true)
pointerID = awaitPointerEvent{ awaitFirstDown().id }
drag(pointerID){change ->
offsetX.snapTo(offsetX.value + change.positionChange().x)
//Similarly for Y
}
}
}
}```

【讨论】：

没有叫snapTo和drag的函数
这个 awaitPointerEvent() 方法的问题还在于，它需要在屏幕的某个随机部分上点击一次，清除任何其他 UI 元素，才能激活框的任何动画。我想我可能需要以某种方式在后台服务上运行它。