UI和功能是好的产品的两个重要因素，很多产品往往只注重功能上的设计，而忽略了UI。在这个“看脸”的时代，就算产品的功能很强大，如果UI跟不上步伐，你的产品都会在客户心中大打折扣。
做安全和监控的项目中经常会进行扫描，一般会用一个gif图片来表示软件正在进行扫描，但是如果想更换这个图标的样式，就需要美工重新做图。TWaver提供了动画效果，如果对图标的动画样式不满意，可以通过简单的更改程序来实现，避免了美工的二次返工，提高了效率。切入正题，看我们怎么实现一个动画的雷达扫描图，首先注册一个图片，用HTML5的canvas画了一个静态的雷达图，如果你熟悉TWaver的话，下边这段代码应该不难。如果不熟悉的话，可以参考产品文档自定义绘制（draw）这一节的内容。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
twaver.Util.registerImage(‘radar‘, { v: [ { shape: ‘draw‘, draw: function (ctx, data, view) { var canvas = this.canvas, g = this.g, gradient = this.gradient, diameter = Math.floor(data.getWidth() * view.getZoom()), radius = diameter / 2, hueStart = 120, hueEnd = 170, hueDiff = Math.abs(hueEnd - hueStart), width = diameter, height = diameter; if (!canvas) { this.canvas = canvas = document.createElement(‘canvas‘); } if (width !== canvas.width || height !== canvas.height) { canvas.width = diameter; canvas.height = diameter; this.g = g = canvas.getContext(‘2d‘); this.gradient = gradient = g.createLinearGradient(radius, 0, 0, 0); gradient.addColorStop(0, ‘hsla(‘ + hueStart + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 1)‘); gradient.addColorStop(1, ‘hsla(‘ + hueEnd + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 0.1)‘); } g.globalCompositeOperation = ‘destination-out‘; g.fillStyle = ‘hsla(0, 0%, 0%, 0.1)‘; g.fillRect(0, 0, width, height); g.globalCompositeOperation = ‘lighter‘; var i; for (i = 0; i < 4; i++) { g.beginPath(); g.arc(radius, radius, ((radius - 1) / 4) * (i + 1), 0, Math.PI * 2, false); g.strokeStyle = ‘hsla(‘ + (hueEnd - (i * (hueDiff / 4))) + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, 0.1)‘; g.lineWidth = 3; g.stroke(); }; g.beginPath(); g.moveTo(radius - 1, 2); g.lineTo(radius - 1, height - 2); g.moveTo(2, radius - 1); g.lineTo(width - 2, radius - 1); g.strokeStyle = ‘hsla(‘ + ((hueStart + hueEnd) / 2) + ‘, ‘ + 50 + ‘%, ‘ + 40 + ‘%, .03)‘; g.stroke(); g.save(); g.translate(radius, radius); g.rotate(data.getClient(‘angle‘));
g.beginPath(); g.moveTo(0, 0); g.arc(0, 0, radius, -0.0349, 0.0349, false); g.closePath(); g.fillStyle = gradient; g.fill();
g.restore(); ctx.scale(1 / view.getZoom(), 1 / view.getZoom()); ctx.drawImage(canvas, -width / 2, -height / 2); } } ] }); |
接下来给这个雷达图设置一个动态的效果，让雷达图不断的扫描。下边的这段代码设置了雷达指针的扫描角度，持续时间：
|
1
2
3
4
5
6
7
8
9
10
|
new twaver.Animate({ source: node, attr: ‘C@angle‘, from: 0, to: Math.PI * 2, dur: 4000, repeat: Number.POSITIVE_INFINITY, reverse: false }).play();} |
这样一个简单的雷达动画效果就出来了，是不是很简答，如果对这个效果用兴趣的，可以发邮件索取源代码，附上邮箱：jack.shangguan@servasoft.com
原文地址：http://blog.csdn.net/twaver/article/details/43151749
