基于百分比的关键帧JS

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

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

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

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

接受

一个 Object，其中

keys are String representing the percentages
values are an Object containing at least one Animatable properties and an optional ease parameter.

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

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>