Threejs GSAP动画

你有没有想过如何为你的 Three.js 网络应用程序创建流畅的动画？ 这可能是一个乏味的过程，但幸运的是我们有一个名为 GSAP 的便捷工具。

这是我使用该工具创建的动画的快速示例。

酷吧？ 下面，我将讨论我是如何使用 GSAP 来创建这些动画的。 但首先…

1、什么是 GSAP？

GSAP 是一个高性能和强大的 Javascript 动画库，允许用户创建和动画任何用 Javascript 编写的东西（CSS 属性、画布库对象、SVG、React、Vue、Angular、通用对象等）。 GSAP 无需编写复杂的 CSS 文件来为对象设置动画，而是允许你通过单个函数调用为对象设置动画，并将其转换为在多个不同的浏览器平台上运行。 这使得创建动画变得极其容易，并简化了整个过程。 听起来不错，不是吗？ 让我们看看如何使用它。

2、如何使用GSAP

首先，让我们从将 GSAP 添加到你的项目开始。 在项目目录中，打开终端并运行以下任一命令：

npm install gsap
yarn add gsap

安装 GSAP 后，你可以将其导入到项目文件中：

import { gsap } from "gsap";

导入后，我们就可以开始使用 GSAP 来创建动画了！ 对于最基本的实现，我们将使用 gsap.to() 函数。 要创建动画，我们需要将三样东西传递给函数。 这些是想要设置动画的对象，你希望 GSAP 将对象从其当前位置设置为动画的值，以及动画的持续时间。

gsap.to(object, {property: value, duration: value})

让我们使用 GSAP。 回到我的示例，为月亮的过渡设置动画非常简单。 只需一行代码，我们就可以为月亮设置动画，使其在 2 秒内从屏幕外的位置平滑移动到 x 坐标 0。 代码如下：

gsap.to(moon.position, { duration: 2, x: 0 });

这一行产生以下动画。

看起来不错，不是吗？ 我们可以更进一步，在当前动画完成后触发另一个动画。 为此，我们可以添加一个名为 delay 的道具。 这将告诉动画在开始动画之前等待指定的秒数。 在这里，我们告诉动画等待 2 秒，然后将月亮的 z 位置设置为 4 的动画。让我们试试看。

gsap.to(moon.position, { duration: 2, x: 0 });
// Add second animation that starts after 2 seconds have passed.
gsap.to(moon.position, { duration: 2, z: 4, delay: 2 });

3、更多例子

就这么简单。 GSAP 让我们只用两行代码就可以创建这个漂亮的动画。 这消除了处理动画对象背后的复杂逻辑的需要。 这个工具的美妙之处在于你几乎可以为对象的任何属性设置动画。 玩得开心！

// Animate the x, y and z positions of the object
gsap.to(moon.position, { duration: 2, x: 1 });
gsap.to(moon.position, { duration: 2, y: 1 });
gsap.to(moon.position, { duration: 2, z: 1 });
// Animate the x, y and z scale/size of the object
gsap.to(moon.scale, { duration: 2, x: 2 });
gsap.to(moon.scale, { duration: 2, y: 2 });
gsap.to(moon.scale, { duration: 2, z: 2 });
// Animate the x, y and z rotation of the object
gsap.to(moon.rotation, { duration: 2, x: 3});
gsap.to(moon.rotation, { duration: 2, y: 3});
gsap.to(moon.rotation, { duration: 2, z: 3});
// Animate the opacity of the object
gsap.to(moon.material, { duration: 2, opacity: 0});

原文链接：Create Sick Web Animations in Three.js with GSAP

BimAnt翻译整理，转载请标明出处