React 中的样条动画，当我用鼠标滚动时放大和缩小

Question

我尝试在网站中滚动时使样条线查看器组件具有相同的大小已经有一段时间了，但是即使我在导出设置中关闭了所有缩放效果，我仍然无法控制动画：

import React from 'react';
import {TypeAnimation} from 'react-type-animation';
import {motion} from 'framer-motion';
import {fadeIn} from '../variants';
import { Suspense } from 'react';
import Loading from './Loading';
const Spline = React.lazy(() => import('@splinetool/react-spline'));
const Banner = () => {
  return (
    <section className='h-screen pb-10 container mx-auto  flex items-center' id='home'>
      <div className='flex-col relative container flex  justify-between h-screen items-center'>
        <div className='flex w-full self-center flex-col justify-center'>
          <div className='text-center'>
            <motion.h1 variants={fadeIn('up, 0.3')} initial="hidden" whileInView={'show'} viewport={{ once: false, amount: 0.7 }} className='text-[4rem] mb-[5rem]'>Hello World!</motion.h1>
    
          </div>
        </div>
        <div className='absolute h-screen w-screen mb-10 my-3 flex items-center justify-center'>
        <Suspense fallback={<Loading />}>
          <Spline
          className=''
            scene="https://prod.spline.design/BSToMHfvR0DfJewQ/scene.splinecode"
          />
          </Suspense>
        </div>
      </div>
    </section>
  );
};

export default Banner;

Answer 1

我以前也遇到过这个问题，但是是使用 Vite + Vue。样条模型播放设置仅在我重新启动 Vue 开发服务器后更新。

重新启动您的开发服务器