Me preguntaba si es posible usar una biblioteca como tween o animejs para incrementar un valor en una curva
Con eso quise incrementar un valor de n a x usando una curva de aceleración .
Mi objetivo final es hacer una animación de aceleración para la cámara, por lo que me gustaría usar una animación equivalente de CSS "ease-in-out".
Traté de usar anime.js para incrementar una propiedad de un objeto y luego actualizar la posición de la cámara.
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 }) pero la propiedad value no se incrementará, la llamada tick está funcionando pero no está actualizando la propiedad del objeto fuera de la función anime.update .
Si hay otra forma de acercarme a mi objetivo, con gusto escucharé.
puedes usar anime, gsap, etc. react-spring probablemente sería mejor. jadeo/anime, ten cuidado con cómo almacenas sus manijas y anim-objetos. el estado local siempre se mantiene en useState(() => new Foo()) . aparte de eso, el más fácil es lerp/damp, porque están integrados en threejs.
useFrame(() => { ref.current.opacity = THREE.MathUtils.lerp(ref.current.opacity, condition ? 1 : 0, 0.1)en cuanto a su código, perderá referencias. El estado dentro de la función de renderizado se perderá en el próximo renderizado. use ref de usuario o usestate. Nunca antes había probado el anime, pero debes tener en cuenta que un componente se vuelve a renderizar, como si se llamara varias veces.
const x = useRef({ value: 0 }) useEffect(() => { anime({ targets: x.current, ... }) }, [])