SuperAPI AI 工具集

framer-core-workflow-b

办公与效率

查看项目

更新于 10-15 23:26

技能介绍

用途:在 Framer 项目中实现次级工作流,即通过代码组件与代码覆盖扩展站点能力。代码组件是画布上渲染的自定义 React 组件,代码覆盖用于修改已有图层的动画与交互,而无需改动组件本身。

主要能力:一是带属性控件的代码组件,使用 addPropertyControls 与 ControlType 暴露目标值、时长、后缀、字号、颜色等可调参数;二是数据获取组件,通过 fetch 拉取外部 API 并渲染列表;三是可复用的代码覆盖,如滚动淡入、磁吸悬停、打字机文本;四是插件以编程方式创建代码文件,使用 framer-plugin 的 createCodeFile 与 setFileContent。

使用方式:需在编辑器中打开 Framer 项目,并了解 React 与 Framer Motion。组件通过 export default 导出,属性控件在组件导出后调用 addPropertyControls;覆盖需返回 Override 类型,并在属性面板中应用到任意图层。

适用场景:为 Framer 站点添加动画计数器、外部数据列表、滚动与悬停交互效果,以及由插件批量生成覆盖文件。

限制与错误处理:组件空白多为运行时错误,需查看 Framer 浏览器控制台;控件不显示通常是缺少 addPropertyControls 或调用位置错误;覆盖不生效多为导出类型不对;数据获取失败常因 CORS,需使用支持 CORS 的 API。示例中建议构建无嵌入密钥或访客数据的虚构暂存组件,在受限角色下测试发布行为,并验证回滚能移除金丝雀而不影响生产内容。具体收费、价格与平台支持情况暂未提供。