步进缓动

步进缓动会创建一个在离散间隔之间跳跃数值的步进动画。

适用于 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

The waapi animate() 函数使用浏览器原生的 steps 时间函数：

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)' });

参数

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

名称	类型	信息
steps	`Number`	表示将动画划分成等份的步数。必须是正整数。
fromStart ^(opt)	`Boolean`	当 `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>