React-Three-Fiber 中文文档

更容易地实现动画效果

Using with React Spring

本教程假定您具有一些React知识，并且将基于此初始codesandbox，因此只需fork它并跟随即可！

我们学习了如何创建小动画以及如何对用户交互做出反应，但我们还没有学习如何以一种创建动画的方式更改这些属性。

因此，我们将使用react-spring，react-spring是基于弹性物理效果的动画库，它与React Three Fiber完美配合，因为它来自相同的维护者，并且还具有专门用于与React Three Fiber一起使用的exports。

Spring Animation 弹性动画

让我们首先定义一些关于react-spring的概念，因为它以你可能不太习惯的方式处理动画，通常在CSS中定义动画甚至过渡时，您会告诉代码您希望过渡持续多长时间。

transition: opacity 200ms ease;

这不是react-spring的工作方式，它使用类似弹簧的弹性效果，这意味着动画流程取决于您要动画化的物体的质量、张力和摩擦力等因素，这正是它在与3D配合使用时如此完美的原因。

Using react-spring

让我们先来安装一下:

npm install three @react-spring/three

我们会从@react-spring/three引入各种和 React Three Fiber结合来使用的模块。

我们先引入两个组件：

import { useSpring, animated } from '@react-spring/three'

让我们来看看他们都是干什么用：

— useSpring - 把某个值进行动态变化

— animated - 一个组件，用来代替您的DOM或mesh，因此，如果您希望它受到react-spring的影响，则可以使用animated.mesh而不是mesh

让我们给 mesh 绑定第一个由用户点击产生的弹性的动画效果。

const springs = useSpring({ scale: active ? 1.5 : 1 })

我们在这里创建了一个常量，称为springs，该常量将保存动画值。useSpring本身需要一个参数，即一个包含要进行动态变化的所有内容的对象。在这种情况下，我们只想要对比例进行动态变化，并根据 active 的布尔值在值1和值1.5之间进行跳跃。

我们还可以解构useSpring的返回值，只获取我们想要的值，如下所示：

const { scale } = useSpring({ scale: active ? 1.5 : 1 })

我们可以把解构出来的值设置到对应的 mesh 属性上：

<animated.mesh scale={scale} onClick={() => setActive(!active)} ref={myMesh}>
  <boxGeometry />
  <meshPhongMaterial color="royalblue" />
</animated.mesh>

如果你现在点击立方体，你会发现它不仅仅是从一个值跳到另一个值，而是在两个值之间平滑地进行动画处理。

我想要让效果最后的时候是是颤动效果。为此，我们可以从react-spring导入config对象：

import { useSpring, animated, config } from '@react-spring/three'

现在我们在使用 hook 的时候可以传入一个新的数据，一个 config 参数：

const { scale } = useSpring({
  scale: active ? 1.5 : 1,
  config: config.wobbly,
})

如果这样的设置你不喜欢，你可以参看 react-spring 的文档然后设置一个自己喜欢的。

在这篇文章里我们做了什么：

— 学会了如何在React Three Fiber中使用 react-spring

— 让三维的 Mesh 元素产生动态变化效果

练习：

— 尝试使用 react-spring 让 mesh 的位置发生动态变化

更多阅读：

— React Spring 文档

React-Three-Fiber

官方网站

JavaScript | 高手之路

全能课

Best

MasterJS

Made By