jquery - 圆形动画css3和jquery

Question

有没有办法让动画填充运行流畅？

我的意思是说，它滴答作响的每一秒都会从 20 增加到 40，但你会看到它一毫米一毫米地填满圆圈，而不是像现在这样跳跃吗？因为不管我把多长时间作为过渡长度的参数，它看起来仍然是通过跳跃来填充的，而不是平滑的填充。

这是 fiddle

.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 */
);