Android ViewPager ZoomOut动画

时间:2019-05-20 19:02:39

标签: android android-viewpager android-animation

我有一个如下所示的ViewPager:

enter image description here

当您滑动并仅保持中心视图的大小时,我需要ZoomOut侧面的预览,如下所示:

enter image description here

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

1 个答案:

答案 0 :(得分:0)

    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宽度:

enter image description here

这是我的变形金刚:

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

困难的是position方法的transformPage参数。当页面为填充viewpagers宽度时,此参数从0更改为1。但是,当页面较小时,此参数比较棘手。

position是视图左侧的值。当页面的左侧位于viewpager的左侧时,页面宽度等于1。position等于0。因此position可以大于1,具体取决于页面宽度。 enter image description here

首先,您需要找到Viewpagers中心(相对于position参数)。如果页面从中心向左移动或向右移动,则按比例缩小页面。在我的实现中,我将视图缩小到距中心一半的页面距离。

这是结果:

enter image description here enter image description here

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

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

相关问题