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);

圆形动画css3和jquery

2 个答案: