引入数据更新机制后，Shape 的动画就可以在自定义 Shape 时直接实现了。如下代码所示：

    1. registerShape('interval', 'rect', {
    2.   draw(cfg: ShapeDrawCFG, element: Element) {
    3.     // 创建对应的 shape
    4.     // 创建完毕，按需进行动画
    5.     const { animate } = cfg;
    6.     if (animate) { // 需要执行动画
    7.       shape.animate();
    8.     }
    9.   },
    10.   update(cfg: ShapeDrawCFG, element: Element) {
    11.     const { animate } = cfg;
    12.     if (animate) { // 需要执行动画
    13.       shape.animate();
    14.     }
    15.   },
    16.   destroy(cfg: ShapeDrawCFG, element: Element) {
    18.   }
    19. });

    默认 G2 的图表是会执行动画的，内部会有一份默认针对所有 shape 的动画配置，同时开放如下的几个动画配置接口：

    1. chart.animate(boolean); // 开启和关闭动画 
    3. // Geometry 实例上开放 animate() 接口，用于动画配置
    4. chart.interval().animate(false); // 关闭 Geometry 上的动画
    5. chart.interval().animate({
    6.   enter: {
    7.     animation: string, // 动画执行函数，默认会提供
    8.     easing: string, // 缓动函数类型
    9.     duration: number, // 动画执行时间
    10.     delay: number, // 动画延迟时间
    11.     callback: (...args) => any, // 动画执行结束的回调函数
    12.   } || false, // 入场动画，false 表示关闭该类型动画
    13.   update: {
    14.     animation: string, // 动画执行函数，默认会提供
    15.     easing: string, // 缓动函数类型
    16.     duration: number, // 动画执行时间
    17.     delay: number, // 动画延迟时间
    18.     callback: (...args) => any, // 动画执行结束的回调函数
    19.   } || false, // 更新动画，false 表示关闭该类型动画
    20.   leave: {
    21.     animation: string, // 动画执行函数，默认会提供
    22.     easing: string, // 缓动函数类型
    23.     duration: number, // 动画执行时间
    24.     delay: number, // 动画延迟时间
    25.     callback: (...args) => any, // 动画执行结束的回调函数
    26.   } || false, // 销毁动画，false 表示关闭该类型动画
    27. });

    如果用户对动画进行任何配置，就执行 G2 默认的动画配置。
    当然如果用户进行自定义 Shape，就完全可以自己写动画。

    动画的配置优先级如下：
    image.png