跳过主要内容

PhysicsProps

快速入门

CDN 链接

gsap.registerPlugin(PhysicsPropsPlugin) 

最简用法

gsap.to(obj, {
duration: 2,
physicsProps: {
x: { velocity: 100, acceleration: 200 },
y: { velocity: -200, friction: 0.1 },
},
});

描述

有时我们需要以特定的速度和/或加速度来缓动某个值,而并不确定最终的数值是多少。PhysicsPropsPlugin 插件允许你基于这些概念进行属性缓动。任意数字类型的属性任意对象,并基于这些概念进行计算。请注意,对于这些属性来说,你在缓动中定义的任何缓动公式都将被完全忽略。取而代之的是,物理参数将决定运动/缓动效果。

配置对象

    属性

    描述

  • 速度

    数字- 物体的初始速度,单位为每秒单位数。默认值:0.
  • 加速度

    数字- 应用于物体的加速度数量,单位为每秒单位数。默认值:0.
  • 摩擦力

    数字- 一个介于 0 和 1 之间的数值,其中 0 表示无摩擦,0.08 是少量摩擦,1 则会完全阻止所有移动。这只是模拟类似摩擦的物理效果,并不追求精度或者科学性。通常建议从非常低的值开始尝试,例如0.02。另外请注意,使用摩擦力比没有摩擦力的物理缓动需要更多的处理资源。默认值:0.
信息

这些参数并不是设计用来动态更新的。但有一个独特便捷的功能是,所有的效果都可以反转。因此如果你创建了多个基于物理的缓动,比如说,然后把它们放入时间轴中,你可以简单地调用 timeline 的 reverse() 方法,让对象原路返回到起点。以下是你可以定义的参数(请注意,frictionacceleration都是完全可选的):

示例演示