# GSAP React 集成 GSAP 动画的 React 特定模式。 ## 快速入门 npm 安装 gsap @gsap/react 从'@gsap/react'导入{useGSAP}；从“gsap”导入 gsap；函数组件() { const containerRef = useRef(null); 使用GSAP(() => { gsap.to('.box', { x: 200, 持续时间: 1 }); }, { 范围：containerRef }); 返回（

动画

）； } ## 使用GSAP钩子 ### 基本用法从'@gsap/react'导入{useGSAP}；从“gsap”导入 gsap；函数 AnimatedComponent() { const 容器 = useRef(null); 使用GSAP(() => { // 这里所有的 GSAP 动画 gsap.from('.item', { 不透明度：0， y：50，错开：0.1 }); }, { 范围：容器 }); // 范围限制选择器查询返回（

项目 1

项目 2

项目 3

）； } ### 具有依赖关系函数 AnimatedComponent({ isOpen }) { const 容器 = useRef(null); 使用GSAP(() => { gsap.to('.抽屉', { 高度：是否打开？ “自动”：0，持续时间：0.3 }); }, { 范围：容器，依赖项：[isOpen] }); 返回（

内容

）； } ### 返回上下文函数组件() { const 容器 = useRef(null); const { 上下文，contextSafe } = useGSAP(() => { gsap.to('.box', { x: 200 }); }, { 范围：容器 }); // 使用 contextSafe 作为事件处理程序 const handleClick = contextSafe(() => { gsap.to('.box', { 旋转: 360 }); }); 返回（

点我

）； } ## 参考模式 ### 单元素参考函数 SingleElement() { const boxRef = useRef(null); 使用GSAP(() => { gsap.to(boxRef.current, { x：200，旋转：360，持续时间：1 }); }); 返回

Box

; } ### 多元素参考函数多个元素() { const itemsRef = useRef([]); 使用GSAP(() => { gsap.from(itemsRef.current, { 不透明度：0， y：30，错开：0.1 }); }); 返回（

{[1, 2, 3].map((项目, i) => (

itemsRef.current[i] = el} > 项目{项目}

))}

）； } ### 动态参考函数 DynamicList({ items }) { const itemsRef = useRef(new Map()); 使用GSAP(() => { gsap.from(Array.from(itemsRef.current.values()), { 不透明度：0， y：20，错开：0.05 }); }, { 依赖项: [items.length] }); 返回（

{items.map(item => (

{ if (el) itemsRef.current.set(item.id, el); else itemsRef.current.delete(item.id); }} > {项目.名称}

))}

）； } ## 上下文和清理 ### 自动清理 // useGSAP 在卸载时自动清理动画函数组件() { 使用GSAP(() => { // 该时间线在卸载时自动终止 gsap.时间线() .to('.a', { x: 100 }) .to('.b', { x: 100 }); }); } ### 手动上下文（不使用GSAP）从“gsap”导入 gsap；函数组件() { 使用效果（（）=> { const ctx = gsap.context(() => { gsap.to('.box', { x: 200 }); gsap.to('.circle', { 旋转: 360 }); }); return () => ctx.revert(); // 清理 }, []); } ### 范围上下文函数组件() { const containerRef = useRef(null); 使用效果（（）=> { const ctx = gsap.context(() => { // 选择器仅在containerRef内查询 gsap.to('.item', { 不透明度: 1 }); }, 容器引用); return () => ctx.revert(); }, []); } ## 事件处理程序 ### 事件上下文安全函数InteractiveComponent() { const 容器 = useRef(null); const { contextSafe } = useGSAP(() => { // 初始动画 gsap.set('.box', { 比例: 1 }); }, { 范围：容器 }); const handleMouseEnter = contextSafe(() => { gsap.to('.box', { 比例: 1.1, 持续时间: 0.2 }); }); const handleMouseLeave = contextSafe(() => { gsap.to('.box', { 比例: 1, 持续时间: 0.2 }); }); 返回（

将鼠标悬停在我身上

）； } ### useCallback 替代方案函数组件() { const boxRef = useRef(null); const tweenRef = useRef(null); const animateBox = useCallback(() => { tweenRef.current?.kill(); tweenRef.current = gsap.to(boxRef.current, { x: '+=50', 持续时间：0.3 }); }, []); 使用效果（（）=> { return () => tweenRef.current?.kill(); }, []); 返回

Click

; } ## 时间线管理 ### 时间线参考模式函数时间轴组件() { const 容器 = useRef(null); const tl = useRef(null); 使用GSAP(() => { tl.current = gsap.timeline({ 暂停: true }) .to('.box', { x: 200 }) .to('.box', { y: 100 }) .to('.box', { 旋转: 360 }); }, { 范围：容器 }); const play = () => tl.current?.play(); const 反向 = () => tl.current?.reverse(); const restart = () => tl.current?.restart(); 返回（

动画

）； } ### 受控时间线函数 ControlledAnimation({ 进度 }) { const 容器 = useRef(null); const tl = useRef(null); 使用GSAP(() => { tl.current = gsap.timeline({ 暂停: true }) .to('.element', { x: 500 }) .to('.element', { y: 200 }); }, { 范围：容器 }); // 当 prop 改变时更新时间轴进度使用效果（（）=> { if (tl.current) { tl.current.progress(进度); } }, [进度]); 返回（

受控

）； } ## React 中的 ScrollTrigger ### 基本 ScrollTrigger 从'@gsap/react'导入{useGSAP}；从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 { ScrollTrigger }； gsap.registerPlugin(ScrollTrigger); 函数 ScrollComponent() { const 容器 = useRef(null); 使用GSAP(() => { gsap.from('.section', { 不透明度：0， y：100，滚动触发器：{ 触发器： '.section', 开始：“前 80%”， toggleActions: '不播放没有没有' } }); }, { 范围：容器 }); 返回（

滚动显示

）； } ### ScrollTrigger 清理函数 ScrollComponent() { const 容器 = useRef(null); 使用GSAP(() => { const 触发器 = []; gsap.utils.toArray('.item').forEach(item => { const 触发器 = ScrollTrigger.create({ 触发：项目，开始：“前 80%”， onEnter: () => gsap.to(item, { 不透明度: 1 }) }); 触发器.push(trigger); }); // 返回清理函数 return () => triggers.forEach(t => t.kill()); }, { 范围：容器 }); } ## 自定义挂钩 ### useAnimation Hook 函数 useAnimation(动画, deps = []) { const elementRef = useRef(null); const tweenRef = useRef(null); 使用GSAP(() => { if (elementRef.current) { tweenRef.current = 动画(elementRef.current); } return () => tweenRef.current?.kill(); }, { 依赖项: deps }); 返回元素引用； } // 用法函数组件() { const boxRef = useAnimation((el) => gsap.from(el, { 不透明度: 0, y: 50, 持续时间: 0.5 }) ）；返回

动画

； } ### useFadeIn 钩子函数 useFadeIn(选项 = {}) { const { 持续时间 = 0.5，延迟 = 0，y = 30 } = 选项； const ref = useRef(null); 使用GSAP(() => { gsap.from(ref.current, { 不透明度：0，是，持续时间，延迟，轻松：'power2.out' }); }); 返回参考； } // 用法函数卡（）{ const cardRef = useFadeIn({ 延迟: 0.2 }); return

卡片内容

; } ### useHoverAnimation 挂钩函数useHoverAnimation（enterAnimation，leaveAnimation）{ const ref = useRef(null); const { contextSafe } = useGSAP({ 范围: ref }); const onEnter = contextSafe(() => EnterAnimation(ref.current)); const onLeave = contextSafe(() => LeaveAnimation(ref.current)); 返回 { ref, onMouseEnter: onEnter, onMouseLeave: onLeave }; } // 用法函数按钮（）{ const hooverProps = useHoverAnimation( (el) => gsap.to(el, { 尺度: 1.05, 持续时间: 0.2 }), (el) => gsap.to(el, { 尺度: 1, 持续时间: 0.2 }) ）； return ； } ## 时间崩溃模式 ### 动画倒计时数字函数 CountdownDigit({ 值, 标签 }) { const digitalRef = useRef(null); const prevValue = useRef(值); 使用GSAP(() => { if (prevValue.current !== 值) { gsap.时间线() .to(digitRef.current, { 旋转X：-90，不透明度：0，持续时间：0.25，轻松：'power2.in' }) .call(() => { digitalRef.current.textContent = 值； prevValue.current = 值； }) .fromTo(digitRef.current, { 旋转X：90，不透明度：0 }， {旋转X：0，不透明度：1，持续时间：0.25，缓动：'power2.out'} ）； } }, { 依赖项: [值] }); 返回（

{值} {标签}

）； } ### 宇宙脉冲效应函数 CosmicPulse({ 儿童, 颜色 = '#00F5FF' }) { const containerRef = useRef(null); 使用GSAP(() => { gsap.to(containerRef.current, { boxShadow: `0 0 30px ${color}, 0 0 60px ${color}`, 持续时间：1，重复：-1，哟哟：是的，缓和：'sine.inOut' }); }, { 范围：containerRef }); 返回

{children}

; } ## 性能提示 // 1. 对重动画使用 will-change gsap.set('.animated', { willChange: 'transform' }); // 2.批量相似动画使用GSAP(() => { gsap.to('.item', { 不透明度: 1, 交错: 0.1 }); // 单个补间 // 不是: items.forEach(item => gsap.to(item, ...)) // 多个补间 }); // 3. 对于频繁动画的元素，使用 refs 而不是选择器 const boxRef = useRef(null); gsap.to(boxRef.current, { x: 100 }); // 更快 // 4. 状态快速变化时终止动画 const tweenRef = useRef(null); 使用效果（（）=> { tweenRef.current?.kill(); tweenRef.current = gsap.to(...); }, [依赖]); ## 参考 * 有关动画基础知识，请参阅“gsap-fundamentals” * 请参阅“gsap-sequencing”了解时间线组成 * 有关基于滚动的动画，请参阅“gsap-scrolltrigger”

Gsap反应

包含技能