时间戳

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

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

问题描述

我正在尝试使用 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 可以做到这一点吗？怎么做？

提前致谢！

标签： javascriptcssanimationanime.js

解决方案

用时间线是不可能的，时间线只是在你传递loop: true它的创建时循环。从源代码看来，loop添加对象中的属性被忽略了。

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

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

推荐阅读