複製雪鳥的動畫效果

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/