复制雪鸟的动画效果
复制雪鸟的动画效果
提问于 2013-04-28 06:42:46
雪鸟(http://www.snowbird.com/)在他们的网站上做了一些非常酷的事情。我想用CSS3或JS复制图形中旋转的橙色条形图。看起来他们可能正在使用canvas元素，我以前从未使用过这个元素，但它是开放的。对处理这个问题的最好方法有什么想法吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-28 07:41:47
是的，他们正在使用画布。这是一个起点：
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16257606
复制相关文章
相似问题
腾讯云开发者
