android高仿小米时钟（使用Camera和Matrix实现3D效果）

继续练习自定义view。。毕竟熟才能生巧。一直觉得小米的时钟很精美，那这次就搞它~这次除了练习自定义view，还涉及到使用camera和matrix实现3d效果。

一个这样的效果，在绘制的时候最好选择一个方向一步一步的绘制，这里我选择由外到内、由深到浅的方向来绘制，代码步骤如下：

1、首先老一套~新建attrs.xml文件，编写自定义属性如时钟背景色、亮色（用于分针、秒针、渐变终止色）、暗色（圆弧、刻度线、时针、渐变起始色），新建miclockview继承view，重写构造方法，获取自定义属性值，初始化paint、path以及画圆、弧需要的rectf等东东，重写onmeasure计算宽高，这里不再啰嗦~刚开始学自定义view的同学建议从我的前几篇博客看起

2、由于onsizechanged方法在构造方法、onmeasure之后，又在ondraw之前，此时已经完成全局变量初始化，也得到了控件的宽高，所以可以在这个方法中确定一些与宽高有关的数值，比如这个view的半径啊、padding值等，方便绘制的时候计算大小和位置：

@override
protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  //宽和高分别去掉padding值，取min的一半即表盘的半径
  mradius = math.min(w - getpaddingleft() - getpaddingright(),
      h - getpaddingtop() - getpaddingbottom()) / 2;
  //加一个默认的padding值，为了防止用camera旋转时钟时造成四周超出view大小
  mdefaultpadding = 0.12f * mradius;//根据比例确定默认padding大小
  //为了适配控件大小match_parent、wrap_content、精确数值以及padding属性
  mpaddingleft = mdefaultpadding + w / 2 - mradius + getpaddingleft();
  mpaddingtop = mdefaultpadding + h / 2 - mradius + getpaddingtop();
  mpaddingright = mpaddingleft;
  mpaddingbottom = mpaddingtop;
  mscalelength = 0.12f * mradius;//根据比例确定刻度线长度
  mscalearcpaint.setstrokewidth(mscalelength);//刻度盘的弧宽
  mscalelinepaint.setstrokewidth(0.012f * mradius);//刻度线的宽度
  //梯度扫描渐变，以(w/2,h/2)为中心点，两种起止颜色梯度渐变
  //float数组表示，[0,0.75)为起始颜色所占比例，[0.75,1}为起止颜色渐变所占比例
  msweepgradient = new sweepgradient(w / 2, h / 2,
      new int[]{mdarkcolor, mlightcolor}, new float[]{0.75f, 1});
}

3、准备工作做的差不多了，那就开始绘制，根据方向我先确定最外层的小时时间文本的位置及其旁边的四个弧：

注意两位数字的宽度和一位数的宽度是不一样的，在计算的时候一定要注意

 

  string timetext = "12";
  mtextpaint.gettextbounds(timetext, 0, timetext.length(), mtextrect);
  int textlargewidth = mtextrect.width();//两位数字的宽
  mcanvas.drawtext("12", getwidth() / 2 - textlargewidth / 2, mpaddingtop + mtextrect.height(), mtextpaint);
  timetext = "3";
  mtextpaint.gettextbounds(timetext, 0, timetext.length(), mtextrect);
  int textsmallwidth = mtextrect.width();//一位数字的宽
  mcanvas.drawtext("3", getwidth() - mpaddingright - mtextrect.height() / 2 - textsmallwidth / 2,
      getheight() / 2 + mtextrect.height() / 2, mtextpaint);
  mcanvas.drawtext("6", getwidth() / 2 - textsmallwidth / 2, getheight() - mpaddingbottom, mtextpaint);
  mcanvas.drawtext("9", mpaddingleft + mtextrect.height() / 2 - textsmallwidth / 2,
      getheight() / 2 + mtextrect.height() / 2, mtextpaint);

我计算文本的宽高一般采用的方法是，new一个rect，然后再绘制时调用

mtextpaint.gettextbounds(timetext, 0, timetext.length(), mtextrect);

将这个文本的范围赋值给这个mtextrect，此时mtextrect.width()就是这段文本的宽，mtextrect.height()就是这段文本的高。

画文本旁边的四个弧：

mcirclerectf.set(mpaddingleft + mtextrect.height() / 2 + mcirclestrokewidth / 2,
    mpaddingtop + mtextrect.height() / 2 + mcirclestrokewidth / 2,
    getwidth() - mpaddingright - mtextrect.height() / 2 + mcirclestrokewidth / 2,
    getheight() - mpaddingbottom - mtextrect.height() / 2 + mcirclestrokewidth / 2);
for (int i = 0; i < 4; i++) {
  mcanvas.drawarc(mcirclerectf, 5 + 90 * i, 80, false, mcirclepaint);
}

计算圆弧外接矩形的范围别忘了加上圆弧线宽的一半

4、再往里是刻度盘，画这个刻度盘的思路是现在底层画一个mscalelength宽度的圆，并设置sweepgradient渐变，上面再画一圈背景色的刻度线。获得sweepgradient的matrix对象，通过不断旋转mgradientmatrix的角度实现刻度盘的旋转效果：

/**
 * 画一圈梯度渲染的亮暗色渐变圆弧，重绘时不断旋转，上面盖一圈背景色的刻度线
 */
private void drawscaleline() {
  mscalearcrectf.set(mpaddingleft + 1.5f * mscalelength + mtextrect.height() / 2,
      mpaddingtop + 1.5f * mscalelength + mtextrect.height() / 2,
      getwidth() - mpaddingright - mtextrect.height() / 2 - 1.5f * mscalelength,
      getheight() - mpaddingbottom - mtextrect.height() / 2 - 1.5f * mscalelength);

  //matrix默认会在三点钟方向开始颜色的渐变，为了吻合
  //钟表十二点钟顺时针旋转的方向，把秒针旋转的角度减去90度
  mgradientmatrix.setrotate(mseconddegree - 90, getwidth() / 2, getheight() / 2);
  msweepgradient.setlocalmatrix(mgradientmatrix);
  mscalearcpaint.setshader(msweepgradient);
  mcanvas.drawarc(mscalearcrectf, 0, 360, false, mscalearcpaint);
  //画背景色刻度线
  mcanvas.save();
  for (int i = 0; i < 200; i++) {
    mcanvas.drawline(getwidth() / 2, mpaddingtop + mscalelength + mtextrect.height() / 2,
        getwidth() / 2, mpaddingtop + 2 * mscalelength + mtextrect.height() / 2, mscalelinepaint);
    mcanvas.rotate(1.8f, getwidth() / 2, getheight() / 2);
  }
  mcanvas.restore();
}

这里有一个全局变量mseconddegree，即秒针旋转的角度，需要根据当前时间动态获取：

/**
 * 获取当前 时分秒 所对应的角度
 * 为了不让秒针走得像老式挂钟一样僵硬，需要精确到毫秒
 */
private void gettimedegree() {
  calendar calendar = calendar.getinstance();
  float millisecond = calendar.get(calendar.millisecond);
  float second = calendar.get(calendar.second) + millisecond / 1000;
  float minute = calendar.get(calendar.minute) + second / 60;
  float hour = calendar.get(calendar.hour) + minute / 60;
  mseconddegree = second / 60 * 360;
  mminutedegree = minute / 60 * 360;
  mhourdegree = hour / 12 * 360;
}

5、然后就是画秒针，用path绘制一个指向12点钟的三角形，通过不断旋转画布实现秒针的旋转：

/**
 * 画秒针，根据不断变化的秒针角度旋转画布
 */
private void drawsecondhand() {
  mcanvas.save();
  mcanvas.rotate(mseconddegree, getwidth() / 2, getheight() / 2);
  msecondhandpath.reset();
  float offset = mpaddingtop + mtextrect.height() / 2;
  msecondhandpath.moveto(getwidth() / 2, offset + 0.27f * mradius);
  msecondhandpath.lineto(getwidth() / 2 - 0.05f * mradius, offset + 0.35f * mradius);
  msecondhandpath.lineto(getwidth() / 2 + 0.05f * mradius, offset + 0.35f * mradius);
  msecondhandpath.close();
  msecondhandpaint.setcolor(mlightcolor);
  mcanvas.drawpath(msecondhandpath, msecondhandpaint);
  mcanvas.restore();
}

6、看实现图，时针在分针之下并且比分针颜色浅，那我就先画时针，仍然是path，并且针头为圆弧状，那么就用二阶贝赛尔曲线，路径为moveto( a),lineto(b),quadto(c,d),lineto(e),close.

/**
 * 画时针，根据不断变化的时针角度旋转画布
 * 针头为圆弧状，使用二阶贝塞尔曲线
 */
private void drawhourhand() {
  mcanvas.save();
  mcanvas.rotate(mhourdegree, getwidth() / 2, getheight() / 2);
  mhourhandpath.reset();
  float offset = mpaddingtop + mtextrect.height() / 2;
  mhourhandpath.moveto(getwidth() / 2 - 0.02f * mradius, getheight() / 2);
  mhourhandpath.lineto(getwidth() / 2 - 0.01f * mradius, offset + 0.5f * mradius);
  mhourhandpath.quadto(getwidth() / 2, offset + 0.48f * mradius,
      getwidth() / 2 + 0.01f * mradius, offset + 0.5f * mradius);
  mhourhandpath.lineto(getwidth() / 2 + 0.02f * mradius, getheight() / 2);
  mhourhandpath.close();
  mcanvas.drawpath(mhourhandpath, mhourhandpaint);
  mcanvas.restore();
}

7、然后是分针，按照时针的思路：

/**
 * 画分针，根据不断变化的分针角度旋转画布
 */
private void drawminutehand() {
  mcanvas.save();
  mcanvas.rotate(mminutedegree, getwidth() / 2, getheight() / 2);
  mminutehandpath.reset();
  float offset = mpaddingtop + mtextrect.height() / 2;
  mminutehandpath.moveto(getwidth() / 2 - 0.01f * mradius, getheight() / 2);
  mminutehandpath.lineto(getwidth() / 2 - 0.008f * mradius, offset + 0.38f * mradius);
  mminutehandpath.quadto(getwidth() / 2, offset + 0.36f * mradius,
      getwidth() / 2 + 0.008f * mradius, offset + 0.38f * mradius);
  mminutehandpath.lineto(getwidth() / 2 + 0.01f * mradius, getheight() / 2);
  mminutehandpath.close();
  mcanvas.drawpath(mminutehandpath, mminutehandpaint);
  mcanvas.restore();
}

8、最后由于path是close的，所以干脆画两个圆盖在上面：

/**
 * 画指针的连接圆圈，盖住指针path在圆心的连接线
 */
private void drawcovercircle() {
  mcanvas.drawcircle(getwidth() / 2, getheight() / 2, 0.05f * mradius, msecondhandpaint);
  msecondhandpaint.setcolor(mbackgroundcolor);
  mcanvas.drawcircle(getwidth() / 2, getheight() / 2, 0.025f * mradius, msecondhandpaint);
}

9、终于画完了，ondraw部分就是这样

@override
protected void ondraw(canvas canvas) {
  mcanvas = canvas;
  gettimedegree();
  drawtimetext();
  drawscaleline();
  drawsecondhand();
  drawhourhand();
  drawminutehand();
  drawcovercircle();
  invalidate();
}

绘制的时候，尤其是像这样圆形view，灵活运用

canvas.save();
canvas.rotate(mdegree, mcenterx, mcentery);
<!-- draw something -->
canvas.restore();

这一套组合拳可以减少不少三角函数、角度弧度相关的计算。

10、辣么接下来就是如何实现触摸使钟表3d旋转

借助camera类和matrix类，在构造方法中：

matrix mcameramatrix = new matrix();
camera mcamera = new camera();

/**
 * 设置3d时钟效果，触摸矩阵的相关设置、照相机的旋转大小
 * 应用在绘制图形之前，否则无效
 *
 * @param rotatex 绕x轴旋转的大小
 * @param rotatey 绕y轴旋转的大小
 */
private void setcamerarotate(float rotatex, float rotatey) {
  mcameramatrix.reset();
  mcamera.save();
  mcamera.rotatex(mcamerarotatex);//绕x轴旋转角度
  mcamera.rotatey(mcamerarotatey);//绕y轴旋转角度
  mcamera.getmatrix(mcameramatrix);//相关属性设置到matrix中
  mcamera.restore();
  //camera在view左上角那个点，故旋转默认是以左上角为中心旋转
  //故在动作之前pre将matrix向左移动getwidth()/2长度，向上移动getheight()/2长度
  mcameramatrix.pretranslate(-getwidth() / 2, -getheight() / 2);
  //在动作之后post再回到原位
  mcameramatrix.posttranslate(getwidth() / 2, getheight() / 2);
  mcanvas.concat(mcameramatrix);//matrix与canvas相关联
}

这段代码除了camera的旋转、平移、缩放之类的操作之外，剩下的代码一般是固定的

全局变量mcamerarotatex和mcamerarotatey应该与此时手指触摸坐标相关联动态获取：

@override
public boolean ontouchevent(motionevent event) {
  switch (event.getaction()) {
    case motionevent.action_down:
      getcamerarotate(event);
      break;
    case motionevent.action_move:
      //根据手指坐标计算camera应该旋转的大小
      getcamerarotate(event);
      break;
  }
  return true;
}

camera的坐标系和view的坐标系是不一样的

view坐标系是二维的，原点在屏幕左上角，右为x轴正方向，下为y轴正方向；而camera坐标系是三维的，原点在屏幕左上角，右为x轴正方向，上为y轴正方向，屏幕向里为z轴正方向

/**
 * 获取camera旋转的大小
 * 注意view坐标与camera坐标方向的转换
 */
private void getcamerarotate(motionevent event) {
  float rotatex = -(event.gety() - getheight() / 2);
  float rotatey = (event.getx() - getwidth() / 2);
  //求出此时旋转的大小与半径之比
  float percentx = rotatex / mradius;
  float percenty = rotatey / mradius;
  if (percentx > 1) {
    percentx = 1;
  } else if (percentx < -1) {
    percentx = -1;
  }
  if (percenty > 1) {
    percenty = 1;
  } else if (percenty < -1) {
    percenty = -1;
  }
  //最终旋转的大小按比例匀称改变
  mcamerarotatex = percentx * mmaxcamerarotate;
  mcamerarotatey = percenty * mmaxcamerarotate;
}

11、最后在ontouchevent中松开手指时加一个复原并晃动的动画

case motionevent.action_up:
  //松开手指，时钟复原并伴随晃动动画
  valueanimator animx = getshakeanim(mcamerarotatex, 0);
  animx.addupdatelistener(new valueanimator.animatorupdatelistener() {
    @override
    public void onanimationupdate(valueanimator valueanimator) {
      mcamerarotatex = (float) valueanimator.getanimatedvalue();
    }
  });
  valueanimator animy = getshakeanim(mcamerarotatey, 0);
  animy.addupdatelistener(new valueanimator.animatorupdatelistener() {
    @override
    public void onanimationupdate(valueanimator valueanimator) {
      mcamerarotatey = (float) valueanimator.getanimatedvalue();
    }
  });
  break;

/**
 * 使用overshootinterpolator完成时钟晃动动画
 */
private valueanimator getshakeanim(float start, float end) {
  valueanimator anim = valueanimator.offloat(start, end);
  anim.setinterpolator(new overshootinterpolator(10));
  anim.setduration(500);
  anim.start();
  return anim;
}

终于写完了，这个miclockview适配也做的差不多了，时间也是同步的手机时间，一般可以拿来就用了~

demo下载地址：http://xiazai.jb51.net/201701/yuanma/miclockview_jb51.rar

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