android - Android 绘制带动画的矩形定时器

Question

我正在尝试绘制一个动画描边矩形：

任何针对此问题的 kickstart 都会有所帮助。使用视图，画布任何东西。

谢谢

Answer 1

好的，这是让您入门的东西，它不是完整的解决方案，但您可以从这里完成您的任务。

我正在做的是根据进度动态更新我的面具。我只是画了一条线，但在您的情况下，您需要绘制四条线，根据进度制作一个蒙版矩形。这是代码让我知道是否有帮助：

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。它是闪光灯，但它使用相同的剪辑技术来实现抚摸效果。

如果我没记错的话，AndroidCanvas有一些clip方法可以屏蔽你的图形clipPath：clipRect和clipRegion. 但我不确定它是否可以动画。去看一下。