TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

TWaver动画之雷达扫描效果

Posted on 2015-01-26 13:54 TWaver 阅读(2662) 评论(1)  编辑  收藏

UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI。在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣。
CustomScreenRecord5
做安全和监控的项目中经常会进行扫描,一般会用一个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


评论

# re: TWaver动画之雷达扫描效果  回复  更多评论   

2015-01-27 16:39 by 京山游侠
mark,支持一下。

只有注册用户登录后才能发表评论。


网站导航: