基于百分比的关键帧 V4 JS

序列化多个可动画属性，其位置由动画总持续时间的百分比定义。

此语法与 CSS @keyframes 语法非常相似，并且仅公开对每个单独关键帧的ease 参数的控制。

第一个关键帧定义 tween 的from 值。

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

接受

一个 Object，其中

keys 是表示百分比的 String
values 是一个 Object，其中包含至少一个可动画属性和一个可选的ease 参数。

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

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>