跳过主要内容

Snap

内部插件是什么?

SnapPlugin 是一个内部插件,它会它会自动包含在 GSAP 的核心中,不需要通过 gsap.registerPlugin() 加载。.

你可以将内部插件看作是 GSAP 的一部分。

描述

SnapPlugin 允许补间动画“捕捉”到给定数组中的最近值或指定增量。本质上,在补间过程中(实时地,而非只针对最终值),它会给任意属性添加一个修饰符,并实现以下列出的其中一种捕捉行为。

举例来说:

// snap all of the properties in the comma-delimited list ("x,y" in this case) to the closest whole number:
gsap.to(".class", {
x: 1000,
y: 250,
snap: "x,y",
});

// snap to an increment:
gsap.to(".class", {
x: 1000,
snap: {
x: 20, // x snaps to the closest increment of 20 (0, 20, 40, 60, etc.)
},
});

// snap to the closest value in an array:
gsap.to(".class", {
x: 1000,
snap: {
x: [0, 50, 150, 500], // x snaps to the closest value in this array
},
});

// snap to a value in an array, but only when it's within a certain distance/radius of one of those values:
gsap.to(".class", {
x: 1000,
snap: {
x: { values: [0, 50, 150, 500], radius: 20 }, // x snaps to the closest value in the array but only when it's within 20 pixels of it.
},
});

你可以定义任意多个 snap 属性。

常见问题

如何在我的项目中引入这个插件?

只需加载 GSAP 的核心库即可 - SnapPlugin 会被自动包含!

我需要注册 SnapPlugin 吗?

不需要。SnapPlugin 已内置在核心库中,无需注册。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗