🤿

React Three FiberのReact-XRでXRビューの時だけGSAPアニメーションが動かないときの対処法

2023/06/12に公開

そもそもなぜ動かないの？

GSAPやFramer-motionなどのアニメーションライブラリは仕組み上、requestAnimationFrameというJavascriptの機能によって動作しているのですが、XRビューの仕様では、これが使用できないという問題があり、これを解決するには独自にフレーム毎のアニメーションの更新を実装する必要があります。

GSAPを使う場合の実装方法

    useEffect(()=>{
        gsap.ticker.remove(gsap.updateRoot); //ここでデフォルトのupdateRootを削除する
    },[])
    function Frame(){ //R3FのフックはCanvasコンポーネント内でのみ動作するため、そのためのコンポーネントを定義する
        const timeRef = useRef(0); //経過時間を格納するuseRefを定義する
        useFrame((state, delta) => {
            timeRef.current += delta; //deltaTimeを加算することで経過時間を更新する
            gsap.updateRoot(timeRef.current); //updateRootで現在の経過時間を元にアニメーションを更新させる
        })
        return(
            <></> //コンポーネントには必ずJSX形式で返り値が必要になるため、空の要素を返り値として返す
        )
    }
    return (
        <div>
            <VRButton />
            <Canvas>
                <Frame/> //ここで更新用のコンポーネントを呼び出す
		…

おわりに

Framer-motion等、別のライブラリを使用する場合は、そのライブラリの手動更新を行うための関数を調べてやると出来ると思います。
AppleのVision Proの発表などでWebXRの需要が高まることが予想されるので、今のうちにWebXRに触れておくと得するかも。

そもそもなぜ動かないの？

GSAPを使う場合の実装方法

おわりに

Discussion