CustomWiggle

gsap.registerPlugin(CustomEase, CustomWiggle) 

//Create a wiggle with 6 oscillations (default type:"easeOut")
CustomWiggle.create("myWiggle", {wiggles: 6});

//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.
gsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});

描述​

CustomWiggle 扩展CustomEase（你也必须将其包含在项目中），它允许你设置抖动的幅度和类型。

演示​

CustomWiggle 类型

配置对象​

属性

描述

• 抖动

  整数- 往返振动的次数。默认值：10。

• type

  字符串（“easeOut” | “easeInOut” | “anticipate” | “uniform” | “random”）- 抖动的类型（或样式）（见上方示例）。默认值：“easeOut”。

• amplitudeEase

  缓动提供对振幅形状（在缓动可视化工具中的 y 轴）的高级控制。你可以定义一个缓动函数，用来控制在整个补间动画过程中振幅从 1 向 0 的变化过程。定义 amplitudeEase（或 timingEase）将会覆盖“type”参数（可以将这五种“类型”理解为 amplitudeEase 和 timingEase 组合的一种便捷预设）。请参阅示例 CodePen来体验并可视化其工作方式。

• timingEase

  缓动提供对波形随时间绘制方式的高级控制（在缓动可视化工具中的 x 轴）。定义 timingEase（或 amplitudeEase）将会覆盖“type”参数（同样地，可以将这五种“类型”理解为 amplitudeEase 和 timingEase 组合的一种便捷预设）。请参阅示例 CodePen来体验并可视化其工作方式。

如何控制抖动的强度（或者它的幅度大小）？只需通过设置补间动画的属性值本身即可。例如，rotation:30就比rotation:10的抖动更强。记住，缓动函数只是控制每个属性在补间动画中朝着你提供的目标值移动的比例。

示例代码​

gsap.registerPlugin(CustomEase, CustomWiggle); // register

//Create a wiggle with 6 oscillations (default type:"easeOut")
CustomWiggle.create("myWiggle", {wiggles: 6});

//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.
gsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});

//Create a 10-wiggle anticipation ease:
CustomWiggle.create("funWiggle", {wiggles: 10, type: "anticipate"});
gsap.to(".class", {duration: 2, rotation: 30, ease: "funWiggle"});

//Alternatively, make sure CustomWiggle is loaded and use GSAP's string ease format
ease: "wiggle(15)" //<-- easy!
ease: "wiggle({type:anticipate, wiggles:8})" //advanced

抖动不仅仅适用于“rotation”；它可以用于任何属性。例如，你可以通过在“x”和“y”上使用两个随机化的抖动补间动画来创建一群物体的效果，如此处演示.

示例集合​

• CustomWiggle 示例