javascript - 如何首先为 Anime.js 元素提供打开动画，然后再提供循环动画？

Question

我正在尝试使用 Anime.js 为对象设置动画。它有一个播放一次的打开动画(旋转)，之后它应该有一个无限循环的不同旋转动画。我将这两个动画放在时间轴中，但它不会循环第二个动画。

Javascript:

var tl = anime.timeline({

  easing: 'easeOutExpo',
  targets: '.fles',
});

tl

.add({
  rotate: 20,
  duration: 750,
  loop: false,
})

.add({
    duration: 6000,
    loop: true,
    easing: 'easeInOutQuad',
    keyframes: [
        {rotate: '+=1'},
        {rotate: '-=1'},
        {rotate: '+=1.5'},
        {rotate: '-=2'},
        {rotate: '+=1.5'},
    ],
})

这可以用 Anime.js 实现吗？如何实现？

提前致谢!

Answer 1

不可能用时间线来做到这一点，当你在创建时间线时传递 loop: true 时，时间线只会循环。从源代码来看，添加对象中的 loop 属性似乎被忽略。

但是您可以在 anime 实例上使用 Promise .finished:

anime({/*first animation*/}).finished.then(()=>
anime({/*next animation*/}))

并模仿继承属性:

let base = {
  easing: 'easeOutExpo',
  targets: '.fles',
}

anime(Object.assign({}, base, {
  rotate: 20,
  duration: 750,
  loop: false,
}))
.finished.then(()=>
  anime(Object.assign({}, base, {
    duration: 6000,
    loop: true,
    easing: 'easeInOutQuad',
    keyframes: [
      {rotate: '+=1'},
      {rotate: '-=1'},
      {rotate: '+=1.5'},
      {rotate: '-=2'},
      {rotate: '+=1.5'},
    ],
  })));