如何为从左到右移动的全屏条纹设置动画

Question

我想创建一个动画，但我不知道如何开始。 这是这张图片。

我想要红色和条纹从左到右动画。(翻译)动画对我来说并不陌生。在屏幕上移动一个对象很容易，因为我们在它后面有一个背景。在我的情况下，它应该是移动的背景。

如果我使用图像，那么将无法填充图像在向右移动时留下的空白空间。一个想法是以编程方式最初用条纹填充屏幕，开始从左到右移动它们，当人们开始离开屏幕时，然后在左侧画一条新线，但考虑到条纹不是 1px 宽我不知道如何做这个。

另一种方法是使用比屏幕宽 2 条条纹的图像。2 条条纹在左侧不可见。一旦图像向右移动（动画结束），我们重新开始动画。我想知道这是否会导致任何中断，或者对用户来说它看起来是否流畅。

有任何想法吗？我应该为此使用 andengine 或类似的东西吗？

Answer 1

您可以使用仅在画布上绘制矩形的自定义可绘制对象。以下是一个基本示例，只需使用它即可

BackgroundDrawable bg = new BackgroundDrawable();
anyView.setBackground(bg);
bg.start();

这是基本的工作实现：

public class BackgroundDrawable extends Drawable implements Runnable, Animatable {
    private static final long FRAME_DELAY = 1000 / 60;
    private boolean mRunning = false;
    private long mStartTime;
    private int mDuration = 1000;

    private Paint mPaint;
    private int mStripes = 7;


    private void init() {
        if (mPaint == null) {
            mPaint = new Paint();
            mPaint.setColor(Color.WHITE);
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Paint.Style.FILL);
        }
    }

    @Override
    public void draw(Canvas canvas) {
        Rect bounds = getBounds();
        if (isRunning()) {
            // animation in progress
            final int save = canvas.save();

            long timeDiff = SystemClock.uptimeMillis() - mStartTime;
            canvas.clipRect(bounds);

            float progress = ((float) timeDiff) / ((float) mDuration); // 0..1

            float width = bounds.width() / (mStripes * 2);

            for (int i = 0; i < mStripes * 2 + 2; i++) {
                mPaint.setColor(i % 2 == 0 ? Color.RED : Color.WHITE);
                canvas.drawRect(bounds.left + width * (i - 1) + progress * 2 * width, bounds.top, bounds.left + width * i + progress * 2* width, bounds.bottom, mPaint);
            }

            canvas.restoreToCount(save);
        } else {
            // todo draw normal
        }
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        init();
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return 0;
    }

    @Override
    public void start() {
        if (mRunning) stop();
        mRunning = true;
        mStartTime = SystemClock.uptimeMillis();
        invalidateSelf();
        scheduleSelf(this, SystemClock.uptimeMillis() + FRAME_DELAY);
    }

    @Override
    public void stop() {
        unscheduleSelf(this);
        mRunning = false;
    }

    @Override
    public boolean isRunning() {
        return mRunning;
    }

    @Override
    public void run() {
        invalidateSelf();
        long uptimeMillis = SystemClock.uptimeMillis();
        if (uptimeMillis + FRAME_DELAY < mStartTime + mDuration) {
            scheduleSelf(this, uptimeMillis + FRAME_DELAY);
        } else {
            mRunning = false;
            start();
        }
    }
}

另外，我在这里写了关于可绘制对象和基本动画处理的详细说明：自定义可绘制对象和动画。