我正在嘗試用Anime.js制作一個對象的動畫。它有一個播放一次的開始動畫(旋轉(zhuǎn)),然后它應(yīng)該有一個不同的旋轉(zhuǎn)動畫，無限循環(huán)。我把這兩個動畫放在一個時間線中，但是它不會循環(huán)第二個動畫。

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這可能嗎，怎么可能？

提前感謝！

這是不可能做到的時間線，時間線只是循環(huán)，當(dāng)你通過循環(huán):真對它的創(chuàng)建。從源代碼來看，添加對象中的循環(huán)屬性似乎被忽略了。

然而，你可以使用承諾。動漫實例完成:

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'},
    ],
  })));

這可以通過使用內(nèi)部和外部& ltdiv & gt。將循環(huán)動畫放在其中一個上，將開始動畫放在另一個上。

<div id="outer">
  <div id="inner">
    Foo
  </div>
</div>

// opening animation
anime({
  targets: '#outer',
  scale: [0, 1],
  loop: false
});

// looping animation
anime({
  targets: '#inner',
  rotate: [-5, 5],
  loop: true,
  direction: 'alternate'
});

只是想跟進@WerWet的回答，你也可以用時間軸來做這個。在我的例子中，我對一個SVG應(yīng)用了一系列效果，并在頁面加載時制作了文本動畫，但希望文本在完成加載動畫后無限地滑動。以下是我所做的...

(我正在使用react，因此animation()在useEffect鉤子中被調(diào)用)

const animation = () => {
  const timeline = anime.timeline()
    timeline.add({
    targets: ".path",
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: "easeInOutSine",
    duration: 1500,
    delay: function (el, i) {
      return i * 250
    },
  })
  timeline.add({
    targets: ".logo-main",
    duration: 20,
    skewX: 40,
    easing: "easeInOutQuad",
  })
  timeline.add({
    targets: ".logo-main",
    duration: 20,
    skewY: 40,
    easing: "easeInOutQuad",
  })
  timeline.add({
    targets: ".logo-main",
    duration: 20,
    skewX: -40,
    easing: "easeInOutQuad",
  })
  timeline.add({
    targets: ".logo-main",
    duration: 70,
    skewX: 0,
    skewY: 0,
    easing: "easeInOutQuad",
  })
  timeline.add({
    targets: ".logo-main",
    duration: 70,
    opacity: 0,
    easing: "easeInOutQuad",
  })
  timeline.add({
    targets: ".logo-main",
    filter: "drop-shadow(0px 0px 20px rgba(43, 251, 251, 1))",
    opacity: 1,
    easing: "easeInOutSine",
    duration: 1000,
    direction: "alternate",
  })
  timeline.add({
    targets: ".letter",
    opacity: [0, 0.75],
    translateY: [-600, 0],
    easing: "easeOutExpo",
    duration: 1400,
    delay: (el, i) => 50 * (i + 1),
    endDelay: 500,
  })

  timeline.play()
  timeline.finished.then(() => {
    const timelineText = anime.timeline({ loop: true })
    timelineText.add({
      targets: ".letter",
      duration: 70,
      skewX: 70,
      easing: "easeInOutQuad",
    })
    timelineText.add({
      targets: ".letter",
      duration: 70,
      skewX: 0,
      easing: "easeInOutQuad",
    })
    timelineText.add({
      targets: ".letter",
      duration: 7000,
    })
  })
}

希望這有所幫助！