SuperAPI AI 工具集

awwwards-animations

设计与创作

查看项目

更新于 10-15 21:09

技能介绍

用途:为 React 项目制作 Awwwards/FWA 质量级别的网页动画,强调 60fps 流畅度。

主要能力:提供按任务选择动画库的决策矩阵,包括滚动驱动动画(GSAP + ScrollTrigger + useGSAP)、平滑滚动(Lenis + ReactLenis)、React 原生动画(Motion/Framer Motion)、轻量效果(Anime.js 4.0)、复杂时间线(GSAP)、SVG 变形、3D、页面过渡、几何形状(SVG/Canvas/Zdog)、创意编程(p5.js)、音频响应(Tone.js)、2D 物理(Matter.js)、算法与生成艺术(分形、L 系统、流场、吸引子、噪声、神圣几何)、文字特效(故障、动态字体、变形、爆炸、环绕文字、乱序)、几何拼图(Dudeney、七巧板、镶嵌、彭罗斯、多联骨牌)及设计哲学(粗野、极简、抽象等)。提供 React 核心模式代码示例:磁吸光标、磁吸按钮、视差首屏、文字逐字揭示、图片揭示、故障文字、分形树、几何剖分、粗野网格。

使用方式:安装命令为 npm install gsap @gsap/react、npm install lenis、npm install motion、npm install animejs。需在应用级注册 GSAP 插件;Lenis 与 ScrollTrigger 集成是关键步骤,用 lenis.on('scroll', ScrollTrigger.update) 并接入 gsap.ticker。详细实现见 references 目录下 gsap-react.md、motion-patterns.md、animejs-react.md、lenis-react.md 等文档。

适用场景:需要高视觉冲击力的营销页、品牌站、作品集与创意交互页面。

限制:资料未提供收费、价格、平台与具体效果数据;性能规则要求只动画 transform 和 opacity,谨慎使用 will-change,用 useGSAP 清理,将 GSAP 选择器限定在容器 ref,事件处理使用 contextSafe(),并用 useReducedMotion() 尊重 prefers-reduced-motion;需注意 Lenis 未与 ScrollTrigger 集成、useGSAP 缺少 scope、React 18 Strict Mode 重复执行效应、Next.js 未加 'use client'、动态内容后未调用 ScrollTrigger.refresh() 等问题。其余细节暂未提供。