snap()

将 Number（数值）舍入到指定的 increment（增量），或创建一个带有预定义 increment 参数的 snapping（吸附）Function（函数）。
如果提供的增量是一个 Array（数组），它将从数组中选择最接近的值。

const snappedValue = utils.snap(value, increment);
const snapperFunction = utils.snap(increment);

参数

名称	接受
value ^(可选)	`数字`
increment（增量）	`Number`（数值） \| `Array<Number>`（数值数组）

如果提供了数值，则返回一个 Number；否则返回一个可链式调用的实用工具函数，用于将数值吸附到最近的 increment 或数组值。

const snapTo10 = utils.snap(10);
snapTo10(94);  // 90
snapTo10(-17); // -20

const snapToArray = utils.snap([0, 50, 100]);
snapToArray(30);  // 50
snapToArray(75);  // 100
snapToArray(-10); // 0

const clampAndSnap = utils.clamp(0, 100).snap(30);
clampAndSnap(72.7523); // 60
clampAndSnap(120.2514); // 90

snap() 代码示例

import { animate, utils } from 'animejs';

animate('.normal', {
  rotate: '1turn',
  duration: 3000,
  loop: true,
  ease: 'inOut',
});

animate('.snapped', {
  rotate: '1turn',
  modifier: utils.snap(.25), // Used as a modifier
  duration: 3000,
  loop: true,
  ease: 'inOut',
});

<div class="x-large spaced-evenly row">
  <div class="col">
    <div class="clock normal"></div>
    <div class="label">normal</div>
  </div>
  <div class="col">
    <div class="clock snapped"></div>
    <div class="label">snapped (.25)</div>
  </div>
</div>