SVG 또는 JavaScript 또는 Jquery를 사용하여 30 초 동안 원형 카운트 다운 타이머를 설계하는 방법은 무엇입니까?

Question

SVG 또는 JavaScript 또는 Jquery를 사용하여 30 초 원형 카운트 다운 링을 찾고 있습니다. 아래 stackoverflow 예제에서 발견하고 함수를 사용하여 구현하려고하지만 애니메이션을 사용하여 느낌 링 문제가 있습니다. 이전 링 채우기를 보여주기 때문에 30 초 전에 타이머를 다시 시작할 수 없습니다. 제발 제안 해주세요. 작업 Jsfiddle http://jsfiddle.net/qZrgS/90/

jQuery를

$scope.startTimer = function(){ 
var time = 30; 
var initialOffset = '220'; 
var i = 1 
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time))); 
var interval = setInterval(function() { 
    if (i == time) {  
    clearInterval(interval); 
    return; 
    } 
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time))); 
    i++; 
    }, 1000); 
    }; 

CSS는

svg { 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 
.circle_animation { 
    stroke-dasharray: 220; /* this value is the pixel circumference of the circle */ 
    stroke-dashoffset: 220; 
    transition: all 1s linear; 
} 

HTML을

<svg class="countdownTimer " width="100" height="100" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <circle class="circle" cx="41" cy="41" r="37" stroke-width="1" fill="none" stroke="grey"/> 
     <circle ng-init="startTimer();" id="circle" class="circle_animation" r="34.44" cy="41" cx="41" stroke-width="5" stroke="#0288d1" fill="none"/><circle class="circle" cx="41" cy="41" r="32" stroke-width="1" fill="none" stroke="grey"/><span ng-init="timer();RequestSend();" id="countdowntimer" class="timeNumber">30</span> 
    </g> 
    </svg> 

Answer 1

tansition 사용 JQuery와 애니메이션을 제거

var startTimer = function() { 
    $('.circle_animation').css({'stroke-dashoffset': 220 }); 
    $('.circle_animation').stop(); 
    var time = 30; 
    var initialOffset = '0'; 
    var i = 1; 
    $('.circle_animation').animate({'stroke-dashoffset': initialOffset },30000); 

    }; 

데모 : http://jsfiddle.net/qZrgS/92/