javascript - anime.js-如何将不同时间的动画组合在一起？

我想在一个元素上应用2种不同的anime.js动画。
但是仅应用最后一个。

https://plnkr.co/edit/p5fRlznLA98056SxDmIh?p=preview

$(document).ready(function() {
  anime({
    targets: ".box",
    duration: 2000,
    loop: true,
    easing: 'easeInOutSine',
    direction: 'alternate',
    translateX: 250
  });
  anime({
    targets: ".box",
    duration: 1000,
    loop: true,
    easing: 'easeInOutSine',
    direction: 'alternate',
    scale: 0.5
  });
});

最佳答案

您可以将两个动画合并为一个，但是alternate方向不能应用于特定的属性。
但是您可以使用关键帧来达到类似的效果：

  anime({
    targets: ".box",
    translateX: 250,
    scale: [
      {value: .5},
      {value: 1}
    ],
    duration: 2000,
    easing: 'easeInOutSine',
    direction: 'alternate',
    loop: true
  });

关于javascript - anime.js-如何将不同时间的动画组合在一起？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47440330/