圆形动画css3和jquery

Question

有没有办法让动画填充运行平稳？

由此我的意思是说，每秒它都会在20点到40点之间发声，但是你会看到它填满了毫米的毫米，而不是像现在这样跳跃？因为过渡长度作为参数放置了多长时间并不重要，它看起来像是通过跳跃来填充，这不是一个平滑的填充。

这是小提琴

.radial-progress { 
@circle-size: 120px; 
@circle-background: #d6dadc; 
@circle-color: #97a71d; 
@inset-size: 90px; 
@inset-color: #fbfbfb; 
@transition-length: 0.2s; 
@shadow: 6px 6px 10px rgba(0,0,0,0.2); 

margin: 50px; 
width: @circle-size; 
height: @circle-size; 

background-color: @circle-background; 
border-radius: 50%; 
.circle { 
    .mask, .fill, .shadow { 
     width: @circle-size; 
     height: @circle-size; 
     position: absolute; 
     border-radius: 50%; 
    } 
    .shadow { 
     box-shadow: @shadow inset; 
    } 
    .mask, .fill { 
     -webkit-backface-visibility: hidden; 
     transition: -webkit-transform @transition-length; 
     transition: -ms-transform @transition-length; 
     transition: transform @transition-length; 
    } 
    .mask { 
     clip: rect(0px, @circle-size, @circle-size, @circle-size/2); 
     .fill { 
      clip: rect(0px, @circle-size/2, @circle-size, 0px); 
      background-color: @circle-color; 
     } 
    } 
} 
.inset { 
    width:  @inset-size; 
    height:  @inset-size; 
    position: absolute; 
    margin-left: (@circle-size - @inset-size)/2; 
    margin-top: (@circle-size - @inset-size)/2; 

    background-color: @inset-color; 
    border-radius: 50%; 
    box-shadow: @shadow; 
} 

}

http://jsfiddle.net/32Y8U/523/

感谢

Answer 1

将您的间隔设置为1/10当前，然后将20的绘制增量调整为2，并且动画更平滑。

JSFiddle here。

var drawAmount = 0; 
var interval = 0; 
setInterval(
    function(){ 
     interval = interval + 1; 
     if (interval >= 5) { 
      drawAmount = drawAmount - 2; 
      draw(drawAmount); 
     } 
     else { 
       drawAmount = drawAmount + 2; 
       draw(drawAmount); 
     } 
    }, 
    100 /* 10000 ms = 10 sec */ 
); 

Answer 2

你可以使用像jsfiddle这个

$('head style[type="text/css"]').attr('type', 'text/less'); 
less.refreshStyles(); 
window.randomize = function() { 
    $('.radial-progress').attr('data-progress', Math.floor(100)); 
} 

setTimeout(window.randomize, 200); 
$('.radial-progress').click(window.randomize);