css 如何首先为Anime.js元素提供一个打开动画,然后再提供一个循环动画?

7rfyedvj  于 2023-06-07  发布在  其他
关注(0)|答案(3)|浏览(301)

我正在尝试使用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可以做到这一点吗?如何做到?
先谢谢你了!

klsxnrf1

klsxnrf11#

这是不可能做到这一点与时间线,时间线只是循环时,你传递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'},
    ],
  })));
xqkwcwgp

xqkwcwgp2#

这可以通过使用内部和外部<div>来解决。在其中一个上放置循环动画,在另一个上放置打开动画。

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

ztigrdn83#

只是想跟进@WerWet的答案,你也可以用时间表来做这件事。在我的例子中,我对SVG应用了一系列效果,并在页面加载时对文本进行动画处理,但希望文本在完成加载动画后无限期地出现故障。我是这么做的...
(我使用react,因此在useEffect钩子中调用了animation()

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

希望这有帮助!

相关问题