animating-advanced - 电影级交互设计师 - 打造Awwwards级别动画
使用GSAP、Three.js/R3F和Lenis创建高性能动画，打造电影级网页体验
标签
更新于: 2026-02-13能力
典型输入
典型输出
该技能可以做什么
- 使用GSAP创建时间轴动画
- 实现Three.js/R3F 3D交互
- 设置Lenis平滑滚动
- 创建滚动触发动画
- 生成Google Labs风格资产
- 优化动画性能
输入
- 动画设计要求
- 3D模型文件(.glb)
- Google Whisk/Flow生成资产
- React组件结构
- 滚动事件数据
输出
- 动画英雄区域
- 平滑滚动实现
- 3D交互场景
- 性能优化动画
- React动画组件
要求
- React环境
- 已安装GSAP库
- R3F/Three.js设置
- GPU支持WebGL
- 移动设备兼容性