利用ViewPage的PagerTransformer定制页面切换效果 7-14

hackernew

发布于 2021-3-2 09:56

1.4w浏览

1收藏

接上一篇文章，来说接下来的定制页面切换效果

7、淡入淡出效果（透明度） 利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区不多作解释，就是透明度属性动画。代码如下：

/**
 * 淡入淡出
 */
public class FadeInOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_ALPHA =0.5f;
    private float mMinAlpha = DEF_MIN_ALPHA;

    @Override
    public void transformPage(@NonNull View page, float position) {
        if (position < -1f) {//[-Infinity, -1)
            page.setAlpha(mMinAlpha);
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setAlpha(1f + (1f - mMinAlpha) * position);
            } else { //[0, 1]
                page.setAlpha(1f - (1f - mMinAlpha) * position);
            }
        } else {//(1, +Infinity]
            page.setAlpha(mMinAlpha);
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

8、水平翻转效果（左右翻转） 利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区即以水平中心线为旋转中心，绕 Y 轴旋转。代码如下所示，同样要注意镜头距离：

/**
 * 水平翻转效果
 */
public class FlipHorizontalTransformer implements ViewPager.PageTransformer {

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

        page.setCameraDistance(getCameraDistance());
        page.setTranslationX(-page.getWidth() * position);

        float rotation = 180f * position;
        page.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);
        page.setPivotX(page.getWidth() * 0.5f);
        page.setPivotY(page.getHeight() * 0.5f);
        page.setRotationY(rotation);

        if (position > -0.5f && position < 0.5f) {
            page.setVisibility(View.VISIBLE);
        } else {
            page.setVisibility(View.INVISIBLE);
        }
    }


    private float getCameraDistance() {
        DisplayMetrics displayMetrics = VpsApplication.getAppContext().getResources().getDisplayMetrics();
        float density = displayMetrics.density;
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;
        return 1.5f * Math.max(widthPixels, heightPixels) * density;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

9、竖直翻转效果（上下翻转） 利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区

即以竖直中心线为旋转中心，绕 X 轴旋转。代码如下所示，同样要注意镜头距离：

/**
 * 竖直翻转效果
 */
public class FlipVerticalTransformer implements ViewPager.PageTransformer {

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

        page.setCameraDistance(getCameraDistance());
        page.setTranslationX(-page.getWidth() * position);

        float rotation = 180f * position;
        page.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);

        page.setPivotX(page.getWidth() * 0.5f);
        page.setPivotY(page.getHeight() * 0.5f);
        page.setRotationX(rotation);

        if (position > -0.5f && position < 0.5f) {
            page.setVisibility(View.VISIBLE);
        } else {
            page.setVisibility(View.INVISIBLE);
        }
    }


    private float getCameraDistance() {
        DisplayMetrics displayMetrics = VpsApplication.getAppContext().getResources().getDisplayMetrics();
        float density = displayMetrics.density;
        int widthPixels = displayMetrics.widthPixels;
        int heightPixels = displayMetrics.heightPixels;
        return 1.5f * Math.max(widthPixels, heightPixels) * density;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

10、浮出效果

让所有右边页面都移动到正中位置，从右向左滑动切换页面时，左边从右向左滑出，右边页面放大淡入。

/**
 * 浮出效果
 */
public class RiseInTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.72f;

    private float mMinScale = DEF_MIN_SCALE;

    private static final float DEF_MIN_ALPHA = 0.5f;

    public RiseInTransformer() {
    }

    public RiseInTransformer(float minScale) {
        this.mMinScale = minScale;
    }

    public float getMinScale() {
        return mMinScale;
    }

    public void setMinScale(float minScale) {
        this.mMinScale = minScale;
    }

    @Override

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

        if (position < 0f) {
            page.setTranslationX(0f);
        } else if (position <= 1) {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(1f - (1f - mMinScale) * position);
            page.setScaleY(1f - (1f - mMinScale) * position);
            page.setAlpha(1f - (1f - DEF_MIN_ALPHA) * position);
        } else {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setAlpha(DEF_MIN_ALPHA);

        }

    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);
1.
2.

11、下潜效果

利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区

让所有左边页面都移动到正中位置，切换页面时，左边页面缩小淡出，右面页面从右向左滑入正中。

/**
 * 下潜效果
 */
public class DiveOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.72f;

    private float mMinScale = DEF_MIN_SCALE;

    private static final float DEF_MIN_ALPHA = 0.5f;

    public DiveOutTransformer() {
    }

    public DiveOutTransformer(float minScale) {
        this.mMinScale = minScale;
    }

    public float getMinScale() {
        return mMinScale;
    }

    public void setMinScale(float minScale) {
        this.mMinScale = minScale;
    }

    @Override

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

        if (position < -1f) {
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
            page.setAlpha(DEF_MIN_ALPHA);
            page.setTranslationX(-position * page.getWidth());
        } else if (position <= 0) {
            page.setTranslationX(-position * page.getWidth());
            page.setScaleX(1f + (1f - mMinScale) * position);
            page.setScaleY(1f + (1f - mMinScale) * position);
            page.setAlpha(1f + (1f - DEF_MIN_ALPHA) * position);
        } else {
            page.setTranslationX(0f);
        }

    }


}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

调用时不需要反转绘制顺序，即 reverseDrawingOrder = false，使右边页面先绘制，左边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = false;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);
1.
2.

12、堆叠效果

所有右边页面移动到正中位置，即 0 位置，滑动时，把最上面页面滑掉，代码如下所示：

/**
 * 堆叠效果
 */
public class StackTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setTranslationX(position < 0 ? 0f : -page.getWidth() * position);
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);
1.
2.

13、缩放效果 利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区

比较简单，与淡入淡出效果类似，不多作解释：

/**
 * 缩放效果
 */
public class ZoomInOutTransformer implements ViewPager.PageTransformer {

    private static final float DEF_MIN_SCALE = 0.9f;
    private float mMinScale = DEF_MIN_SCALE;


    @Override
    public void transformPage(@NonNull View page, float position) {
        if (position < -1f) {//[-Infinity, -1)
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
        } else if (position <= 1f) {//[-1, 1]
            if (position < 0f) {//[-1, 0)
                page.setScaleX(1f + (1f - mMinScale) * position);
                page.setScaleY(1f + (1f - mMinScale) * position);
            } else { //[0, 1]
                page.setScaleX(1f - (1f - mMinScale) * position);
                page.setScaleY(1f - (1f - mMinScale) * position);
            }
        } else {//(1, +Infinity]
            page.setScaleX(mMinScale);
            page.setScaleY(mMinScale);
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

14、并行覆盖效果

利用ViewPage的PagerTransformer定制页面切换效果 7-14-鸿蒙开发者社区

通过调用 View 的 setScrollX() 方法，使页面内容随着 position 移动。

public class ParallaxTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        int width = page.getWidth();
        if (position <= -1f) {
            page.setScrollX(0);
        } else if (position < 1f) {

            if (position < 0f) {
                page.setScrollX((int) (width * 0.75f * position));
            } else {
                page.setScrollX((int) (width * 0.75f * position));
            }

        } else {
            page.setScrollX(0);
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

调用时需要反转绘制顺序，即 reverseDrawingOrder = true，使左边页面先绘制，右边页面后绘制，否则效果无法实现。

int reverseDrawingOrder  = true;
mVpImgs.setPageTransformer(reverseDrawingOrder  , mPageTransformer);
1.
2.

项目地址

https://github.com/wangzhengyangNo1/ViewPagerSerialDemo

分类

其他

标签

PagerTransformer

ViewPage

已于2021-3-2 09:56:59修改

1条回复

按时间正序

按时间倒序

张荣超_九丘教育

👍👍👍

2021-3-7 11:37:07

51CTO

51CTO博客

51CTO学堂

利用ViewPage的PagerTransformer定制页面切换效果 7-14

订阅鸿蒙技术特刊，精选内容抢先看