SVG画像初心者です。
ネットのサンブルを参考に、Snap.svgを使いモーフィングアニメーションを作りました。
サンプルは1個のアニメーションですが、同時に2個のアニメーションを動かしたいのです。
同じものをコピペ後、idを変更してもうまくいきません。
<svg id="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" width="110px" height="110px"></svg> <script type="text/javascript" src="snap.svg-min.js"></script> <script> var pathOne = 'M90.355,19.644c21.479,21.479,23.062,54.72,3.535,74.246s-52.767,17.944-74.246-3.535c-21.479-21.479-22.062-55.72-2.535-75.246S68.877-1.834,90.355,19.644z'; var pathTwo = 'M94.891,17.109c19.527,19.527,16.943,51.767-4.535,73.246c-21.479,21.479-54.72,23.062-74.246,3.535C-3.417,74.365-1.834,41.124,19.645,19.645C41.124-1.834,75.365-2.417,94.891,17.109z'; var $svg = Snap('#circle'); var $pth = $svg.path(pathOne).attr({fill:'#FCEE21'}); var isdir = false; function AnimationSvg() { if (!isdir) {$pth.animate({path:pathTwo, fill:'#FCEE21'}, 1000, mina.easeout, AnimationSvg); isdir = true; } else { $pth.animate({path:pathOne, fill:'#FCEE21'}, 1000, mina.easeout, AnimationSvg); isdir = false; } } AnimationSvg(); </script>
AnimationSvg()は動作しているのでしょうか。読まれていないようであれば、SVG読み込みにはそれなりにコストや時間もかかるものと思われますので、document.readyの後にAnimationSvg()をされてみてはどうでしょうか。
回答1件
あなたの回答
tips
プレビュー