Watch and watch with Android custom View

Watch and watch with Android custom View

Reprinted please indicate the source: http://blog.csdn.net/baiyuliang2013/article/details/45535227

Previously, html5 watches and clocks were implemented. html5 also has a Canvas attribute. Compared with Android Canvas, html5 features are much more powerful, html5 is much more convenient and simple, while Android is very complicated to implement. Like pointer rotation, html5 can draw a line and then rotate a radian with this line, android must have known start and end coordinates, which requires exact calculation of start coordinates. Let's take a look at it first. Because the graph is static and dynamic graphs are not too easy to do, you just need to take a look at the general effect. You can download the demo for the specific effect:

This watch is not perfect. For a normal watch, every second hand turns a grid, the minute hand and the hour hand will follow the corresponding radian, but in this example, I stole a lazy, only when the second hand turns for a week, only a small cell is moved for the needle sharding. When the needle sharding turns to a week, the hour hand moves a large cell. It does not move for less than a week because the exact coordinate value is required for the draw line, if this is done, the workload will be huge, so we can understand the principle.

Implementation ideas:

1. overwrite the View and draw it in the ondraw method;

2. Define the Border width, scale width, length, pointer width, length, and calculate the coordinates of the center and dial radius;

3. Draw a border:

MPaint. setStrokeWidth (bordWidth); // set the width of the ring mPaint. setColor (bordColor); canvas. drawCircle (getWidth ()/2, getWidth ()/2, r, mPaint );

4. Draw the scale:

// Draw the scale // 12mPaint. setStrokeWidth (timeLineB_W); mPaint. setColor (timeColor); canvas. drawLine (circleX, bordWidth, circleX, bordWidth + timeLineB_H, mPaint); // trim (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (90-i * 6), (float) (circleX-r * Math. cos (Math. toRadians (I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (I * 6), mPaint);} // 1mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (60), (float) (circleX-r * Math. cos (Math. toRadians (30), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30), mPaint); // 1-2mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX-r * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + I * 6), mPaint);} // 2mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (30), (float) (circleX-r * Math. cos (Math. toRadians (60), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), mPaint); // 2-3mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX-r * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + I * 6), mPaint);} // 3mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (getWidth ()-bordWidth, circleX, getWidth ()-bordWidth-timeLineB_H, circleX, mPaint); // 3-4mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (I * 6), (float) (circleX + r * Math. cos (Math. toRadians (90-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-i * 6), mPaint);} // 4mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (30), (float) (circleX + r * Math. cos (Math. toRadians (60), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60), mPaint); // 4-5mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX + r * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-i * 6), mPaint);} // 5mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (60), (float) (circleX + r * Math. cos (Math. toRadians (30), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30), mPaint); // 5-6mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX + r * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX + r * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-i * 6), mPaint);} // 6mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (circleX, getWidth ()-bordWidth, circleX, getWidth ()-bordWidth-timeLineB_H, mPaint); // 6-7mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (90-i * 6), (float) (circleX + r * Math. cos (Math. toRadians (I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (I * 6), mPaint);} // 7mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (60), (float) (circleX + r * Math. cos (Math. toRadians (30), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30), mPaint); // 7-8mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX + r * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + I * 6), mPaint);} // 8mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (30), (float) (circleX + r * Math. cos (Math. toRadians (60), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60), mPaint); // 8-9mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX + r * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + I * 6), mPaint);} // 9mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (bordWidth, circleX, bordWidth + timeLineB_H, circleX, mPaint); // trim (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (I * 6), (float) (circleX-r * Math. cos (Math. toRadians (90-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-i * 6), mPaint);} // 10mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (30), (float) (circleX-r * Math. cos (Math. toRadians (60), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), mPaint); // 10-11mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX-r * Math. cos (Math. toRadians (90-30-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-i * 6), mPaint);} // 11mPaint. setStrokeWidth (timeLineB_W); canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (60), (float) (circleX-r * Math. cos (Math. toRadians (30), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30), mPaint); // 11-12mPaint.setStrokeWidth (timeLineS_W); for (int I = 1; I <6; I ++) {canvas. drawLine (float) (circleX-r * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX-r * Math. cos (Math. toRadians (90-60-i * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + I * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-60-i * 6), mPaint );}

The scale is used to calculate and draw the coordinates of the starting point one by one. Take the scale of one point as an example,

The coordinates of the center (x, y), radius r, and AB are known to be. This should be a junior high school question. It is a good calculation. Just find the distance from point A to the Y axis and the X axis, the distance from B to Y-axis and X-axis is enough (the most convenient method is to use the forward and backward functions, while Java also provides the algorithm of the forward and backward functions: Math. cos (Math. toRadians (angle value) Because Math. cos transmits radians, so the angle must be converted to radians such as Math. toRadians (60), of course, note that the screen coordinates are different from the quadrants in mathematics, so the AB coordinate must combine the obtained distance value with the circle radius to find the actual coordinates of the point on the screen, and draw a line.

5. Draw the pointer intersection point:

mPaint.setStrokeWidth(2);mPaint.setStyle(Paint.Style.FILL);canvas.drawCircle(circleX,circleX, 10, mPaint);

6. seconds:

Here, we have to think about how the clock is moving. How can we start when we open the application of the clock? It's easy. When initializing a View, you can enable a thread in the View constructor to re-paint the View continuously. The interval is of course one second, which gives you a visual sense that the pointer is rotated once a second, in addition, you need to have a clear idea about the angle of Mutual Association when the second-hand and minute-hand hands rotate. If you don't even understand the relationship between them, read the code, let alone:

While (true) {if (ss = 360) {mm ++; // every second of the needle turns in a circle, the needle goes one cell, one cell 6 degrees, 60 grid in a circle if (mm = 60) {hh ++; // The Sub-needle turns around and the hour hand goes one grid, one grid is 30 degrees, 12 grid if (hh = 12) {hh = 0;} mm = 0;} ss = 0;} postInvalidate (); // redraw try {Thread. sleep (1000); // pause for 1 second} catch (InterruptedException e) {e. printStackTrace ();} ss + = 6; // 360 degrees, with the sub-needle rotating 6 degrees per second}

Seconds:

MPaint. setStrokeWidth (timeLineS_W-5); // sets the second-width mPaint. setColor (pointColor); r = r-timeLineB_H-5; // set the length of the second needle // The minute needle rotates with the second needle if (ss <= 30) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-ss * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (ss * 1), mPaint);} else if (ss <= 60) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(ss-30) * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + (ss-30) * 1), mPaint);} else if (ss <= 90) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(ss-60) * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + (ss-60) * 1), mPaint);} else if (ss <= 120) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (ss-90) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-(ss-90) * 1), mPaint);} else if (ss <= 150) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + (ss-120) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(ss-120) * 1), mPaint);} else if (ss <= 180) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + (ss-150) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(ss-150) * 1), mPaint);} else if (ss <= 210) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(ss-180) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (ss-180) * 1), mPaint);} else if (ss <= 240) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(ss-210) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + (ss-210) * 1), mPaint);} else if (ss <= 270) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(ss-240) * 1), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + (ss-240) * 1), mPaint);} else if (ss <= 300) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (ss-270) * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(ss-270) * 1), mPaint);} else if (ss <= 330) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + (ss-300) * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(ss-300) * 1), mPaint);} else if (ss <= 360) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + (ss-330) * 1), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(ss-330) * 1), mPaint );}

7. Split-needle rotation:

MPaint. setStrokeWidth (timeLineS_W); // set the sub-needle width r = circleX-bordWidth; // restore r = r-timeLineB_H-50; // set the length of the sub-needle // if (mm <= 5) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-mm * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (mm * 6), mPaint);} else if (mm <= 10) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(mm-5) * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + (mm-5) * 6), mPaint);} else if (mm <= 15) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(mm-10) * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + (mm-10) * 6), mPaint);} else if (mm <= 20) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (mm-15) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-(mm-15) * 6), mPaint);} else if (mm <= 25) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + (mm-20) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(mm-20) * 6), mPaint);} else if (mm <= 30) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + (mm-25) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(mm-25) * 6), mPaint);} else if (mm <= 35) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(mm-30) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (mm-30) * 6), mPaint);} else if (mm <= 40) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(mm-35) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (30 + (mm-35) * 6), mPaint);} else if (mm <= 45) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-60-(mm-40) * 6), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (60 + (mm-40) * 6), mPaint);} else if (mm <= 50) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (mm-45) * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(mm-45) * 6), mPaint);} else if (mm <= 55) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (30 + (mm-50) * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(mm-50) * 6), mPaint);} else if (mm <= 60) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (60 + (mm-55) * 6), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-30-(mm-55) * 6), mPaint );}

8. Clockwise rotation:

R = circleX-bordWidth; // revert r = r-timeLineB_H-120; // set the length of the hour hand // the hour hand rotates with the minute hand if (hh <= 3) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-hh * 30), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (hh * 30), mPaint);} else if (hh <= 6) {canvas. drawLine (circleX, circleX, (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (HH-3) * 30), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (90-(HH-3) * 30), mPaint);} else if (hh <= 9) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(hh-6) * 30), (float) (circleX + (r-timeLineS_H) * Math. cos (Math. toRadians (hh-6) * 30), mPaint);} else if (hh <= 12) {canvas. drawLine (circleX, circleX, (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (hh-9) * 30), (float) (circleX-(r-timeLineS_H) * Math. cos (Math. toRadians (90-(hh-9) * 30), mPaint );}

9. Draw the scale value:

// The number mPaint at the write time. setTextSize (26); mPaint. setStrokeWidth (2); mPaint. setColor (bordColor); canvas. drawText ("12", circleX-timeLineB_W, bordWidth + timeLineB_H + 30, mPaint); canvas. drawText ("1", (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60)-20, (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30) + 20, mPaint); canvas. drawText ("2", (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30)-20, (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60) + 20, mPaint); canvas. drawText ("3", getWidth ()-bordWidth-timeLineB_H-20, circleX + 10, mPaint); canvas. drawText ("4", (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30)-20, (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60), mPaint); canvas. drawText ("5", (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60)-15, (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30)-5, mPaint); canvas. drawText ("6", circleX-10, getWidth ()-bordWidth-timeLineB_H-10, mPaint); canvas. drawText ("7", (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (30)-10, mPaint); canvas. drawText ("8", (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30) + 10, (float) (circleX + (r-timeLineB_H) * Math. cos (Math. toRadians (60) + 5, mPaint); canvas. drawText ("9", bordWidth + timeLineB_H + 10, circleX + 10, mPaint); canvas. drawText ("10", (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30) + 10, (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60) + 20, mPaint); canvas. drawText ("11", (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (60), (float) (circleX-(r-timeLineB_H) * Math. cos (Math. toRadians (30) + 25, mPaint );

In the process of doing this, we will find the law, that is, every large scale (30 degrees) is 12 points-1 point, 1 point-2 point ...... the code used for this operation is the same. You only need to change the rotation angle value. The second hand is divided into 360, + 6 at a time, the rotation of a grid is 6 degrees; the minute hand is divided into 60, when the second hand to 360 + 1, the rotation of a grid is 6 degrees; the hour hand is divided into 12, when the split needle reaches 60 hours + 1, the rotation of a grid is 30 degrees; that is, there are * 1, * 6, and * 30 reasons in the calculation, for more information, see the algorithms in the Code, or share them with you if you have better algorithms!

Demo: http://download.csdn.net/detail/baiyuliang2013/8668103