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

Posted 2023-02-26

【中文标题】Android 绘制带动画的矩形定时器

【英文标题】：Android drawing rectangle timer with animation

【发布时间】：2013-05-07 07:22:25

【问题描述】：

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

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

谢谢

【问题讨论】：

为形状创建圆角。仅当形状为矩形时适用。 developer.android.com/guide/topics/resources/…

感谢您的帮助，我已经用几种方法绘制了圆角形状。主要问题是用动画填充笔画的形状绘制像“蛇”......

嗨 Sam，指向 youtube“this”的链接已损坏...

@TheButcher，here 你去吧。

@TheButcher，我删除了源代码，因为我看到你从@Oren 那里得到了你的答案，我已经在那里回答了你。我采取了第一种方法。我用 Adob​​e AE 创建了一个笔画动画，然后将其导出为 PNG 序列。创建了一个animation-list XML 并将其绑定到View。就是这样。

【参考方案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);

【讨论】：

太棒了！谢谢奥伦！

如何使用这个视图？

【参考方案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 有几个 clip 方法可以屏蔽您的图形：clipPath、clipRect 和 clipRegion。但我不确定它是否可以动画。去看一下。

【讨论】：

嗨，Sam，我采纳了您的所有建议，但每个建议都有问题。 1）第一个有不好的平滑和不可定制的选项。 2）第二个自定义进度条平行显示矩形边缘，而不是像填充蛇那样生长。 3）我现在正在尝试不在我的应用程序中使用闪存。 4）这是我要检查的最后一个问题我希望我能找到一种方法为clipRect制作动画。无论如何谢谢。

@TheButcher，老实说，我没有做过类似的事情，但我暂时正在经历类似的事情。如果我发现任何真正有效的东西，我会告诉你的。顺便说一句，我刚刚提到了闪光灯，只是为了让您了解描边效果背后的想法。当然，在 Android 上使用 flash 是个糟糕的主意:)

这是一个非常困难的问题，我想我花了将近一个星期的时间在这个功能上，但我没有找到解决方案。有什么帮助吗？ @SamRad，面具的问题是一个很好的开始，但我仍然有绘制填充路径作为面具的问题.. :(