Javascript 同一事件的不同动画

基本的想法是每次我点击飞机都会投下一颗炸弹。移动的飞机和投下的炸弹没问题，我有两个问题：

1） 如果我投下多个炸弹，每个爆炸动画都会在上一个爆炸动画的同一时刻开始。是否有一种方法可以为每个投下的炸弹制作不同的动画

2） 我试图使用

ease（“cubic”）

，但是使用它时有一些错误，所以如果可能的话，你能分享一下如何使用它的技巧吗

let svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height"),
    speed = 0.3,
    movement = 600;
let x = 0;
let y = 50;
let w = 100;
let plane = svg.append("svg:image")
    .attr("x", x)
    .attr("y", y)
    .attr("width", 100)
    .attr("height", 100)
    .attr("xlink:href", "b52js.png");
transition();
svg.on("click", function() {
    var bombingx = plane.attr("x")
    let bomb = svg.append("svg:image")
        .attr("x", bombingx - 2.5 + 50)
        .attr("y", y + 50)
        .attr("width", 15)
        .attr("height", 20)
        .attr("xlink:href", "bomb.png");
    bomb
        .transition()
        .duration(1200)
        .attr("y", height - 10)
        .ease("cubic")
        .on("end", function() {
            let exp = svg.append("svg:image")
                .attr("x", bombingx)
                .attr("y", height - 190)
                .attr("height", 250)
                .attr("width", 150)
                .attr("xlink:href", "giphy.gif");
            d3.timer(function(elapsed) {
                exp.remove()
            }, 1500);
            bomb.remove();
        })
});

---

参考我的评论，让我们在每次单击时随机更改

xlink:href

。尺寸相同、长度较短的GIF优先。或者只是创建同一gif的多个副本并将它们放入阵列中

这是一把小提琴：

让svg=d3.选择（“svg”），
宽度=svg.attr（“宽度”），
高度=svg.attr（“高度”），
速度=0.3，
移动=600；
设x=0；
设y=50；
设w=100；
设g=svg.append（'g'）.attr（'id'，'gg'））
让plane=svg.append（“svg:image”）
.attr（“x”，x）
.attr（“y”，y）
.attr（“宽度”，100）
.attr（“高度”，100）
.attr（“xlink:href，”https://pngimg.com/uploads/plane/plane_PNG5243.png");
/*过渡（）*/
打开（“单击”，函数（）{
var bombingx=平面属性（“x”）
让bomb=svg.append（“svg:image”）
.attr（“x”，爆炸x-2.5+50）
.attr（“y”，y+50）
.attr（“宽度”，15）
.attr（“高度”，20）
.attr（“xlink:href，”https://pngimg.com/uploads/bomb/bomb_PNG38.png");
炸弹
.transition（）
.持续时间（1200）
.attr（“y”，高度-10）
.ease（“立方”）
.每个（“结束”，函数（）{
设exp=g.append（“g:image”）
.attr（“x”，爆炸x）
.attr（“y”，高度-190）
.attr（“高度”，250）
.attr（“宽度”，150）
.attr（“xlink:href”，函数（）{
//让我们创建一个gif链接数组
让gifs=[”https://media.giphy.com/media/xA6evoIAtqSzK/giphy.gif", "https://media.giphy.com/media/rkkMc8ahub04w/giphy.gif", "https://media.giphy.com/media/oe33xf3B50fsc/giphy.gif"]
//返回随机整数的函数
函数randInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
//randInt（3）将返回0、1或2。
//此数字应为gif链接数组中的gif链接数。
返回gifs[randInt（3）]；
});
setTimeout（函数（）{
exp.remove（）；
}, 1500);
炸弹。移除（）；
})
});

必须在转换之前定义炸弹的on event功能。看看这是否有帮助。不，这个解决方案没有解决。你说你需要为每个投下的炸弹制作不同的动画。使用多个GIF，然后在每次单击时随机更改它们的xlink:href如何？好的，这可以是一个选项，但我如何才能做到？我是新来的javascript@claudiogugliotta很高兴我能帮忙。