android – 如何动画从左到右移动的全屏条纹

2023年5月19日 258次阅读

我想创建一个动画,但我不知道如何开始它.

Here是这张图片.

我希望红色和条纹从左到右动画.
(翻译)动画对我来说并不陌生.在屏幕上移动对象很容易,因为我们背后有一个背景.就我而言,它应该是移动的背景.

如果我使用图像,那么在向右移动时,将无法填充图像留下的空白区域.一个想法是首先用编程方式填充屏幕,从左到右开始移动它们,当一个人开始离开屏幕然后在左边画一个新线但是考虑条纹不是1px宽我不知道怎么样做这个.

另一种方法是使用比屏幕宽2个条纹的图像. 2条纹在左侧看不见.将图像移动到右侧(动画结束)后,我们重新开始动画.我想知道这是否会导致任何中断,或者它对用户来说是否平滑.

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

最佳答案 您可以使用只绘制矩形到画布的自定义drawable.以下是一个基本的样本,就像使用它一样

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();
        }
    }
}

另外,我在这里写了关于drawables和基本动画处理的详细解释：Custom drawables and animations.

点赞