属性
内部插件是什么？
GSAP 使用内部插件来动画化属性，AttrPlugin它会自动包含在 GSAP 的核心中，和不需要通过 gsap.registerPlugin() 加载。你可以将内部插件视为 GSAP 的一部分。
描述
GSAP 允许你轻松地对任何 DOM 元素的数字属性进行补间动画。例如，假设你的 DOM 元素如下所示：
<rect id="rect" fill="none" x="0" y="0" width="500" height="400"></rect>
你可以像这样对 “x”、“y”、“width” 或 “height” 属性进行补间动画：
gsap.to("#rect", {
duration: 1,
// x here refers to the x attribute
attr: { x: 100, y: 50, width: 100, height: 100 },
ease: "none",
x: 200 // animate translateX() transform
});
你可以同时对无限数量的属性进行补间动画。只需在attr:{}对象中使用相应的属性名称。GSAP 将保留像“%”这样的后缀，这意味着你可以对类似<rect width="50%"...>.
注意事项：你不能对属性执行单位转换（如 px 转换为 %）
动画化 CSS
不要在 attr 对象内尝试动画化与 CSS 相关的属性。GSAP 在内部处理CSS它们的方式不同。在上面的例子中，x在attr:{}对象外的 transform 将动画化 CSS 变换，而 attr 对象中的 x 将动画化底层几何结构——即 rect 元素的 x 坐标。
