OUTCOMES
项目结果
- 将 Poke 的缓动配置从编辑器上下文拆分为独立 React 组件。
- 用 SVG 同步表达曲线、控制线、拖拽点和运动预览，并以最小接口返回 CSS 参数。
INTERACTIVE EVIDENCE
交互 Demo
REUSABLE COMPONENT RECONSTRUCTION
LIVEBezier Easing Picker
INTERACTIVE PREVIEWCubic Bézier Editor
- 01拖动控制点
- 02实时曲线
- 03同步运动预览
01
来源
组件最初用于 Poke 的交互面板，后来从编辑器上下文中拆出，成为可独立使用的 React 组件。
02
编辑与预览
SVG 同时绘制曲线、控制线和拖拽点；坐标实时转换为四个参数，并立即应用到右侧运动预览。
03
组件接口
对外只提供尺寸、默认曲线和 onChange。生产产物将 React 设为外部依赖，业务侧可以直接生成 CSS 缓动参数或保存结果。