吸附
将两个轴或特定轴的最终值四舍五入到指定的增量。
如果提供一个 Array(数组)作为增量,它将从数组中选择最接近的值。
接受
数字Array<Number>- 一个返回上述任意类型的
Function(函数)
当使用 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;
}