android viewpager滑动视差动画（parallax）

最新推荐文章于 2021-05-31 06:03:46 发布

原创最新推荐文章于 2021-05-31 06:03:46 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #parallax #视差动画

android 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析如何使用ViewPager.setPageTransformer方法在滑动控件中实现Parallax效果，包括核心代码分析和日志解读，以及Parallax效果在不同位置（-1到1）的表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

就是当滑动时，指定一个你想让他不随整体滑动或步调一致的滑动控件，那么就可以通过viewPager.setPageTransformer(false, pt)的这个方法来设置，其中pt是继承ViewPager.PageTransformer的类对象,核心代码如下：MainActivity

        ParallaxPagerTransformer pt = new ParallaxPagerTransformer((R.id.image));
        //pt.setBorder(20);
        //pt.setSpeed(0.2f);
        mPager.setPageTransformer(false, pt);

ParallaxPagerTransformer

public class ParallaxPagerTransformer implements ViewPager.PageTransformer {

    private int id;
    private int border = 0;
    private float speed = 0.2f;

    public ParallaxPagerTransformer(int id) {
        this.id = id;
    }

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

        View parallaxView = view.findViewById(id);
Log.i("ParallaxPagerTransformer", "transformPage    "+position);
        if (parallaxView != null) {
            if (position > -1 && position < 1) {
            	Log.i("ParallaxPagerTransformer", "position    "+position);
                float width = parallaxView.getWidth();
                parallaxView.setTranslationX(-(position * width * speed));
                float sc = ((float)view.getWidth() - border)/ view.getWidth();
                if (position == 0) {
                    view.setScaleX(1);
                    view.setScaleY(1);
                } else {
                    view.setScaleX(sc);
                    view.setScaleY(sc);
                }
            }
        }
    }

    public void setBorder(int px) {
        border = px;
    }

    public void setSpeed(float speed) {
        this.speed = speed;
    }


}

这段代码我打了日志，分析了下：viewpager分为左中右三块（-1 0 1）；初始的时候，左边没有pager，当向左滑的时候，此时的pager的position取值范围【-1,0】，右边来的pager的position取值范围【0,1】，那么此时想让里面的imageview移动的慢点，就要设置parallaxView.setTranslationX(-(position * width * speed));

git：https://github.com/linghp/my_parallax