时间戳

首页 > 解决方案 > React Three Fiber 基于曲线的动画

javascript - React Three Fiber 基于曲线的动画

问题描述

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

我的意思是使用缓动曲线将值从 n 增加到 x 。

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

我尝试使用anime.js来增加对象的属性，然后更新相机的位置

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
})

但是 value 属性不会增加，tick 调用正在工作，但它没有更新anime.update函数外部的对象属性。

如果有另一种方法接近我的目标，我会很乐意倾听

标签： javascriptreactjsanimationreact-three-fiberanimejs

解决方案

你可以使用动漫、gsap 等。react-spring 可能会更好。喘息/动漫，注意你如何存储它们的句柄和动画对象。本地状态始终保存在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, ... })
}, [])

推荐阅读