Question

我使用Raphael进行Javascript动画，该动画位于链接到HTML的外部文件中。我希望让用户点击动画来启动它，而不是在加载页面后立即启动动画。

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

如果你想用按钮做它，它应该是这样的：

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

其中 myAnimation 是运行动画的函数的名称。

Answer 2

感谢OP提供代码。 Raphael JS库使用SVG，因此唯一适用的解决方案是将click事件监听器设置为父节点，在这种情况下，它是id为animation的元素。

检查代码段：

//https://www.w3schools.com/css/img_fjords.jpg

window.addEventListener("load",function(){
		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>

希望这很有帮助。

Javascript播放动画按钮

2 个答案: