Разная анимация для одного и того же мероприятия

Основная идея состоит в том, что каждый раз, когда я щелкаю, самолет будет сбрасывать бомбу. Движущийся самолет и сбрасываемая бомба в порядке, у меня две проблемы:

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

Ваша функция при событии для бомбы должна быть определена до перехода. Посмотрим, поможет ли это.

— 03.05.2018 07:16

нет, не решено с помощью этого решения

— 03.05.2018 12:59

Вы сказали, что вам нужны разные анимации для каждой сброшенной бомбы. Как насчет использования нескольких гифок, а затем случайного изменения их xlink: href при каждом щелчке?

— 03.05.2018 14:26

хорошо, это может быть вариант, но как я могу это сделать? я новичок в javascript

— 03.05.2018 15:58

javascript d3.js

02.05.2018 17:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ссылаясь на мой комментарий, давайте изменим xlink:href случайным образом при каждом щелчке. Гифки того же размера и короткой длины предпочтительны. Или просто создайте несколько копий одного и того же gif и поместите их в массив.

Вот рабочий пример:

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

});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<svg width='300' height='300'></svg>

@claudiogugliotta Рад, что смог помочь.

— 08.05.2018 12:52

03.05.2018 16:19