页面转换器的 ViewPager 页面缩放问题答案

【问题标题】：ViewPager page scaling issue with page transformer页面转换器的 ViewPager 页面缩放问题
【发布时间】：2018-10-27 15:37:27
【问题描述】：

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

下面是我想要实现的图像

更新：

看起来我还没有找到解决方案，但仍在尝试弄清楚，因为我快要完成卡片堆外观的设计了。

我的页面转换代码

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);
        }
    }
}

【问题讨论】：

有什么问题？
问题是我没有得到如图所示的输出，我已经尝试了好几天了
简单检查是硬编码所有setScaleY的固定因素，如0.6。但我建议先在transformPage() 的末尾记录TranslationX, TranslationY,ScaleX,ScaleY 的值。然后将 Log 添加到每个 if-else 分支中，以检查是否在错误的条件下分配这些。
我尝试将 ScaleY 设置为较低的值，我在堆栈中得到一张卡，但问题是当我滚动后卡弹出而不是平滑滚动时，这是它没有平滑滚动的点
请@SakiM 你能帮我吗，因为我已经坚持了好几个星期了，这对我来说真的很重要。请我请求你。

标签： java android user-interface animation

【解决方案1】：

检查下面的代码

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
                }
            }
        }
    }
}

【讨论】：