android - アニメーション付きの Android 描画長方形タイマー

Question

アニメーション描画ストロークの長方形を作ろうとしています:

この問題のキックスタートは役に立ちます。ビュー、キャンバスを使用して何でも。

ありがとう

Answer 1

これは完全な解決策ではありませんが、ここからタスクを完了することができます。

私がやっていることは、進行状況に応じてマスクを動的に更新することです。線を描いただけですが、あなたの場合は、進行状況に応じてマスクされた長方形を作成する 4 つの線を描く必要があります。これが役立つかどうかを知らせるコードは次のとおりです。

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

}

Answer 2

AnimationDrawableフレームごとのアニメーションを作成して、非常に基本的なことを達成できると思います。明らかに、使用するフレームが多いほど滑らかになります。

<!-- 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>

他のオプションはClipDrawable、長方形をマスクしてマスクをアニメーション化するために使用することです。Customize Your Progress Bar目的に合わせて同じロジックを使用するチュートリアルがあります。そうだといい。

を見てくださいthis sample。これはフラッシュですが、同じクリッピング テクニックを使用してストローク効果を実現しています。

私が間違っていなければ、Androidにはグラフィックをマスクする方法がCanvasいくつかあります: 、および. しかし、アニメ化できるかどうかはわかりません。それらをチェックしてください。clipclipPathclipRectclipRegion