parallax（视差）效果源码分析

最新推荐文章于 2025-08-25 13:41:39 发布

原创

最新推荐文章于 2025-08-25 13:41:39 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#parallax

本文详细分析了ParallaxScrollView的源码，讲解了视差概念及其在滚动中的应用。作者探讨了最初的实现思路，即通过两层视图实现视差效果，但后来发现开源项目的实现更为简洁。文章重点解析了onScrollChanged()方法，展示了如何通过设置视图的垂直偏移来实现视差滚动，并介绍了API的相关解释。最后，作者总结了实现视差滚动的关键在于动态调整视差视图的位置，而非复杂的速度传递。

转载请标明出处:

http://blog.youkuaiyun.com/coder_nice/article/details/45311715

视差概念

可能很多人不知道parallax的概念，那就先上一张动态图来看看效果。

视差效果图

有了这张图，大家就应该明白了parallax视差的概念，google paly有这个效果。
相信很多人在看到效果图之后，就想立刻得到链接，好人做到底。
github地址

最初的想法

最初先接到设计师要求的这个效果的时候，我自己先仔细的想了一下，我原本打算用一个FramLayout中包含两层view，下层就是随着滑动出现视差效果的parallax view（其实是滑动速度比较慢），上层就是普通的view层，随着手势的滑动而滑动（跟手势滑动速度一致），然后把上层的滑动速度传递给下层的parallax view，然后把速度值改小一些就好了。可能这也是大多人的想法。
在接触到github上这个开源项目之后，我看了看代码发现不是这样的，远远比这要简单。

源码分析

这里只做最常用的ParallaxScrollView 具有视差效果的 ScrollView的解析，先来看代码。
ParallaxScrollView 源码

public class ParallaxScrollView extends ScrollView {
   
   

    private static final int DEFAULT_PARALLAX_VIEWS = 1;
    private static final float DEFAULT_INNER_PARALLAX_FACTOR = 1.9F;
    private static final float DEFAULT_PARALLAX_FACTOR = 1.9F;
    private static final float DEFAULT_ALPHA_FACTOR = -1F;
    private int numOfParallaxViews = DEFAULT_PARALLAX_VIEWS;
    private float innerParallaxFactor = DEFAULT_PARALLAX_FACTOR;
    private float parallaxFactor = DEFAULT_PARALLAX_FACTOR;
    private float alphaFactor = DEFAULT_ALPHA_FACTOR;
    private ArrayList<ParallaxedView> parallaxedViews = new ArrayList<ParallaxedView>();

    public ParallaxScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    public ParallaxScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public ParallaxScrollView(Context context) {
        <

最低0.47元/天解锁文章