Я хотел бы создать анимацию, но не знаю, с чего начать. Вот это изображение.

Я хочу, чтобы красный цвет и полосы оживлялись слева направо. (Перевести) Анимация для меня не новость. Перемещать объект по экрану легко, потому что за ним есть фон. В моем случае это должен быть фон.

Если я использую изображение, то не будет возможности заполнить пустое пространство, которое изображение оставляет при движении вправо. Одна из идей - сначала заполнить экран полосами программно, начать перемещать их слева направо, а когда вы начнете покидать экран, нарисуйте новую линию слева, но, учитывая, что полосы не имеют ширины 1 пиксель, я не знаю, как сделай это.

Другой способ - использовать изображение, которое на 2 полосы шире экрана. Две полосы слева не видны. Как только изображение переместится вправо (конец анимации), мы перезапускаем анимацию. Интересно, вызовет ли это какое-либо прерывание или это будет выглядеть гладко для пользователя.

Любые идеи? Следует ли мне использовать для этого andengine или что-то подобное?

5
erdomester 7 Янв 2016 в 00:24

2 ответа

Лучший ответ

Вы можете использовать настраиваемый объект для рисования, который просто рисует прямоугольники на холсте. Ниже приведен базовый образец, просто используйте его как

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

Кроме того, я написал подробное объяснение чертежей и базовой обработки анимации здесь: Пользовательские рисунки и анимация.

2
David Medenjak 28 Апр 2016 в 17:55

Вы можете выбрать пользовательский вид или пользовательский чертеж и нарисовать свои полосы на холсте с помощью метода onDraw ().

0
ligi 6 Янв 2016 в 21:36