华为时钟

今天主要给大家带来一个在荣耀8上看到的一个小有意思的时钟效果，这个效果比较简单，俗话说，“人生在世，无非就是把复杂的事情整简单，抑或把简单的事情搞复杂”，既然比较简单，那咱们就多用几种方案来实现，进而开拓一下思路；

首先先上效果图：

--------------------------------------------------

如果你想看 GAStudio Github主页，请戳这里； 
如果你想看 GAStudio更多技术文章，请戳这里； 
QQ技术交流群：277582728； 

--------------------------------------------------

从效果图上看，和常见表盘一样，每根线代表一条时间刻度，一个红色小圈随着时间的变化不断的移动，而差异的点主要在于表盘有一个突起，并且这个突起随着红点的移动而移动，现在针对这个效果，我们从以下三个思路来实现：

一、使用切图作为蒙板与刻度线进行图像混合；

二、自行勾勒对应形状Path与刻度线进行图像混合；

三、动态计算刻度线长度；

有同学可能会认为第一种和第二种核心原理一样，都是用的混合模式（Xfermode），确实如此，但最终实现结果会有差异，值得考虑；

接下来咱们分别来看下这三种实现；

一、使用切图作为蒙板与刻度线进行图像混合：

使用切图蒙版方案可以概括为如图的过程：

无非就是用蒙版遮盖掉我们不想进行显示的区域，思路整理起来就是下面的过程：

1. 绘制表盘刻度；

2. 使用遮罩图与表盘刻度进行混合；

3. 不断旋转遮罩图；

核心代码整理如下：

[java]  view plain  copy

 

1. <span style="font-family: SimSun;"><span style="font-size:14px;">protected void onDraw(Canvas canvas) {  
2.         super.onDraw(canvas);  
3.         // Save a layer  
4.         int layerCount = canvas.saveLayer(mClockViewRectF, mPaint, Canvas.ALL_SAVE_FLAG);  
5.   
6.         // Draw the DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM clock scale lines  
7.         mPaint.setColor(mClockScaleLineColor);  
8.   
9.         // Because the picture is not perfect, we need mAdjustClockScaleLineStartX.  
10.         float clockScaleLineStartY = mAdjustClockScaleLineStartX + mClockViewRectF.top;  
11.         float clockScaleLineEndY = clockScaleLineStartY + mClockScaleLineHeight;  
12.         for (int i = 0; i < DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM; i++) {  
13.             canvas.drawLine(mClockViewCenterX, clockScaleLineStartY,  
14.                     mClockViewCenterX, clockScaleLineEndY, mPaint);  
15.             canvas.rotate(ANGLE_PER_SCALE, mClockViewCenterX, mClockViewCenterY);  
16.         }  
17.         mPaint.setXfermode(mXfermode);  
18.         canvas.rotate(mNowClockAngle, mClockViewCenterX, mClockViewCenterY);  
19.         canvas.drawBitmap(mClockMaskBitmap, null, mClockViewRectF, mPaint);  
20.         mPaint.setXfermode(null);  
21.   
22.         // Draw clock point  
23.         mPaint.setColor(mClockPointColor);  
24.         canvas.drawCircle(mClockPointCenterX, mClockPointCenterY, mClockPointRadius, mPaint);  
25.   
26.         canvas.restoreToCount(layerCount);  
27.         updateTimeText(canvas);  
28.     }</span></span>  

该方案实现效果如下：

二、自行勾勒对应形状Path与刻度线进行图像混合:

用path勾勒对应形状Path，可以将蒙版图分为如下图所示两部分。一是除了突起部分的圆环部分，二是突起部分，这个突起部分可以使用贝塞尔曲线进行拟合，也可以使用线性拟合（即采用直线连接每个刻度线的顶端），本次选择采用线性拟合的方式，有兴趣的同学可以尝试贝塞尔曲线方式；

先定义一个数组表示突起部分刻度线的相对长度关系：

[java]  view plain  copy

 

1. <span style="font-family: SimSun;"><span style="font-size:14px;">    private static final float[] CLOCK_SCALE_LINE_BASE_LEN_ARRAY = new float[]{  
2.             1F, 1.1F, 1.21F, 1.32F, 1.452F,  
3.             1.551F, 1.6827F, 1.75F, 1.6827F, 1.551F,  
4.             1.452F, 1.32F, 1.21F, 1.1F, 1F};</span></span>  

生成Path蒙版的代码如下：

[java]  view plain  copy

 

1. <span style="font-family: SimSun;"><span style="font-size:14px;">private void generateMaskPath() {  
2.         Point point = new Point(mClockViewCenterX, mClockViewCenterY - mClockMaskRadius - mClockScaleLineHeight);  
3.         mClockMaskPath.moveTo(point.x, point.y);  
4.   
5.         // Generate contour of the special clock scale lines  
6.         int arrayLen = CLOCK_SCALE_LINE_BASE_LEN_ARRAY.length;  
7.         for (int index = 0; index < arrayLen; index++) {  
8.             calculateNextPoint(point, CLOCK_SCALE_LINE_BASE_LEN_ARRAY[index],  
9.                     (float) Math.toRadians(ANGLE_PER_SCALE * (index + 1)));  
10.             mClockMaskPath.lineTo(point.x, point.y);  
11.         }  
12.   
13.         // Generate contour of the normal clock scale lines  
14.         int insertLen = mClockScaleLineMaxHeight - mClockScaleLineHeight;  
15.         RectF cycleRectF = new RectF(mClockViewRectF);  
16.         cycleRectF.inset(insertLen, insertLen);  
17.         mClockMaskPath.arcTo(cycleRectF, arrayLen * ANGLE_PER_SCALE - 90,  
18.                 (DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM - arrayLen) * ANGLE_PER_SCALE);  
19.     }</span></span>  

核心绘制逻辑如下：

[java]  view plain  copy

 

1. <span style="font-family: SimSun;"><span style="font-size:14px;">    @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         super.onDraw(canvas);  
4.         // Save layer  
5.         int layerOne = canvas.saveLayer(mClockViewRectF, mPaint, Canvas.ALL_SAVE_FLAG);  
6.   
7.         // Draw clock scale lines  
8.         mPaint.setColor(mClockScaleLineColor);  
9.         float clockScaleLineStartY = mAdjustClockScaleLineStartX + mClockViewRectF.top;  
10.         float clockScaleLineEndY = clockScaleLineStartY + mClockScaleLineMaxHeight;  
11.         for (int i = 0; i < DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM; i++) {  
12.             canvas.drawLine(mClockViewCenterX, clockScaleLineStartY,  
13.                     mClockViewCenterX, clockScaleLineEndY, mPaint);  
14.             canvas.rotate(ANGLE_PER_SCALE, mClockViewCenterX, mClockViewCenterY);  
15.         }  
16.   
17.         mPaint.setXfermode(mXfermode);  
18.         canvas.rotate(mNowClockAngle - mClockMaskAdjustAngle, mClockViewCenterX, mClockViewCenterY);  
19.         // Generate a mask by path  
20.         int layerTwo = canvas.saveLayer(mClockViewRectF, mPaint, Canvas.ALL_SAVE_FLAG);  
21.         mPaint.setXfermode(null);  
22.         canvas.drawOval(mClockViewRectF, mPaint);  
23.         mPaint.setXfermode(mXfermode);  
24.         canvas.drawPath(mClockMaskPath, mPaint);  
25.         canvas.restoreToCount(layerTwo);  
26.   
27.         mPaint.setXfermode(null);  
28.         // Draw clock point  
29.         mPaint.setColor(mClockPointColor);  
30.         canvas.rotate(mClockMaskAdjustAngle, mClockViewCenterX, mClockViewCenterY);  
31.         canvas.drawCircle(mClockPointCenterX, mClockPointCenterY, mClockPointRadius, mPaint);  
32.   
33.         canvas.restoreToCount(layerOne);  
34.         updateTimeText(canvas);  
35.     }</span></span>  

该方案实现效果如下：

单从效果来说，似乎与第一种方案无异，一会儿咱们再进行比较，接下来看第三种方案；

三、动态计算刻度线长度：

首先咱们稍微整理一下思路：

1. 除了突起的刻度线，其他刻度线长度一致，咱们不妨先将长度一致的先绘制；

2. 经过观察，突起部分中间长，两边短，呈对称性，所以考虑一半即可，这样就只需考虑len1 － len5；

3. 长度变化是有规律的，具有周期性，周期为totalTime * perAngle / 360，也即转一圈的时间（一分钟），除以刻度线的条数；

我们有如下几个长度的线，len1, len2, len3, len4, len5， 那么在一个周期时间内，len1 变到 len2, len2变到 len3...... 我们就可以得到这样如下公式：

上述公式中，len表示长度，factor表示归一化时间因子，从0到1变化;

4. 右边的几条线，只不过把左边的变长改为变短即可，依旧能适应上述公式；

经过上面的分析，绘制的核心代码如下：

[java]  view plain  copy

 

1. <span style="font-family: SimSun;"><span style="font-size:14px;">    @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         super.onDraw(canvas);  
4.         // Normalization the angle  
5.         float normalizedTimePeriod = mRemainderOfNowClockAngle / ANGLE_PER_SCALE;  
6.         int clockScaleLineStartY = mClockViewRect.top + mClockScaleLineMaxHeight;  
7.   
8.         canvas.save();  
9.   
10.         // Rotate the canvas to now clock angle  
11.         canvas.rotate(mNowClockAngle, mClockViewCenterX, mClockViewCenterY);  
12.   
13.         // Draw the point  
14.         mPaint.setColor(mClockPointColor);  
15.         canvas.drawCircle(mClockPointCenterX, mClockPointCenterY, mClockPointRadius, mPaint);  
16.   
17.         // The follow adjustArrayLen indicate the special clock scale num  
18.         int adjustArrayLen = CLOCK_SCALE_LINE_BASE_LEN_ARRAY.length - 1;  
19.   
20.         // Rotate the canvas to ensure that the longest scale line points to now scale line  
21.         canvas.rotate(-mRemainderOfNowClockAngle - (adjustArrayLen - 2) / 2f * ANGLE_PER_SCALE,  
22.                 mClockViewCenterX, mClockViewCenterY);  
23.         mPaint.setColor(mClockScaleLineColor);  
24.   
25.         // Draw the special lines  
26.         // First draw the rightmost clock scale line, so you need to start with index = adjustArrayLen - 1;  
27.         for (int index = adjustArrayLen - 1; index >= 0; index--) {  
28.             // The follow function is mean that Length 1 changes to length 2 within a certain period.  
29.             // The formula can be expressed as follows, changeLen1 = (len2 - len1) * timeFactor + len1.  
30.             float specialLineNowLen = (mClockScaleLineHeight * (CLOCK_SCALE_LINE_BASE_LEN_ARRAY[index]  
31.                     + normalizedTimePeriod * (CLOCK_SCALE_LINE_BASE_LEN_ARRAY[index + 1]  
32.                     - CLOCK_SCALE_LINE_BASE_LEN_ARRAY[index])));  
33.             float specialClockEndY = clockScaleLineStartY - specialLineNowLen;  
34.             canvas.drawLine(mClockViewCenterX, clockScaleLineStartY, mClockViewCenterX, specialClockEndY, mPaint);  
35.             canvas.rotate(ANGLE_PER_SCALE, mClockViewCenterX, mClockViewCenterY);  
36.         }  
37.   
38.         // Draw the normal lines  
39.         int clockScaleLineEndY = mClockScaleLineMaxHeight + mClockViewRect.top - mClockScaleLineHeight;  
40.         for (int other = 0; other < (DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM - adjustArrayLen); other++) {  
41.             canvas.drawLine(mClockViewCenterX, clockScaleLineStartY, mClockViewCenterX,  
42.                     clockScaleLineEndY, mPaint);  
43.             canvas.rotate(ANGLE_PER_SCALE, mClockViewCenterX, mClockViewCenterY);  
44.         }  
45.   
46.         canvas.restore();  
47.         updateDigitalTimeText(canvas);  
48.     }</span></span>  

该方案实现效果如下：

OK，到此为止，三种方案已经实现完毕，最后，咱们一起从cpu占用、内存占用、FPS这几个方面进行个简单的比较：

测试机型为 moto 1085

性能指标	方案一（图片蒙版）	方案二（path蒙版）	方案三（动态计算）
CPU	30%	34%	20%
内存 (增加内存)	2.70M	0.41M	0.41M
FPS（平均值）	54	54	58

孰好孰坏，咱们用数据说话，大家可自行评判；

github 源码地址：https://github.com/Ajian-studio/GAHonorClock