基于 React 三纤维曲线的动画

Question

我只是想知道是否可以使用像 tween or animejs 这样的库来增加基于曲线的值

因此，我打算使用 easing curve.

将值从 n 递增到 x

我的最终目标是为相机制作加速动画，所以我想使用类似“缓入缓出”CSS 等效动画。

我尝试使用anime.js增加一个property of an object然后更新相机的位置

const animRef = useRef(null);
let animValue = {
  value: 0,
}

useEffect(() => {
    animRef.current = anime({
      targets: animValue,
      value: 10,
      easing: 'easeInOutQuad',
      autoplay: false, // So I can use a custom RAF loop
      update: function (anim) {
        // animValue.value <- here the value is updated
      },
    });
})

useFrame(({clock}) => {
    // Using a custom RAF loop
    animRef.current.tick(clock.elapsedTime)
    // animValue.value <- Here the value is always 0
    cameraRef.current.position.z += animValue.value
})

但值属性不会递增，tick 调用有效，但它不会更新 anime.update 函数外的对象属性。

如果有其他方法可以实现我的目标，我会很乐意倾听

Answer 1

你可以使用动漫、gsap 等。react-spring 可能会更好。 gasp/anime，注意如何存储它们的句柄和动画对象。本地状态始终保存在 useState(() => new Foo()) 中。除此之外，最简单的是 lerp/damp，因为它们是内置在 threejs 中的。

useFrame(() => {
  ref.current.opacity = THREE.MathUtils.lerp(ref.current.opacity, condition ? 1 : 0, 0.1)

至于您的代码，您将丢失引用。渲染函数中的状态将在下一次渲染时丢失。使用 useref 或 usestate。我以前从未尝试过动画，但你必须考虑到组件会重新渲染，因为它被调用了多次。

const x = useRef({ value: 0 })
useEffect(() => {
  anime({ targets: x.current, ... })
}, [])

基于 React 三纤维曲线的动画

React Three Fiber curve-based animation

javascript

animation

reactjs

react-three-fiber

animejs