修改器

描述​

几乎为任意属性定义一个“修饰符”函数。该修饰符拦截 GSAP 在每次更新（“tick”）时通常要应用的值，将其作为第一个参数传入你的函数，让你运行自定义逻辑后返回一个新的值供 GSAP 应用。这对于类似贴靠、限制、循环或其他动态效果的任务非常适用。

值, 目标​

每个修饰符函数会接收到两个参数：

1. value (数值 | 字符串) - 即将被应用的值，来自常规补间动画。这通常是一个数字，但也可以是基于属性需求的字符串。例如，如果你正在对x属性进行动画处理，它将是一个数字，left如果你正在对"212px"属性进行动画处理，它可以是类似boxShadow这样的值，"10px 5px 10px rgb(255,0,0)".

2. target (对象) - 目标对象本身。

例如，根据另一个对象的x改变一个对象的y或者根据其移动位置改变rotation。以下是一些帮助你熟悉语法的例子。direction it is moving. Below are some examples that will help you get familiarized with the syntax.

贴靠旋转​

下方的补间动画设置了 360 度的旋转，但是修饰符函数强制将值跳转到最近的 45 度增量。注意修饰符函数是如何接收到该属性当前修改值的，在本例中是rotation数字。

如果你只需做贴靠操作，我们建议使用内置在 GSAP 核心中的SnapPlugin插件。

使用取模运算进行限位​

下方的补间动画设置从x到 500，但修饰符函数强制使值循环，始终保证它在 0 到 100 之间。

同样的技巧可以使用 GSAP 提供的wrap 实用函数来实现。:

循环轮播​

你是否曾经构建过轮播图并纠结于如何使其无缝循环？你可能复制了每一个元素或者编写了一段当元素到达边界后移回起点的代码。使用 ModifiersPlugin，您仅需单行代码就可以实现无缝循环式轮播！下方示例中的每个盒子都被补间动画设置为相对.to()中，并设置了stagger位置。点击 "显示溢出" 按钮可以看到每次盒子超出 500 时会被重置为x位置值"+=500"。点击 “显示溢出” 按钮查看每个盒子在超过 500 后会被重置到x: 0。

高级示例​

我们仅仅展示了 ModifiersPlugin 功能的一小部分。我们的版主Blake Bowen对这个插件进行了广泛测试，并创建了一个引人注目的演示集合，一定会给你带来灵感。

注意事项:​

• 要修改 CSS 变换的scale，请使用scaleX和scaleY（因为它是一个快捷方式）。请使用rotation，而不是rotationZ.

• RoundPropsPlugin 和 SnapPlugin 在内部与 ModifiersPlugin 共享相同的机制（为了最大化效率、最小化内存占用和减少 kb）。可以将roundProps补间动画视为一个快捷方式，它创建了一个用于应用Math.round()的修饰符，同时满足roundProps因此不能同时对同一属性使用修饰符。不过，你可以直接在修饰符函数中完成相同的功能，Math.round()来实现此功能。

常见问题​