覆盖 4.0 所有的动画能力,并增加常见的其他动画效果。 6 月 30 号前全部完成,还有什么没有考虑到的动画,快快追加添加。

    动画分成两个步骤:

    1. 找到对应的 shape 和属性变化
    2. 执行对应属性的 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 颜色