OUTCOMES
项目结果
- 将数据占比、SVG 几何与渲染状态分开，支持数据重组后的连续路径变化。
- 使用 staggered spring 传递相邻扇区的当前动画值，处理新增、删除与用户打断。
INTERACTIVE EVIDENCE
交互 Demo
INTERACTIVE MOTION EXPERIMENT
LIVETurntable Motion Lab
INTERACTIVE PREVIEWSVG Spring Motion
- 01数据重组
- 02连续扇区动画
- 03滑杆调节播放速度
01
几何计算
数值先转换为圆周占比，再计算弧线起止坐标并生成 SVG Path；数据、几何和渲染彼此分开。
02
连续运动
后一扇区沿用前一扇区当前的动画值，staggered spring 让新增、删除和重组像一段连续运动。
03
项目范围
这是动效实验，不是完整抽奖产品。公开 Demo 保留核心交互，并去掉旧仓库中的无关请求和未完成流程。