Question

雪鸟（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/

复制雪鸟的动画效果

1 个答案: