jquery - 复制雪鸟的动画效果

Question

Snowbird ( http://www.snowbird.com/ ) 在他们的网站上做了一些很酷的事情。我喜欢的一件事是当您将鼠标悬停在右侧的黑色面板上时，另一个面板会翻转，然后图表向上计数，橙色图形“旋转”到其最终位置。我想用 CSS3 或 JS 复制图形中旋转的橙色条。看起来他们可能正在使用canvas我以前从未使用过的元素，但会对它持开放态度。关于处理这个问题的最佳方法有什么想法吗？

谢谢！

Answer 1

是的，他们为此使用了画布。这是一个起点：

var c = document.getElementById('c').getContext('2d');
var duration = 700; // duration of animation
var delay = 10; // interval
var stepT = duration/delay; // steps needed
var cT = 0; // step counter

c.fillStyle = 'white'
var end = 58; // endpoint in percent

var int = setInterval(function(){
    c.fillRect(0,0,100,100);
    c.strokeStyle = 'orange';
    c.beginPath();
    c.arc(50, 50, 40, -.5*Math.PI, (-.5*Math.PI + 2*Math.PI / 100 * end * cT / stepT));
    c.lineWidth = 10;
    c.stroke();
    if(++cT>stepT){
        clearInterval(int);   
    }
},delay);

演示：http: //jsfiddle.net/SCk6B/

---

带有多个圆圈的版本 2：

<canvas class="circle" data-duration="700" data-end="75" width="100" height="100"></canvas>
<canvas class="circle" data-duration="200" data-end="50" width="100" height="100"></canvas>
<canvas class="circle" data-duration="500" data-end="20" width="100" height="100"></canvas>

$('.circle').each(function(){
    var duration = $(this).data('duration') || 700; // duration of animation
    var delay = 10; // interval
    var stepT = duration/delay; // steps needed
    var cT = 0; // step countervar
    var end = $(this).data('end') || 58; // endpoint in percent
    var int = null;
    var c = this.getContext('2d');
    c.fillStyle = 'white';
    c.lineWidth = 10;
    c.strokeStyle = 'orange';
     $(this).bind('mouseenter',function(){
        int = setInterval(function(){
            c.fillRect(0,0,100,100);
            c.beginPath();
            c.arc(50, 50, 40, -.5*Math.PI, (-.5*Math.PI + 2*Math.PI / 100 * end * cT / stepT));
            c.stroke();
            if(++cT>stepT){
                clearInterval(int);   
            }
        },delay);
    }).bind('mouseleave',function(){
        clearInterval(int);
        c.fillRect(0,0,100,100);
        cT=0;
    });
});

http://jsfiddle.net/t3BPP/