完成

animation.finished 已被 animation.then() 方法取代。它返回一个 Promise，该 Promise 在动画完成时解析并执行回调。

语法比较

Anime.js

then() 方法可以直接内联，像这样

waapi.animate(target, {
  translate: '100px',
  duration: 500,
}).then(callback);

或在 async / await 上下文中使用

async function waitForAnimationToComplete() {
  return animate(target, {
    translate: '100px',
    duration: 500,
  });
}

const asyncAnimation = await waitForAnimationToComplete();

WAAPI 等效项

const targets = document.querySelectorAll('.square');
const animations = [];

targets.forEach(($el, i) => {
  animations[i] = $el.animate({
    translate: '100px',
  }, {
    fill: 'forwards',
    duration: 500,
  });
});

Promise.all(
  animations
    .map((animation) => animation.finished)
    .then(() => console.log('completed'))
);

参数

名称	类型
回调	一个 Function，其第一个参数返回动画本身

返回

Promise

import { waapi, utils } from 'animejs';

const [ $value ] = utils.$('.value');

const animation = waapi.animate('.circle', {
  translate: '16rem',
  loop: 2,
  alternate: true,
});

animation.then(() => $value.textContent = 'fulfilled');

<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">promise status</span>
    <span class="value">pending</span>
  </pre>
</div>