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。

仅使用括号执行函数，仅使用名称要将其分配给点击处理程序时使用。

在使用中将括号分配给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动画

1 个答案: