snap

将两个轴的最终值或某一特定轴的最终值四舍五入到最接近的指定增量。
如果提供了 Array 作为增量，它将从数组中选择最接近的值。

接受

Number
Array<Number>
A Function that returns any if the above

当使用 Function 定义时，每次容器或目标元素大小调整时，值会自动刷新。
它也可以通过 refresh() 方法手动刷新。

默认

0

snap 示例代码

import { createDraggable } from 'animejs';

createDraggable('.square', {
  container: '.grid',
  snap: 56, // Global to both x and y
  x: { snap: [0, 200] }, // Specific to x 
});

<div class="large grid square-grid">
  <div class="square draggable"></div>
</div>

#draggable-draggable-axes-parameters-snap .demo {
  width: 300px;
}

#draggable-draggable-axes-parameters-snap .grid::before {
  background-size: 100px 56px;
}

#draggable-draggable-axes-parameters-snap .grid::after {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 100px;
  width: 100px;
  height: calc(100% - 1px);
  background-image: repeating-linear-gradient(
    45deg,
    currentColor 0,
    currentColor 1px,
    transparent 1px,
    transparent 6px
  );
  background-size: 8px 8px;
}

#draggable-draggable-axes-parameters-snap .square {
  width: 100px;
  height: 56px;
}

y
modifier