我有一個用 react-three-fiber 制作的基本旋轉立方體，并且onPointerOver（也嘗試過onPointerEnter）我想通過useSpring. 但是，當我懸停時它不僅不會這樣做，而且只會這樣做onClick。我有一個完全不同的執行功能onClick——如果我禁用了那個道具，那么旋轉重置就會完全失敗。
我的Box組件中有一個非常簡單的設定：
export const Box = () => {
const [active, setActive] = useState(false);
const boxRef = useRef<Mesh>();
const starterRotation = [0, 1, 1];
useFrame(() => {
if (boxRef.current) {
boxRef.current.rotation.x = 0.01;
boxRef.current.rotation.y -= 0.01;
}
});
const [resetRotation, setSpring] = useSpring(() => ({
rotation: starterRotation
})); // trying to use the `set` syntax to call the useSpring and smoothly animate to a certain rotation.
const springs = useSpring({ scale: active ? 1.5 : 1, config: config.wobbly });
return (
<animated.mesh
// @ts-ignore
rotation={resetRotation.rotation}
scale={springs.scale}
onClick={() => setActive(!active)}
onPointerOver={() => setSpring.start()}
ref={boxRef}
>
<boxGeometry args={[2, 1, 2]} />
<meshStandardMaterial color="royalblue" />
</animated.mesh>
);
};
這是一個活生生的例子：https : //codesandbox.io/s/react-spring-rotating-cube-np4v6
從我在他們的檔案中可以看出，這是正確的方法。我還看到了一些關于它的 github 問題討論，似乎有人擔心useSpring解構的第二個論點無法正常作業，但輪換對我有用——只是觸發事件不起作用。
uj5u.com熱心網友回復：
它確實有效，問題是您仍在rotation根據useFrame呼叫中的 ref更新 ，以便每幀更新。這將覆寫影片值。
第二個問題是，如果你停止useFrame影片rotation它不會作業，因為彈簧的內部值將被設定為[0,1,1]但這是你想要它影片的。
這是使用from和to道具的好機會useSpring，我要做的是使用 ref 來停止useFrame影片，然后使用 ref 獲取旋轉的當前值以from在springSet.start函式中使用，然后to哪個是starterRotation您的值我宣布。
您可以在這里看到這一點 – https://codesandbox.io/s/react-spring-rotating-cube-forked-1j02g?file=/src/components/Box.tsx
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/376233.html
標籤：javascript 反应 动画片 反应弹簧 反应三纤
上一篇：減慢引導程式微調器的速度