Android ViewPager ZoomOut 动画

Question

我有一个如下所示的 ViewPager：

我需要侧边的预览在滑动时缩小并且只保持中心视图的大小，如下所示：

我已经用 ViewPager.PageTransformer() 尝试了一些示例，但这些示例总是带有淡入淡出动画（我不需要）并且不显示预览（我需要）。

Answer 1

    final int paddingPx = 300;
    final float MIN_SCALE = 0.8f;
    final float MAX_SCALE = 1f;

    viewPager.setClipToPadding(false);
    viewPager.setPadding(paddingPx, 0, paddingPx, 0);
    viewPager.setPageTransformer(false, transformer);

这使得页面小于 viewpager 宽度：

这是我的变形金刚：

    PageTransformer transformer = new PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            float pagerWidthPx = ((ViewPager) page.getParent()).getWidth();
            float pageWidthPx = pagerWidthPx - 2 * paddingPx;

            float maxVisiblePages = pagerWidthPx / pageWidthPx;
            float center = maxVisiblePages / 2f;

            float scale;
            if (position + 0.5f < center - 0.5f || position > center) {
                scale = MIN_SCALE;
            } else {
                float coef;
                if (position + 0.5f < center) {
                    coef = (position + 1 - center) / 0.5f;
                } else {
                    coef = (center - position) / 0.5f;
                }
                scale = coef * (MAX_SCALE - MIN_SCALE) + MIN_SCALE;
            }
            page.setScaleX(scale);
            page.setScaleY(scale);
        }
    };

难点在于 transformPage 方法的 position 参数。当页面填满 viewpager 宽度时，此参数从 0 变为 1。但是当页面较小时，此参数很棘手。

position 是视图左侧的值。页面宽度等于1。当pages left side在viewpager的左侧时，position等于0。所以 position 可以大于 1，取决于页面宽度。

首先你需要找到viewpagers中心（相对于position参数）。如果页面从中心向左或向右移动，则缩小页面。在我的实现中，我缩小了距中心半页距离的视图。

这是结果：

页面宽度可以通过padding控制。

可以通过 viewPager.setPageMargin(value) 方法在页面之间添加额外的边距。

Android ViewPager ZoomOut 动画

Android ViewPager ZoomOut animation

android

android-animation

android-viewpager