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() 方法,让对象原路返回到起点。以下是你可以定义的参数(请注意,friction
和acceleration
都是完全可选的):