跳过主要内容

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都是完全可选的）：

示例演示​

目录