不规则缓动

不规则的缓动使用线性插值在随机点之间定义动画的节奏。

import { animate, irregular } from 'animejs';

animate(target, { x: 100, ease: irregular(10, 1.5);

参数

这个不规则函数最多接受 2 个参数 irregular(steps, randomness)：

名称	类型	信息
steps	`Number`	表示要生成的随机步数。必须是正整数。
randomness ^(opt)	`Number`	控制随机变化的振幅。值越高，步骤之间的跳跃越明显（默认值：`1`）。

例子

名称	编辑器链接
轻微不规则缓动	在编辑器打开
重不规则缓和	在编辑器打开

不规则缓动代码示例

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

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, .5)
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, 1)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: irregular(10, 2)
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, .5)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">irregular(10, 2)</div>
</div>