java - 页面转换器的 ViewPager 页面缩放问题

标签 java android user-interface animation

您好,我正在开发一个应用程序,我正在使用 viewpager 通过 viewpager 转换器制作自定义动画,但问题是 存在缩放问题viewpager 页面转换器。我尝试了所有可能的 x 和 y 缩放比例,但问题仍然相同。如果有人可以帮助我,我很难理解这个问题。

下面是我想要达到的效果

更新:

看起来我还没有找到解决方案,但我仍在努力寻找解决方案,因为我几乎已经完成了,只剩下卡片组外观的设计了。

My expected output

我的页面转换代码

public class CardStackTransformer implements ViewPager.PageTransformer {
    private static final float DEFAULT_CURRENT_PAGE_SCALE = 1.0f;
    private static final float OTHER_PAGE_SCALE = 0.9f;
    private int dimen;

    @Override
    public void transformPage(@NonNull View view, float position) {

        //view.setScaleX(DEFAULT_CURRENT_PAGE_SCALE);
        // view.setScaleY(DEFAULT_CURRENT_PAGE_SCALE);
        /*dimen = view.getWidth();
        int pageWidth = view.getWidth();
        final float translateValue = position * -pageWidth;
        if (translateValue < -pageWidth) {
            view.setTranslationX(translateValue);
        }

        if (position < -1) {
            view.setAlpha(0);

        } else if (position <= 0) {
            view.setAlpha(1.0f);
            view.setTranslationX(view.getWidth() * -position);
            view.setTranslationY(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) {
            view.setTranslationX(dimen * position);
            view.setAlpha(-0.5f * position + 1.0f);
            //  view.setTranslationX((-dimen / 1.1F) * position);
            view.setTranslationX(view.getWidth() * -position);
            view.setTranslationY((dimen / 200.09f) * position);

            float scaleFactor = OTHER_PAGE_SCALE
                    + (1 - OTHER_PAGE_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            //view.setScaleX(OTHER_PAGE_SCALE);
            //view.setScaleY(OTHER_PAGE_SCALE);
        } else {
            view.setAlpha(0);
        }*/
        view.setScaleX(DEFAULT_CURRENT_PAGE_SCALE);
        view.setScaleY(DEFAULT_CURRENT_PAGE_SCALE);
        dimen = view.getWidth();

        if(position < -1) {
            view.setAlpha(0);

        } else if(position <= 0) {
            view.setAlpha(1.0f);
            view.setTranslationX(0);
            view.setTranslationY(0);
            view.setScaleX(DEFAULT_CURRENT_PAGE_SCALE);
            view.setScaleY(OTHER_PAGE_SCALE);
        } else if(position <= 1) {
            final float scaleFactor = OTHER_PAGE_SCALE + (1 - OTHER_PAGE_SCALE) * (1 - Math.abs(position));

           // view.setTranslationX(dimen * -position);
            view.setAlpha(-0.5f * position + 1.0f);
            view.setTranslationX((-dimen / 1.1F) * position);
            view.setTranslationY((dimen / 209.9f)*position);
            view.setTranslationX(view.getWidth() * -position);
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            view.setAlpha(0);
        }
    }
}

最佳答案

检查下面的代码

import android.view.View
import androidx.core.view.ViewCompat
import androidx.viewpager.widget.ViewPager
import kotlin.math.abs

class SliderTransformer() : ViewPager.PageTransformer {

    companion object {
        private const val TAG = "SliderTransformer"

        private const val DEFAULT_TRANSLATION_X = .50f
        private const val DEFAULT_TRANSLATION_FACTOR = 1.2f

        private const val SCALE_FACTOR = .14f
        private const val DEFAULT_SCALE = 1f

        private const val ALPHA_FACTOR = .3f
        private const val DEFAULT_ALPHA = 1f

    }

    override fun transformPage(page: View, position: Float) {

        page.apply {

            ViewCompat.setElevation(page, -abs(position))

            val scaleFactor = -SCALE_FACTOR * position + DEFAULT_SCALE
            val alphaFactor = -ALPHA_FACTOR * position + DEFAULT_ALPHA

            when {
                position <= 0f -> {
                    translationX = DEFAULT_TRANSLATION_X
                    scaleX = DEFAULT_SCALE
                    scaleY = DEFAULT_SCALE
                    alpha = DEFAULT_ALPHA + position
                }
                position >0 -> {
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                    translationX = -(width / DEFAULT_TRANSLATION_FACTOR) * position
                    alpha = alphaFactor
                }
                else -> {
                    translationX = DEFAULT_TRANSLATION_X
                    scaleX = DEFAULT_SCALE
                    scaleY = DEFAULT_SCALE
                    alpha = DEFAULT_ALPHA
                }
            }
        }
    }
}

关于java - 页面转换器的 ViewPager 页面缩放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50390243/

相关文章:

java - map 迭代出现问题

c++ - 为什么 QPainter 可能会拒绝在 paintEvent 内部工作?

swift - 如何在我的 Playground 上实现不同的 UI 屏幕

Android TextView 启用 LinkiFy 和 Href 标签

android - 所有 gms/firebase 库必须使用完全相同的版本

java - 在 Android 中定期执行 AsyncTasks 的最佳方式

user-interface - 使用 go 的 exp/shiny 时如何绘制底层小部件?

java - JVM 上具有多个线程的进程是否会比具有一个线程的进程拥有更多的 cpu 时间?

java - while循环/switch语句

java - 无法匹配 Java 中的正则表达式