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

本文介绍了一种简单直接的方法来实现一个视觉效果上的奔跑小车动画。通过不断移动背景图,使得小车看起来在不停地奔跑。代码使用了ValueAnimator来控制图片的平移,实现了连续的动画效果。

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

ic_my_banner.jpg

先上图,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();
        }
    }
}

效果图:

1.gif

完事了,是不是很简单暴力?

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值