首页风格
门户
博客

GBin1分享使用Raphaël类库实现的超酷动画技能图表

发布时间:2011/08/09     编译:Terry li - GBin1.com       原文:tympanus.net

GBin1分享使用Raphaël类库实现的超酷动画技能图表

在这篇文章中GBin1将介绍如何使用Raphaël这个js类库构建图表。Raphaël是一个非常小的js类库用于构建丰富的矢量图形。

这个图形的创意非常简单,我们使用一些圆弧来展示一个技能百分比数值到一个主圆周中,当我们将鼠标挪到对应的圆弧,将显示对应的技能百分比并且产生对应特效。

GBin1在线演示

HTML标签

HTML代码结构包括一个命名为"get"的主容器标签。这个容器包括了所有的用于展现图形的数据。然后我们创建一个新的名字叫"diagram"的div元素,这个元素用来作为生成圆弧的容器,代码如下:

<div id="diagram"></div>
<div class="get">
  <div class="arc">
    <span class="text">jQuery</span>
    <input type="hidden" class="percent" value="95" />
    <input type="hidden" class="color" value="#97BE0D" />
  </div>
  <div class="arc">

    <span class="text">CSS3</span>
    <input type="hidden" class="percent" value="90" />
    <input type="hidden" class="color" value="#D84F5F" />
  </div>
  <div class="arc">
    <span class="text">HTML5</span>
    <input type="hidden" class="percent" value="80" />
    <input type="hidden" class="color" value="#88B8E6" />

  </div>
  <div class="arc">
    <span class="text">PHP</span>
    <input type="hidden" class="percent" value="53" />
    <input type="hidden" class="color" value="#BEDBE9" />
  </div>
  <div class="arc">
    <span class="text">MySQL</span>
    <input type="hidden" class="percent" value="45" />
    <input type="hidden" class="color" value="#EDEBEE" />
  </div>
</div>

CSS样式定义

在这个演示的样式表我们只定义如下:

1. 隐藏class为'get'的元素

2. 设置id为'diagram'的元素宽度和高度

.get {
  display:none;
}

#diagram {
  float:left;
  width:600px;
  height:600px;
}

Javascript

主要方法是创建一个新的Raphaël对象(变量为'r'),然后画出我们到一个圆形,使用我们指定的半径'rad'。

然后我们在创建的Raphaël对象中创建一个新的圆形。我们使得圆形居中,并且添加一些文字。

var o = {
  init: function(){
    this.diagram();
  },
  random: function(l, u){
    return Math.floor((Math.random()*(u-l+1))+l);
  },
  diagram: function(){
    var r = Raphael('diagram', 600, 600),
      rad = 73;

    r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

    var title = r.text(300, 300, 'Skills').attr({
      font: '20px Arial',
      fill: '#fff'
    }).toFront();

  }
}

接下来我们更深入一些。

我们将扩展Raphaël对象,使用一些自定义的属性:

  • alpha - 圆弧的度数
  • random - 指定的随机数
  • sx,sy - 起始的位置
  • x,y - 结束位置
  • path
var o = {
  init: function(){
    this.diagram();
  },
  random: function(l, u){
    return Math.floor((Math.random()*(u-l+1))+l);
  },
  diagram: function(){
    var r = Raphael('diagram', 600, 600),
      rad = 73;

    r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

    var title = r.text(300, 300, 'Skills').attr({
      font: '20px Arial',
      fill: '#fff'
    }).toFront();

    r.customAttributes.arc = function(value, color, rad){
      var v = 3.6*value,
        alpha = v == 360 ? 359.99 : v,
        random = o.random(91, 240),
        a = (random-alpha) * Math.PI/180,
        b = random * Math.PI/180,
        sx = 300 + rad * Math.cos(b),
        sy = 300 - rad * Math.sin(b),
        x = 300 + rad * Math.cos(a),
        y = 300 - rad * Math.sin(a),
        path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
      return { path: path, stroke: color }
    }

    $('.get').find('.arc').each(function(i){
      var t = $(this),
        color = t.find('.color').val(),
        value = t.find('.percent').val(),
        text = t.find('.text').text();

      rad += 30;
      var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

      z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
          this.toFront();
        title.animate({ opacity: 0 }, 500, '>', function(){
          this.attr({ text: text + 'n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
        });
            }).mouseout(function(){
        this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
    });
  }
}

然后我们取得所有需要的数据,例如,百分比,弧度颜色,及其文字。我们给每一个弧度添加半径数值最后创建一个新的圆弧path。最后一步我们添加鼠标hover的动画效果。当鼠标悬浮到圆弧时,标题会改变(即圆圈里的内容)。同时我们让圆弧变大一些。

今天我们介绍了 Raphaël的类库,如果大家有兴趣,可以去类库的网站查看更多的例子: Raphaël主站

原文来自:GBin1分享使用Raphaël类库实现的超酷动画技能图表

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐