跳过主要内容

Physics2D

快速入门

CDN 链接

gsap.registerPlugin(Physics2DPlugin)

最简用法

gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, gravity: 400 },
});

描述​

加载中...

提供了基于一个对象的简单物理功能x和y坐标（或left和top）根据组合的velocity, angle, gravity, acceleration, accelerationAngle和/或friction。它并不是用来替代完整的物理引擎，也不提供碰撞检测功能，而是作为通过GreenSock动画平台轻松创建有趣的基于物理的效果的一种方式。

配置对象​

    属性

    描述

  • 速度

    数字- 对象的初始速度，以像素每时间单位来衡量。默认值：0.

  • 角度

    数字- 对象移动的初始角度（以度为单位）。只有当定义了velocity时这个参数才起作用。例如，如果对象应从-60度开始移动（朝向右上方），那么angle将会是-60。默认值：0.

  • 重力

    数字- 应用于对象的向下加速度量，以像素每秒为单位。你可以使用gravity或者acceleration，不能两者同时使用，因为gravity等同于在acceleration下施加的accelerationAngleid 为90。可以把重力看作是一个便捷属性，它可以自动为你设置accelerationAngle默认值：null.

  • 加速度

    数字- 施加在对象上的加速度量，以像素每秒为单位，它将以每帧为单位进行测量。若要在不同于角度指定的方向上施加加速度，请使用accelerationAngle属性。你可以使用gravity或者acceleration，不能两者同时使用，因为gravity等同于在acceleration下施加的accelerationAngleid 为90。默认值：null.

  • 加速度方向角

    数字- 施加加速度的角度（如果有的话），以度为单位。例如，如果你希望对象加速向屏幕左侧移动，则使用accelerationAngleid 为180。如果你定义了gravity值，它将自动设置accelerationAngle设置为90（向下）。默认值：null.

  • 摩擦力

    数字- 介于0和1之间的一个数值，0表示无摩擦力，0.08表示少量摩擦力，1则会完全阻止任何移动。这并不是为了实现精确或科学意义上的摩擦力，但它可以作为一种简便的方式来应用类似摩擦力的物理效果到你的补间动画中。通常建议稍微试验一下这个数值——从像0.02这样非常小的数值开始。请注意，带有摩擦力的物理补间比没有摩擦力的需要更多的处理。默认值：0.

  • xProp

    字符串- 默认情况下，x目标对象的x坐标属性用于控制x轴方向的运动，但如果你希望使用不同的属性名，请使用xProp比如xProp: "left"。默认值："x".

  • yProp

    字符串- 默认情况下，y目标对象的y坐标属性用于控制y轴方向的运动，但如果你希望使用不同的属性名，请使用yProp比如yProp: "top"。默认值："y".
信息

参数不打算动态更新，但有一个独特的便利之处是所有内容都可以反转。所以例如，如果你生成了一堆粒子补间动画并将它们放入时间轴中，你只需调用reverse()在时间轴上观看粒子按原路径返回起点。需要注意的是，你为补间动画定义的任何缓动方程都将被这些属性完全忽略。

用法​

gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, gravity: 400 },
});
//or
gsap.to(element, {
  duration: 2,
  physics2D: { velocity: 300, angle: -60, friction: 0.1 },
});
//or
gsap.to(element, {
  duration: 2,
  physics2D: {
    velocity: 300,
    angle: -60,
    acceleration: 50,
    accelerationAngle: 180,
  },
});

示例演示​

查看更多CodePen 上的 Physics2D 示例

Physics2D 示例

    目录