步进缓动

步进缓动创建了一种阶梯式动画，在离散时间间隔内跳跃改变数值。

适用于 JavaScript

steps() 函数必须为 js animate() 导入

import { animate, steps } from 'animejs';

animate(target, { x: 100, ease: steps(5) });
// Or with fromStart
animate(target, { x: 100, ease: steps(5, true) });

适用于 WAAPI

waapi animate() 函数使用浏览器原生的步进时间函数

import { waapi } from 'animejs';

waapi.animate(target, { x: 100, ease: 'steps(5)' });
// Or with jump-start
waapi.animate(target, { x: 100, ease: 'steps(5, start)' });

参数

步进函数最多接受 2 个参数 steps(n, fromStart)

名称	类型	信息
步数	`数字`	表示将动画分割成多少个等长步数。必须是正整数。
fromStart ^(可选)	`布尔值`	当 `true` 时，变化发生在每个步进的开始。当 `false` 时，变化发生在每个步进的结束（默认值: `false`）。

示例

名称	编辑器链接
步进开始缓动	在编辑器中打开
步进结束缓动	在编辑器中打开

步进缓动代码示例

import { animate, waapi, cubicBezier } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  ease: steps(4)
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  ease: steps(4, true)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  ease: 'steps(8, end)'
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">steps(4)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">steps(4, true)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">'steps(8, end)'</div>
</div>