programacion - dibujar en android studio

Android dibujo temporizador de rectángulo con animación

Question

Estoy tratando de tener un rectángulo de trazo de dibujo de animación:

Cualquier kickstart para este problema será útil. Usando Views, Canvas todo.

Gracias

Answer 1

Creo que puedes lograr algo muy básico con AnimationDrawable y crear una animación cuadro por cuadro. Obviamente, cuanto más marco utilizas, más suave se vuelve.

<!-- Animation frames are wheel0.png -- wheel5.png files inside the
 res/drawable/ folder -->
 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    ...
 </animation-list>

Otra opción sería usar ClipDrawable para enmascarar su rectángulo y animar la máscara. Hay un tutorial para Customize Your Progress Bar que utiliza la misma lógica para su propósito. Eso espero.

Mire this sample . Es flash pero usa la misma técnica de recorte para lograr un efecto de caricias.

Si no me equivoco, Android Canvas tiene algunos métodos de clip para enmascarar sus gráficos: clipPath , clipRect y clipRegion . Pero no estoy seguro si puede ser animado o no. Échales un vistazo.

Answer 2

Ok, aquí hay algo para que comiences, no es la solución completa, pero desde aquí puedes completar tu tarea.

Lo que estoy haciendo es actualizar dinámicamente mi máscara de acuerdo con el progreso. Acabo de dibujar una línea, pero en su caso necesita dibujar cuatro líneas que formarán un rectángulo enmascarado de acuerdo con el progreso. Aquí está el código, avíseme si eso ayuda:

public class DrawView extends View implements Runnable {

Bitmap mProgressBitmap;
Bitmap mMaskProgressBitmap;
Bitmap mResultBitmap;

Canvas mTempCanvas;
Canvas mMaskCanvas;

Paint mPaint;

Paint mWhitePaint;

Handler mHandler = new Handler();

float mProgress = 0;

static final long FRAME_TIME = 50;

public DrawView(Context context, AttributeSet attrs) {
    super(context, attrs);

    InputStream resource = getResources().openRawResource(R.drawable.timer);
    mProgressBitmap = BitmapFactory.decodeStream(resource);

    mMaskProgressBitmap = Bitmap.createBitmap(mProgressBitmap.getWidth(), mProgressBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    mMaskCanvas = new Canvas(mMaskProgressBitmap);
    mMaskCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

    mResultBitmap = Bitmap.createBitmap(mProgressBitmap.getWidth(), mProgressBitmap.getHeight(), Bitmap.Config.ARGB_8888);

    mTempCanvas = new Canvas(mResultBitmap);

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    mPaint.setDither(true);

    mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mWhitePaint.setColor(Color.WHITE);
    mWhitePaint.setStrokeWidth(50);

    mHandler.postDelayed(this, FRAME_TIME);
}

@Override
public void onDraw(Canvas canvas) {

    mTempCanvas.drawBitmap(mMaskProgressBitmap, 0, 0, null);
    mTempCanvas.drawBitmap(mProgressBitmap, 0, 0, mPaint);

    canvas.drawBitmap(mResultBitmap, 0, 0, null);
}

@Override
public void run() {

    mProgress += 0.01f;

    mMaskCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
    mMaskCanvas.drawLine(0, 0, (float)mProgressBitmap.getWidth() * mProgress, 0, mWhitePaint);

    this.invalidate();

    mHandler.postDelayed(this, FRAME_TIME);
}

}