如何使用onclick播放多个animejs动画

Question

我有一个按钮，当我点击它时我想同时播放两个动画（如果可能的话，它们之间间隔 1 秒）。动画是使用 animeJS 制作的。

按钮代码<button type="button" id="button2">Press to start</button>

动画脚本

    var animate1 = anime({
  targets: '#button2',
  //top: '70%',
  translateY: 500,
  autoplay: false,
  easing: 'spring(1, 80, 10, 0)'
});

var animate2 = anime({
targets: '#content',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});

function animateAll() {
  animate1.restart;
  animate2.restart;
}

document.querySelector('#button2').onclick = animateAll();

Answer 1

function animateAll() {
  animate1.restart();
  animate2.restart();
}

在执行 animateAll 时使用 animate.restart() 而不是 animate.restart。

Only use parenthesis to execute the function ,use only name of function when you want to assign it to a click handler.

当使用将它分配给 onclick 处理程序时，您需要从 animateAll 中删除括号。

   document.querySelector('#button2').onclick = animateAll;

新代码应该是：-

   function animateAll() {
  animate1.restart();
  animate2.restart();
}

document.querySelector('#button2').onclick = animateAll;

您也可以使用 animate1.play(),animate2.play() 代替 animate1.restart(),animate1.play()

如何使用onclick播放多个animejs动画

How to make multiple animejs animations play using onclick

javascript

anime.js