如何首先给 Anime.js 元素一个打开动画，然后是一个循环动画？答案

【问题标题】：How do I give an Anime.js element an opening animation first, and then a looping animation?如何首先给 Anime.js 元素一个打开动画，然后是一个循环动画？
【发布时间】：2020-09-22 07:21:55
【问题描述】：

我正在尝试使用 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 可以做到吗？如何实现？

提前致谢！

【问题讨论】：

标签： javascript css animation anime.js

【解决方案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'},
    ],
  })));

【讨论】：

【解决方案2】：

这可以通过使用内部和外部<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'
});

【讨论】：