RoughEase

gsap.registerPlugin(EasePack) 

// we're starting at a scale of 1 and animating to 2, so pass those into config()...
gsap.to("#image", { duration: 1, scale: 2, ease: "expoScale(1, 2)" });

描述​

大多数缓动公式会在起始值和结束值之间提供平滑、渐进的过渡，但RoughEase提供了一种简便的方式，来实现粗糙且锯齿状的效果；或者，如果你更喜欢的话，也可以实现均匀间隔的来回移动。RoughEase包含在 EasePack 文件中。配置RoughEase时可以使用以下任意可选属性：

配置对象​

属性

描述

• clamp

  Boolean- 设置clamp设置为true将防止点超过结束值或低于起始值。例如，如果你正在将 x 属性从 0 缓动到 100，则 RoughEase 在clamp设置为true的情况下会强制所有随机点保持在 0 到 100 之间；false如果设置为false.

• 点数组

  数字- 点的数量将沿着缓动效果分布，从而使其更加频繁或稀少地抖动。默认值：20.

• randomize

  Boolean- 默认情况下，点的位置会被随机化（从而创建出粗糙效果），但你可以设置randomize设置为false让点在整个缓动过程中平均地来回跳跃。与此配合使用的是taper值，它可以创造出不错的效果。默认值：true.

• strength

  数字- 控制点可以从模板缓动中偏移的距离（一个小数值如 0.1 表示它非常接近模板缓动，而较大的数值如 5 则会产生更大的变化）。默认值：1.

• taper

  字符串 ("in" | "out" | "both" | "none") - 要使粗糙程度在开头、结尾或两者上逐渐减弱，请分别使用"out", "in"，或者"both"。默认值："none".

• template

  字符串- 应该用作模板的缓动效果，类似于一个总体指导。RoughEase 将在其周围绘制偏离该模板的点。你可以通过此方式影响 RoughEase 的整体形状。默认值："none".

示例代码​

//use the default values
gsap.from(element, {duration: 1, opacity: 0, ease: "rough"});

//or customize the configuration
gsap.to(element, {duration: 2, y: 300, ease: "rough({strength: 3, points: 50, template: strong.inOut, taper: both, randomize: false})" });