anime.js - 如何将动画与不同的时间相结合？

Question

我想在元素上应用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
  });
});

Answer 1

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

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