覆盖 4.0 所有的动画能力,并增加常见的其他动画效果。 6 月 30 号前全部完成,还有什么没有考虑到的动画,快快追加添加。
动画分成两个步骤:
- 找到对应的 shape 和属性变化
- 执行对应属性的 ease 函数(ease 函数类型 follow d3-ease)
第 2 步已经有明确的类型和做法,无需额外处理,重要的就是第一步。理论上,可参考:keynote、https://animate.style/、论文。我们也可以按照视觉属性进行分类:
- 位置:move
- 大小:scale(x、y、xy)
- 透明度:fade
- 颜色:gradient/tint
- 角度:rotate、skew(三种方向的角度,看 G 支持哪些)
其他根据不同 shape,可能有一些定制的 animation。
630 前完成。
✅ 已完成 ❌ 不合理,不做 ⚠️ 待确定
动画 | 能力(示意图、文字描述) | 主要用于 | 完成情况 |
---|---|---|---|
move | 针对 x y 属性,有配置项 : - from:top、left、bottom、right |
- 所有 |
|
scale | 针对 x、y 方向 scale 属性。 | - 柱形图、条形图上涨动画 - 饼图旋转打开动画 |
✅ |
fade | 针对元素透明度的变换动画。 所有图形都能用。 | - 所有 |
✅ |
gradient/tint | 颜色的变换动画。有配置项: - from:颜色值 |
- 所有 |
|
rotate | 旋转,暂时好像意义不大。 | ⚠️ | |
flip | 翻转,可能 G 不支持 | ⚠️ | |
shape 定制动画 | |||
pieScale | 按照互动展开动画 | - 饼图 |
|
设计建议:
- 动画支持简单的编排组合:
- spawn
- squence
- 动画支持配置,比如:
- scale,可以支持 scale 的方向:x、y、xy
- move,可以支持 from 方向
- gradient,可以支持 from 颜色