AiOffice 能力组合,开箱即用,为您的工作流提速
🚨 最重要 - 零容忍:除非 fdk 验证显示零平台错误和零 lint 错误,否则应用程序永远不会完成。永远不要在说“应用程序完成”或“应用程序生成”时留下任何错误。
此元技能提供了在 Web 应用程序中组合多个 3D 和动画库的架构模式、最佳实践和集成策略。它将 Threejs-webgl、gsap-scrolltrigger、react- Three-Fiber、Motion-framer 和 React-Spring-Physics 技能中的知识综合到有凝聚力的模式中,以构建复杂、高性能的 3D Web 体验。
Three.js 是行业标准 JavaScript 库,用于使用 WebGL 和 WebGPU 在 Web 浏览器中创建 3D 图形。该技能为构建高性能、交互式 3D 体验(包括场景、相机、渲染器、几何图形、材质、灯光、纹理和动画)提供全面的指导。
掌握 Web 和实时引擎的 PBR(基于物理的渲染)纹理创建和导出工作流程。该技能涵盖了 Substance 3D Painter 工作流程,从材质创建到 Web 优化的纹理导出,以及用于批处理的 Python 自动化以及与 WebGL/WebGPU 引擎的集成。
Spline 是一个基于浏览器的 3D 设计和动画平台,使创作者能够构建交互式 3D 体验,而无需代码或专业软件知识。它提供了一个协作可视化编辑器,用于跨多个平台设计、制作动画和导出 3D 场景。
该技能为创建有效技能提供了指导。
此技能涵盖 AOS(滚动动画),这是一个用于滚动触发动画的轻量级 CSS 驱动库。 AOS 擅长在元素进入视口时激活简单的淡入淡出、滑动和缩放效果。
Rive 是一个基于状态机的动画平台,使设计人员能够创建具有复杂逻辑和运行时交互性的交互式矢量动画。与纯时间线动画工具(如 Lottie)不同,Rive 支持状态机、输入处理以及应用程序代码和动画之间的双向数据绑定。
React Three Fiber (R3F) 是 Three.js 的 React 渲染器,它为 React 应用程序带来了声明式、基于组件的 3D 开发。您无需强制创建和管理 Three.js 对象,而是使用直接映射到 Three.js 对象的 JSX 组件来构建 3D 场景。
React 应用程序的基于物理的动画,将 React Spring 的声明性弹簧动画与 Popmotion 的低级物理实用程序相结合。
轻量级 WebGL/WebGPU 游戏引擎,具有实体组件架构、可视化编辑器集成和注重性能的设计。
快速、轻量级 2D 渲染引擎,用于使用 WebGL/WebGPU 创建交互式图形、粒子效果和基于画布的应用程序。
Motion(以前称为 Framer Motion)是一个适用于 React 和 JavaScript 的生产就绪动画库,可以使用最少的代码实现声明性、高性能动画。它提供了用动画超能力包装 HTML 元素的运动组件,支持手势识别(悬停、点击、拖动、聚焦),并包括布局动画、退出动画和弹簧物理等高级功能。
2024-2025 年的现代网页设计强调性能、可访问性和有意义的交互。该技能提供有关当前设计趋势、实施模式和最佳实践的全面指导,以创建引人入胜、可访问且高性能的 Web 体验。
Lottie 是一个用于在 Web、iOS、Android 和 React Native 上实时渲染 After Effects 动画的库。它由 Airbnb 创建,允许设计师像发送静态资源一样轻松地发送动画。使用 Bodymovin 插件将动画从 After Effects 导出为 JSON 文件,然后以最小的性能开销进行本地渲染。
使用 Locomotive Scroll 实现平滑滚动、视差效果和滚动驱动动画的综合指南。
该技能结合了三个强大的装饰 3D 元素和微交互库:
GSAP(GreenSock 动画平台)是业界领先的 JavaScript 动画库,用于创建高性能、高品质的动画。 ScrollTrigger 是 GSAP 强大的滚动驱动动画插件。它们共同实现了从简单的 UI 转换到复杂的基于滚动的故事讲述体验的一切。
Blender Web Pipeline 技能提供了将 3D 模型和动画从 Blender 导出为 Web 优化格式(主要是 glTF 2.0)的工作流程。它涵盖了用于批处理的 Python 脚本、Web 性能的优化技术以及与 Three.js 和 Babylon.js 等 Web 3D 库的集成。