基于百分比的关键帧 JS

按动画总持续时间的百分比定义位置，以此对多个可动画属性进行排序。

此语法与 CSS 的 @keyframes 语法非常相似，且仅支持对每个独立关键帧的 ease（缓动）参数进行控制。

第一个关键帧定义了补间动画的起始值。

keyframes: {
  '25%' : { x: 100, y: 50, ease: 'out' },
  '50%' : { x: 200, y: 75, },
}

接受

一个 Object（对象），其中：

keys（键）是表示百分比的 String（字符串）
values（值）是一个包含至少一个可动画属性和一个可选的 ease（缓动）参数的 Object（对象）。

基于百分比的关键帧代码示例

import { animate } from 'animejs';

animate('.square', {
  keyframes: {
    '0%'  : { x: '0rem', y: '0rem', ease: 'out' },
    '13%' : { x: '0rem', y: '-2.5rem', },
    '37%' : { x: '17rem', y: '-2.5rem', scale: .5 },
    '63%' : { x: '17rem', y: '2.5rem', scale: .5 },
    '87%' : { x: '0rem', y: '2.5rem', scale: 1 },
    '100%': { y: '0rem', ease: 'in' }
  },
  rotate: { to: 360, ease: 'linear' },
  duration: 3000,
  ease: 'inOut', // ease applied between each keyframes if no ease defined
  playbackEase: 'ouIn(5)', // ease applied accross all keyframes
  loop: true,
});

<div class="medium row">
  <div class="square"></div>
</div>