android - 在滑动 ViewPager 中查看翻译

Question

我正在阅读一个关于自定义 ViewPager 的滑动页面动画的示例，该动画需要将页面 (View) 翻译到一定数量。该示例来自 docs .具体来说，它是关于一个名为 ZoomOutPageTransformer 的实现，它可以通过 setPageTransformer() 在 ViewPager 上设置以自定义页面的滑动方式(结合在其中缩放动画)。

最终结果应该是这样的:

现在，他们描述了他们将如何做:

In your implementation of transformPage(), you can then create custom slide animations by determining which pages need to be transformed based on the position of the page on the screen, which is obtained from the position parameter of the transformPage() method.

The position parameter indicates where a given page is located relative to the center of the screen. It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0. When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. Based on the position of the pages on the screen, you can create custom slide animations by setting page properties with methods such as setAlpha(), setTranslationX(), or setScaleY().

这是他们提供的 PageTransformer 的实现:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

问题:

我无法理解这个陈述，

view.setTranslationX(horzMargin - vertMargin / 2);

我的理解是，position 参数的值为 1.0 相当于覆盖屏幕宽度，即 w。因此，如果页面中心移动了 x 个单位的 position，则以像素/dp 为单位的转换将为 w*x。但是他们在计算翻译金额时使用了一些 margin 计算。

谁能解释一下他们是如何进行这个计算的，我的计算有什么问题吗？

Answer 1

您在这里遗漏了一件事，PageTransformer 应用于AFTER它们已定位的 View 。

因此，无论有没有 PageTransformer 附加到 PageView - 当您在页面之间滚动时 - 您只需使用 SNAP 功能进行滚动(就像在 LiseView 中一样)。

PageTransformer 仅在其上添加效果。

所以目的，

float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
    view.setTranslationX(horzMargin - vertMargin / 2);
} else {
    view.setTranslationX(-horzMargin + vertMargin / 2);
}

不是移动页面 - 而是补偿页面缩小。

没有它，页面将产生一些丑陋的副作用。尝试一下，删除线条 :) - View 将向右/向左移动，但定位将关闭。

所以，翻译 X 不会移动页面，但是，在这种情况下，只是管理页面间距以改善动画感觉 - 以上是它的数学。它所做的是根据屏幕高度/宽度减少页面之间的空间。首先它取消空格 (horzMargin) 然后它增加一点间距 (- vertMargin/2)

这就是为什么您的计算不好 (w*x) - 您正在尝试移动页面 - 但它已经在移动了。