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 已内置在核心库中,无需注册。