Анимация конфетти(canvas) с snap.js

Question

Учу с нуля. Но ответа на данный вопрос не нашел

Нашел единственно подходящую анимацию конфетти. Вставил ее в конец HTML, и теперь есть анимация при открытии страницы поверх моего snap.js:

<script type="module">
    import confetti from 'https://cdn.skypack.dev/canvas-confetti';
    confetti({
  particleCount: 100,
  startVelocity: 30,
  spread: 270,
})
  </script>

суть вопроса: как запускать анимацию конфетти

вызывая ее кликом (мне не понятно как вызывать ее через DOM и как запретить ей вызываться без клика)
как сделать эту анимацию внутри моего SVAG.js между группами g0 и g1

var down4 = s.polyline ('48.3,153.5 104.8,120.4 104.8,64.4 48.3,97.5').attr({'fill': '#7F1900'});
var down3_1 = s.polyline ('161.3,148.8 104.8,120.4 104.8,64.4 161.2,93').attr({'fill': '#7F1900'});
var down3 = s.polyline ('100.8,183.8 48.3,153.5 104.8,120.4 161.3,148.8').attr({'fill': '#590D00'});
var g0 = s.group(down3,down3_1,down4);

var down1 = s.path ('M48.3,97.5v56l52.5,30.3v-56.1h-0.1L48.3,97.5L48.3,97.5z').attr({'fill': gradientA});
var down2 = s.path ('M100.8,127.7v56.1l60.5-35v-56L100.8,127.7z').attr({'fill': gradientA});
var g1 = s.group(down1,down2);

Общий смысл - выстрел конфетти из коробки, когда я открываю крышку кликом на кнопку. Это понял, а конфетти не могу осилить. Заранее спасибо!

Answer 1

Вы можете завернуть вызов конфетти в функцию и применить её когда посчитаете необходимым

function makeConf(){confetti({particleCount: 100,startVelocity: 30,spread: 270,});}

Вы можете повесить прослушивание событий на кнопку и запускать функцию только когда будет выполнено нажатие

document.getElementById("click").addEventListener("click", function () {
        makeConf();
});

Чтобы сделать анимацию между g0 и g1 можно: выполнить g0 => вызвать makeConf(); => выполнить g1

БЛОГ НА HUSL

Анимация конфетти(canvas) с snap.js

Ответы (1 шт):