Question

基本的想法是，每次我点击飞机都会掉落炸弹。移动的飞机和掉落的炸弹都没关系，我有两个问题：

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();
        })
});

Answer 1

参考我的评论，让我们在每次点击时随机更改for (const [key, value] of Object.entries(hospitalLocations)) console.log(value);。具有相同尺寸和短长度的Gif是优选的。或者只是创建相同gif的多个副本并将它们放入数组中。

这是一个小提琴：

＆＃13;

xlink:href

＆＃13;

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 g = svg.append('g').attr('id', 'gg')
let plane = svg.append("svg:image")
  .attr("x", x)
  .attr("y", y)
  .attr("width", 100)
  .attr("height", 100)
  .attr("xlink:href", "https://pngimg.com/uploads/plane/plane_PNG5243.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", "https://pngimg.com/uploads/bomb/bomb_PNG38.png");
  bomb
    .transition()
    .duration(1200)
    .attr("y", height - 10)
    .ease("cubic")
    .each("end", function() {
      let exp = g.append("g:image")
        .attr("x", bombingx)
        .attr("y", height - 190)
        .attr("height", 250)
        .attr("width", 150)
        .attr("xlink:href", function() {
          // Lets create an array of gif links
          let 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"]

          // A function to return random integers
          function randInt(max) {
            return Math.floor(Math.random() * Math.floor(max));
          }


          //randInt(3) will return 0,1 or 2. 
          //This number should be the number of gif links you have in your gif link array.

          return gifs[randInt(3)];
        });

      setTimeout(function() {
        exp.remove();
      }, 1500);
      bomb.remove();
    })

});

＆＃13;

同一事件的不同动画

1 个答案: