アニメーション用のJavaScript再生ボタン

Question

HTMLにリンクされた外部ファイルにあるRaphaelを使用したJavascriptアニメーションがあります。私は、ページが読み込まれるとすぐにアニメーションを開始するのではなく、アニメーションをクリックするようにしたいと思います。

window.addEventListener("load",function(){ 
    var paper = new Raphael(document.getElementById("animation"), 800, 600); 
    var img = paper.image("backimg.jpg",0,0,950,600); 
    img.attr({"clip-rect":"0,0,800,600"}); 
    img.addEventListener("click",function() { 
     var squ = paper.rect(-100,50,100,100); 
     squ.attr("fill", "#ffffff"); 

     squ.animate({transform: "T450,0"}, 2000, "ease-out", explode); 
     var cir2 = paper.rect(400,100,1,1); 

     function explode(){ 
     cir2.attr("fill","#f00"); 
     cir2.animate({ transform:'s100' }, 2000); 
     } 
    }); 
}); 

Answer 1

コードを提供していただきありがとうございます。 Raphael JSライブラリではSVGを使用しているため、クリックイベントリスナーを親ノード（この場合はidがanimationの要素）に設定することが唯一の解決策です。

は、コードスニペットを調べます

//https://www.w3schools.com/css/img_fjords.jpg 
 

 
window.addEventListener("load",function(){ 
 
\t \t var animation = document.getElementById('animation'); 
 
    var paper = new Raphael(animation, 800, 600); 
 
    var img = paper.image("https://www.w3schools.com/css/img_fjords.jpg",0,0,950,600); 
 
    img.attr({"clip-rect":"0,0,800,600"}); 
 
    animation.addEventListener("click",function() { 
 
     var squ = paper.rect(-100,50,100,100); 
 
     squ.attr("fill", "#ffffff"); 
 

 
     squ.animate({transform: "T450,0"}, 2000, "ease-out", explode); 
 
     var cir2 = paper.rect(400,100,1,1); 
 

 
     function explode(){ 
 
     cir2.attr("fill","#f00"); 
 
     cir2.animate({ transform:'s100' }, 2000); 
 
     } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script> 
 
<div id="animation"></div>

うまくいけば、これは便利です。

Answer 2

あなたはそれが次のようになります。ボタンを使ってそれをやってする場合：myAnimationは、アニメーションを実行する関数の名前です

<button onclick="myAnimation()">Play Animation</button> 

。