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
  });

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

anime.js - how do I combine animations with different timings?

javascript