简单粗暴的实现背景图无限循环滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28268507/article/details/65643890

先上图，UI说了，这里要做动画，让小车感觉在奔跑的动画。

UI的建议是背景图不停的移动，视觉上就是小车不停的在奔跑。

那么，怎么实现呢？很简单，可能不是最佳的实现方式，但是很暴力。

码代码：

public class AutoPlayView extends View {


    Drawable mDrawableLeft, mDrawableRight;
    int drawableWidth, drawableHeight;
    ValueAnimator valueAnimator;

    public AutoPlayView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mDrawableLeft = getResources().getDrawable(R.mipmap.ic_my_banner);
        drawableWidth = mDrawableLeft.getMinimumWidth();
        drawableHeight = mDrawableLeft.getMinimumHeight();
        mDrawableLeft.setBounds(0, 0, drawableWidth, drawableHeight);

        mDrawableRight = getResources().getDrawable(R.mipmap.ic_my_banner);
        mDrawableRight.setBounds(drawableWidth, 0, drawableWidth * 2, drawableHeight);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wdMode = MeasureSpec.getMode(widthMeasureSpec);
        int hdMode = MeasureSpec.getMode(heightMeasureSpec);
        //测量布局大小，默认为屏幕的宽，图片的高
        if (wdMode == MeasureSpec.EXACTLY && hdMode == MeasureSpec.EXACTLY) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        } else {
            int wd = MeasureSpec.makeMeasureSpec(DensityUtil.getScreenWidth(getContext()), MeasureSpec.EXACTLY);
            int hd = MeasureSpec.makeMeasureSpec(drawableHeight, MeasureSpec.EXACTLY);
            setMeasuredDimension(wd, hd);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //思路：左边一张图，右边隐藏一张图，不停的scrollto
        mDrawableLeft.draw(canvas);
        mDrawableRight.draw(canvas);
    }

    public void startPlay() {
        //一张图片的宽的移动距离，即可视觉上达到不停的在滚动
        valueAnimator = ValueAnimator.ofInt(0, drawableWidth);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setRepeatCount(-1);
        valueAnimator.setDuration(2000);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                scrollTo(value, 0);
            }
        });
        valueAnimator.start();
    }

    public void stopPlay() {
        if (valueAnimator != null && valueAnimator.isRunning() && valueAnimator.isStarted()) {
            valueAnimator.cancel();
        }
    }
}

效果图:

完事了，是不是很简单暴力？

有问题，欢迎评论指正，thx。