如何创建这种类型的屏幕和动画

Question

我想在 Compose 中创建一个 UI，就像 InShorts、新闻反馈一样，我们可以在其中向上、向下、向左、向右滚动全屏。我只能获得向上、向下、向左、向右的手势。

正在寻找类似的东西

https://drive.google.com/file/d/1xX61RwAj43z1grwsqo25402BbI9aDd_T/view?usp=sharing 不知怎的，我设法得到了这个手势，但我不知道如何才能像 InShorts 那样做同样的事情。如果有人有任何想法帮忙。

提前致谢。

.pointerInput(Unit) {
                    detectSwipe(
                        onSwipeDown = {
                            if (indexCounter.value > 0) {
                                coroutineScope.launch {
                                    offsetY.animateTo(
                                        targetValue = 300f,
                                        animationSpec = tween(durationMillis = 300)
                                    )
                                    offsetY.snapTo(0f) 
                                    indexCounter.value--
                                }
                            }
                        },
                        onSwipeUp = {
                            if (indexCounter.value < data.size - 1) {
                                coroutineScope.launch {
                                    offsetY.animateTo(
                                        targetValue = -300f,
                                        animationSpec = tween(durationMillis = 300)
                                    )
                                    offsetY.snapTo(0f)
                                    indexCounter.value++
                                }
                            }
                        },
                        onSwipeLeft = {},
                        onSwipeRight = {}
                    )
                }

Answer 1

对于这种类型的动画，您需要创建一个 XML 文件，定义要在 res 目录下的新文件夹 anim 中执行的动画类型 (res > anim > slip_up.xml) 以及所需的属性。如果 res 目录中不存在 anim 文件夹，请创建一个新文件夹。

要在我们的 Android 应用程序中使用向上滑动或向下滑动动画，您需要使用如下所示的标签定义一个新的 XML 文件。

对于向上滑动动画，您需要设置 android:fromYScale="1.0" 和 android:toYScale="0.0" 如下所示。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

对于下滑动画，您需要设置 android:fromYScale="0.0" 和 android:toYScale="1.0" 如下所示。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

创建完所需的动画 XML 文件后，您需要使用不同的属性加载这些动画文件。 Android 加载并启动动画 在android中，您可以使用AnimationUtils组件方法（例如loadAnimation（））来执行动画。以下是使用 loadAnimation() 和 startAnimation() 方法加载和启动动画的代码片段。

ImageView img = (ImageView)findViewById(R.id.imgvw);
Animation aniSlide = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
img.startAnimation(aniSlide);

如果您观察上面的代码片段，您将使用 loadAnimation() 方法向图像添加动画。 loadAnimation() 方法中的第二个参数是我们的动画 xml 文件的名称。

输出动画