SVGプログレスバーアニメーション（開始円付き）

Question

円をアニメーション化することは可能ですか？私は2つのラインのパスと円をマージし、同じ

$(document).ready(function(){ 
 
    
 
    var svgPath = document.getElementById('heart'); 
 
    
 
var path = new ProgressBar.Path(svgPath, { 
 
    duration: 3000 
 
}); 
 
path.animate(-1, { 
 
\t easing: 'easeOutBounce', 
 
    duration: 2000 
 
}, function() { 
 
    console.log('Animation has finished'); 
 
}); 
 
    }); 
 

#container { 
 
\t width:220px; 
 
    position: relative; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<div id="container" style="width:200px;height:200px;"> 
 

 
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.08 100" width="500" height="500"> 
 
    <path d="M50,2A48,48,0,1,1,2,50,48,48,0,0,1,50,2" fill-opacity="0" stroke="#eee"/> 
 
    <circle cx="95.87" cy="64.33" r="2.66"/> 
 
    <path id="heart" fill-opacity="0" d="M95.6,65.16A48,48,0,1,1,50,2" fill="none" stroke="#000" /> 
 
    </svg> 
 

 

 
    </div>

Answer 1

のためのトランジションを適用code.can以下、そのライブラリを使用すると、呼び出されたstep機能を渡すことができますしようとしてい

アニメーションのすべてのステップで使用できます。

これを使って、value()関数から返された値と、便利なSVGパス関数をいくつか使用すると、進捗線の終わりの座標を計算できます。これらの座標を使用して円を配置することができます。以下

デモ：

$(document).ready(function(){ 
 
    
 
    var svgPath = document.getElementById('heart'); 
 
    
 
    var shape = new ProgressBar.Path(svgPath); 
 
    var pathLen = shape.path.getTotalLength(); 
 

 
    shape.animate(-1, { 
 
\t easing: 'easeOutBounce', 
 
    duration: 2000, 
 
    attachment: document.getElementById("circle"), 
 
    step: function(state, shape, attachment) { 
 
     // 'attachment' is a DOM reference to the circle element 
 
     var val = 1 + shape.value(); // buggy value() function? 
 
     var endPosition = shape.path.getPointAtLength(val * pathLen); 
 
     attachment.cx.baseVal.value = endPosition.x; 
 
     attachment.cy.baseVal.value = endPosition.y; 
 
    } 
 
    }, function() { 
 
    console.log('Animation has finished'); 
 
    }); 
 

 
});

#container { 
 
    width:220px; 
 
    position: relative; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script> 
 
<div id="container" style="width:200px;height:200px;"> 
 

 
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.08 100" width="500" height="500"> 
 
    <path d="M50,2A48,48,0,1,1,2,50,48,48,0,0,1,50,2" fill-opacity="0" stroke="#eee"/> 
 
    <circle id="circle" cx="95.87" cy="64.33" r="2.66"/> 
 
    <path id="heart" fill-opacity="0" d="M95.6,65.16A48,48,0,1,1,50,2" fill="none" stroke="#000" /> 
 
    </svg> 
 

 

 
    </div>

注ライブラリがバグを持っているようだという。ドキュメントによると、value()関数は、0と1の間の値を返すと想定されています。ただし、0と-1の間の値を返します。さらにそれはバックツーフロントです。正しい進捗値を得るには、shape()の値に1を追加しなければなりませんでした。このバグを修正するライブラリの新しいバージョンに更新する場合は、このコードを変更する必要があります。