不规则缓动

不规则缓动通过在随机点之间进行线性插值来定义动画的节奏。

import { animate, irregular } from 'animejs';

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

参数

irregular 函数最多接收 2 个参数 irregular(steps, randomness)

名称	类型	信息
steps	`数字`	表示要生成的随机步数。必须是正整数。
randomness ^(可选)	`数字`	控制随机变化的幅度。数值越大，步骤之间的跳跃感越强烈（默认值：`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>