Android仿ViVO X6 极速闪充动画效果

一直都在看自定义view，经过一个星期的坚持，基本上能够写出一些比较实用的控件效果了，今天天气太热，就待在家里玩手机，然后手机没电了，在充电的时候，看到了手机的充电动画，觉得挺酷，然后自己我就仔细的分析了一下这里的动画内容，就觉得，这个我也能写出来，所以就有了这篇博客。纯属原创。

先看看效果，因为图片的原因，只能看到静态的。

这个就是效果图了。当然了，这么看好像不怎么样，但是配上了动画，还是挺好看的。

自定义控件的话，其实做的多了，运用的多了，就会觉得自定义view，跟在photo shop 里面画图一样，我们通过建立图层，然后再图层里面绘制自己想要的效果。

这里其实也是一样的，运用到了我前面讲的一些知识，比如这篇：
android自定义view弧线进度控件，原理上大体相当，结合这次的效果，我们看看，这里面是有四个弧形，两个圆，还有一个类似于时钟刻度的效果。所以知道这些的话，这就比较容易实现了。

首先，新建一个类，取名为vivophone,然后继承自view，重载三个构造函数，然后进入主题。

同样的，我们先看看运用到了哪些变量

 // 定义五个画笔
 private paint msmilering, mbigring, mincrilepaint, minline, mtextpaint;
 // 控件的高宽
 private float mwidth, mheight;
 // 矩形的空间
 private rectf mrectf;
 // 四个弧线的开始角度
 private float startangle = 270, startangle2 = 270, startangle3 = 270,
  startangle4 = 270, sweepangle = 90;
 // 文字
 private string text = "70%";
 // 文字的大小
 private float tvsize = 80;
 // 刻度的进度
 private float progress;

然后我们开始初始化数据。

private void initview() {
 msmilering = new paint();
 msmilering.setantialias(true);
 msmilering.setstrokewidth(5);
 msmilering.setstyle(style.stroke);
 msmilering.setcolor(color.parsecolor("#12adff"));

 mbigring = new paint();
 mbigring.setantialias(true);
 mbigring.setstrokewidth(20);
 mbigring.setstyle(style.stroke);
 mbigring.setcolor(color.parsecolor("#12adff"));

 mincrilepaint = new paint();
 mincrilepaint.setantialias(true);
 mincrilepaint.setstrokewidth((float) 0.5);
 mincrilepaint.setstyle(style.stroke);
 mincrilepaint.setcolor(color.parsecolor("#eeeeee"));

 minline = new paint();
 minline.setantialias(true);
 minline.setstrokewidth(3);
 minline.setcolor(color.parsecolor("#00ff00"));

 mtextpaint = new paint();
 mtextpaint.setantialias(true);
 mtextpaint.setstrokewidth(3);
 mtextpaint.settextsize(tvsize);
 mtextpaint.setcolor(color.parsecolor("#ffffff"));
 }

这里主要是对画笔进行初始化，包括设置大小、宽度、样式、颜色等等。这个方法，最后还是要在构造函数里面调用。

画笔初始化好了，接下来就看看怎么给变量赋值；

一样的，我们还是在onsizechange()方法里面写赋值的操作。代码如下：

 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
 super.onsizechanged(w, h, oldw, oldh);
 mwidth = w;
 mheight = h;

 }

这里很简单，就是给高跟宽赋值。

好了，最后看看ondraw方法是怎么写的。

 @override
 protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 canvasoutarc1(canvas, mrectf);
 canvasoutarc2(canvas, mrectf);
 canvasoutarc3(canvas, mrectf);
 canvasoutarc4(canvas, mrectf);
 drawcircle(canvas);
 drawcirclein(canvas);
 canvasdrawtext(canvas);

 }

没错，我这里把每一个的绘制都抽成了方法，这样是为了更好的管理和阅读。看到一个：

 /**
 * 绘制最外面的弧线
 * 
 * @param canvas
 */
 private void canvasoutarc1(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.1), (float) (mwidth * 0.1),
  (float) (mwidth * 0.9), (float) (mwidth * 0.9));
 canvas.drawarc(mrectf, startangle, sweepangle + 90, false, msmilering);
 }

这个是最外层的圆，接下来就是第二个，第三个，第四个，我全部列出来。

/**
 * 绘制外层的第二个
 * 
 * @param canvas
 * @param mrectf
 */
 private void canvasoutarc2(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.14), (float) (mwidth * 0.14),
  (float) (mwidth * 0.85), (float) (mwidth * 0.85));
 canvas.drawarc(mrectf, startangle2, sweepangle + 30, false, mbigring);
 }

第三个：

/**
 * 绘制里面第二个小的
 * 
 * @param canvas
 */
 private void canvasoutarc3(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.22), (float) (mwidth * 0.22),
  (float) (mwidth * 0.795), (float) (mwidth * 0.795));
 canvas.drawarc(mrectf, startangle3, sweepangle, false, msmilering);
 }

第四个：

 /**
 * 绘制里面第二个小的
 * 
 * @param canvas
 */
 private void canvasoutarc4(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.255), (float) (mwidth * 0.255),
  (float) (mwidth * 0.75), (float) (mwidth * 0.75));
 canvas.drawarc(mrectf, startangle4, sweepangle, false, mbigring);
 }

然后就是两个圆了：

第一个圆，这里面还包含了锯齿：

// 绘制内切圆和锯齿
 private void drawcircle(canvas canvas) {
 float radius = (float) (mheight - (mheight * 0.3) * 2 - (mwidth * 0.17));
 float yuanx = (float) (mheight / 2);
 float yuany = (float) (mwidth / 2);

 canvas.drawcircle(yuanx, yuany, radius, mincrilepaint);
 canvas.save();

 float nowwidth = (float) (getmeasuredwidth());
 float nowheight = getmeasuredheight();
 for (int i = 0; i < 72; i++) {
  // canvas.drawline(nowwidth / 2, nowheight / 2 - nowwidth / 2,
  // nowwidth / 2, nowheight / 2 - nowwidth / 2 + 30, minline);

  if (i >= progress) {
  minline.setcolor(color.parsecolor("#555555"));
  } else {
  minline.setcolor(color.parsecolor("#00ff00"));
  }

  canvas.drawline(nowwidth / 2,
   (float) (nowheight / 2 - nowwidth / 2 + mwidth / 3.7),
   nowwidth / 2, (float) (nowheight / 2 - nowwidth / 2
    + mwidth * 0.05 + mwidth / 3.7), minline);

  canvas.rotate(5, getwidth() / 2, getheight() / 2);

 }

 }

第二个圆：

// 绘制最里面的圆
 private void drawcirclein(canvas canvas) {
 float radius = (float) (mheight - (mheight * 0.3) * 2 - (mwidth * 0.22));
 float yuanx = (float) (mheight / 2);
 float yuany = (float) (mwidth / 2);

 canvas.drawcircle(yuanx, yuany, radius, mincrilepaint);
 canvas.save();

 }

最后暴露给外面一个方法，用于动画效果：

 public void setdata(int startangle, float d) {
 this.startangle = startangle;
 this.startangle2 = 360 - startangle;
 this.startangle3 = startangle;
 this.startangle4 = 360 - startangle;
 progress = d / 4;
 postinvalidatedelayed(500);
 }

这里为了效果更明显，我让它五毫秒的速度更新ui，这里就是view的全部内容，下面，我把所有的代码都列出来：

布局文件：

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/bg"
 tools:context=".mainactivity" >

 <com.example.vivoopen.weight.vivoview
 android:id="@+id/vivo"
 android:layout_width="180dip"
 android:layout_height="180dip"
 android:layout_centerinparent="true" />

</relativelayout>

mainactivity.java:

public class mainactivity extends activity {
 private vivoview view;
 private boolean isrun = true;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 view = (vivoview) findviewbyid(r.id.vivo);

 new thread(new runnable() {
  public void run() {
  synchronized (view) {

   while (isrun) {
   message msg;
   for (int i = 0; i < n2; i = i + 10) {
    msg = new message();
    msg.obj = i;
    systemclock.sleep(100);
    msg.what = 1;
    handler.sendmessage(msg);
   }
   msg = new message();
   msg.what = 2;
   handler.sendmessage(msg);
   }
  }
  }
 }).start();

 }

 int n2 = 2;
 private handler handler = new handler() {
 public void handlemessage(android.os.message msg) {

  switch (msg.what) {
  case 1:
  int a = (integer) msg.obj;
  view.setdata(a, a);
  break;
  case 2:
  n2 = 359;
  break;
  default:
  break;
  }

 };
 };

}

vivoview.java:

public class vivoview extends view {
 // 定义五个画笔
 private paint msmilering, mbigring, mincrilepaint, minline, mtextpaint;
 // 控件的高宽
 private float mwidth, mheight;
 // 矩形的空间
 private rectf mrectf;
 // 四个弧线的开始角度
 private float startangle = 270, startangle2 = 270, startangle3 = 270,
  startangle4 = 270, sweepangle = 90;
 // 文字
 private string text = "70%";
 // 文字的大小
 private float tvsize = 80;
 // 刻度的进度
 private float progress;

 public vivoview(context context, attributeset attrs, int defstyle) {
 super(context, attrs, defstyle);
 initview();

 }

 public vivoview(context context, attributeset attrs) {
 super(context, attrs);
 initview();
 }

 public vivoview(context context) {
 super(context);
 initview();
 }

 private void initview() {
 msmilering = new paint();
 msmilering.setantialias(true);
 msmilering.setstrokewidth(5);
 msmilering.setstyle(style.stroke);
 msmilering.setcolor(color.parsecolor("#12adff"));

 mbigring = new paint();
 mbigring.setantialias(true);
 mbigring.setstrokewidth(20);
 mbigring.setstyle(style.stroke);
 mbigring.setcolor(color.parsecolor("#12adff"));

 mincrilepaint = new paint();
 mincrilepaint.setantialias(true);
 mincrilepaint.setstrokewidth((float) 0.5);
 mincrilepaint.setstyle(style.stroke);
 mincrilepaint.setcolor(color.parsecolor("#eeeeee"));

 minline = new paint();
 minline.setantialias(true);
 minline.setstrokewidth(3);
 minline.setcolor(color.parsecolor("#00ff00"));

 mtextpaint = new paint();
 mtextpaint.setantialias(true);
 mtextpaint.setstrokewidth(3);
 mtextpaint.settextsize(tvsize);
 mtextpaint.setcolor(color.parsecolor("#ffffff"));
 }

 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
 super.onsizechanged(w, h, oldw, oldh);
 mwidth = w;
 mheight = h;

 }

 @override
 protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 canvasoutarc1(canvas, mrectf);
 canvasoutarc2(canvas, mrectf);
 canvasoutarc3(canvas, mrectf);
 canvasoutarc4(canvas, mrectf);
 drawcircle(canvas);
 drawcirclein(canvas);
 canvasdrawtext(canvas);

 }

 // 绘制文字
 private void canvasdrawtext(canvas canvas) {
 float textsize = mtextpaint.measuretext(text);
 float x = mwidth / 2 - textsize / 2;
 float y = mheight / 2 + textsize / 5;
 canvas.drawtext(text, x, y, mtextpaint);
 }

 // 绘制最里面的圆
 // 绘制内切圆和锯齿
 private void drawcirclein(canvas canvas) {
 float radius = (float) (mheight - (mheight * 0.3) * 2 - (mwidth * 0.22));
 float yuanx = (float) (mheight / 2);
 float yuany = (float) (mwidth / 2);

 canvas.drawcircle(yuanx, yuany, radius, mincrilepaint);
 canvas.save();

 }

 // 绘制内切圆和锯齿
 private void drawcircle(canvas canvas) {
 float radius = (float) (mheight - (mheight * 0.3) * 2 - (mwidth * 0.17));
 float yuanx = (float) (mheight / 2);
 float yuany = (float) (mwidth / 2);

 canvas.drawcircle(yuanx, yuany, radius, mincrilepaint);
 canvas.save();

 float nowwidth = (float) (getmeasuredwidth());
 float nowheight = getmeasuredheight();
 for (int i = 0; i < 72; i++) {
  // canvas.drawline(nowwidth / 2, nowheight / 2 - nowwidth / 2,
  // nowwidth / 2, nowheight / 2 - nowwidth / 2 + 30, minline);

  if (i >= progress) {
  minline.setcolor(color.parsecolor("#555555"));
  } else {
  minline.setcolor(color.parsecolor("#00ff00"));
  }

  canvas.drawline(nowwidth / 2,
   (float) (nowheight / 2 - nowwidth / 2 + mwidth / 3.7),
   nowwidth / 2, (float) (nowheight / 2 - nowwidth / 2
    + mwidth * 0.05 + mwidth / 3.7), minline);

  canvas.rotate(5, getwidth() / 2, getheight() / 2);

 }

 }

 /**
 * 绘制最外面的弧线
 * 
 * @param canvas
 */
 private void canvasoutarc1(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.1), (float) (mwidth * 0.1),
  (float) (mwidth * 0.9), (float) (mwidth * 0.9));
 canvas.drawarc(mrectf, startangle, sweepangle + 90, false, msmilering);
 }

 /**
 * 绘制外层的第二个
 * 
 * @param canvas
 * @param mrectf
 */
 private void canvasoutarc2(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.14), (float) (mwidth * 0.14),
  (float) (mwidth * 0.85), (float) (mwidth * 0.85));
 canvas.drawarc(mrectf, startangle2, sweepangle + 30, false, mbigring);
 }

 /**
 * 绘制里面第二个小的
 * 
 * @param canvas
 */
 private void canvasoutarc3(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.22), (float) (mwidth * 0.22),
  (float) (mwidth * 0.795), (float) (mwidth * 0.795));
 canvas.drawarc(mrectf, startangle3, sweepangle, false, msmilering);
 }

 /**
 * 绘制里面第二个小的
 * 
 * @param canvas
 */
 private void canvasoutarc4(canvas canvas, rectf mrectf) {
 mrectf = new rectf((float) (mwidth * 0.255), (float) (mwidth * 0.255),
  (float) (mwidth * 0.75), (float) (mwidth * 0.75));
 canvas.drawarc(mrectf, startangle4, sweepangle, false, mbigring);
 }

 public void setdata(int startangle, float d) {
 this.startangle = startangle;
 this.startangle2 = 360 - startangle;
 this.startangle3 = startangle;
 this.startangle4 = 360 - startangle;
 progress = d / 4;
 postinvalidatedelayed(500);
 }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。