Overview

Animation refers to the state changes of elements over a period of time, such as the position, size, and color of nodes. In G6, animations are often used to enhance user experience and improve the coherence and smoothness of the graph update process.

G6 provides a set of animation paradigms to describe element animations and has built-in some common animation effects. Users can achieve different animation effects by configuring animation parameters.

The implementation of an animation paradigm is as follows:

[
  {
    fields: ['x', 'y'],
  },
];

The aforementioned animation paradigm indicates that when the x and y attributes of an element change, an animation will be executed.

Configure Animation

In G6, animation configuration is divided into global configuration and local configuration. Global configuration is mainly used to set whether animations are enabled globally, the duration of animations, and other parameters. Local configuration is primarily used to set the animation effects for elements.

Disabled Global Animation

To disable global animations, you can pass the animation option when instantiating the Graph:

{
  animation: false,
}

Configure Global Animation

If you want to enable animations and also configure the default duration for the animations, you can pass the animation option:

{
  animation: {
    duration: 500,
  },
}

Configure Element Animation

For individual elements, you can configure animations at different stages. For example, if you want an element to have a fade-in and fade-out effect when it enters and exits, you can configure it as follows:

{
  node: {
    animation: {
      enter: 'fade',
      exit: 'fade'
    }
  }
}

If you want to update the position of an element with a translation transition, you can configure it as follows:

{
  node: {
    animation: {
      update: 'translate',
    }
  }
}

If you wish to disable animations for an element, you can configure it as follows:

{
  node: {
    animation: false,
  }
}

Animation Paradigm

The animation configuration mentioned in the previous section actually used the built-in animation paradigm. This section introduces how to customize the animation paradigm.

The Element section mentioned that elements in G6 are composed of one or more atomic graphics. Therefore, the animation of an element is essentially a combination of these atomic shape animations.

Thus, the animation paradigm is an array that describes the animation effects of each atomic shape within the element. For the element itself, it is also a special composite shape and thus has basic shape attributes such as x, y, etc.

Therefore, you can directly write an animation paradigm for the element itself:

[
  {
    fields: ['x', 'y'],
  },
];

Custom Animation

If the built-in animations do not meet your requirements, you can create custom animations. For details, please refer to Custom Animation.

Animation Priority

Animation priority refers to the precedence between global animation configuration and element-specific animation configuration. It can be summarized as follows:

Persistent Animation

If you want elements to have persistent animations, such as the undulating effect of nodes or the ant line effect of edges, this can be achieved by customizing the elements. Below is an implementation of an edge with an Ant Line animation provided:

import { Line } from '@antv/g6';

class AntLine extends Line {
  onCreate() {
    this.shapeMap.key.animate([{ lineDashOffset: -20 }, { lineDashOffset: 0 }], {
      duration: 500,
      iterations: Infinity,
    });
  }
}

The onCreate is a lifecycle hook used to execute animations when an element is created.

Configure the edge style in the options as follows:

{
  edge: {
    type: 'ant-line',
    style:{
      lineDash: [10, 10]
    }
  }
}

(() => {
  const { register, Line, Graph } = window.g6;

  class AntLine extends Line {
    onCreate() {
      this.shapeMap.key.animate([{ lineDashOffset: 20 }, { lineDashOffset: 0 }], {
        duration: 500,
        iterations: Infinity,
      });
    }
  }

  register('edge', 'ant-line', AntLine);

  const container = createContainer({ width: 200, height: 50 });

  const graph = new Graph({
    container,
    width: 200,
    height: 50,
    data: {
      nodes: [
        { id: 'node-1', style: { x: 25, y: 25 } },
        { id: 'node-2', style: { x: 175, y: 25 } },
      ],
      edges: [{ source: 'node-1', target: 'node-2', style: { lineDash: [10, 10] } }],
    },
    edge: {
      type: 'ant-line',
    },
  });

  graph.draw();

  return container;
})();

The lineDash is an array for lineDashOffset, and the AntLine effect is achieved by continuously varying the lineDashOffset.

Similarly, you can also create a breathing effect for nodes:

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {}
}

The lineDashOffset is the offset for lineDash, and the AntLine effect is achieved by continuously varying the lineDashOffset.

Similarly, you can also create a breathing effect for nodes:

import { Circle } from '@antv/g6';

class BreathingCircle extends Circle {
  onCreate() {
    this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
      duration: 1000,
      iterations: Infinity,
      direction: 'alternate',
    });
  }
}

Node Style Configuration:

{
  node: {
    type: 'breathing-circle',
    style: {
      halo: true,
      haloLineWidth: 5,
    },
  },
}

(() => {
  const { register, Circle, Graph } = window.g6;

  class BreathingCircle extends Circle {
    onCreate() {
      this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
        duration: 1000,
        iterations: Infinity,
        direction: 'alternate',
      });
    }
  }

  register('node', 'breathing-circle', BreathingCircle);

  const container = createContainer({ width: 50, height: 50 });

  const graph = new Graph({
    container,
    width: 50,
    height: 50,
    data: {
      nodes: [{ id: 'node-1', style: { x: 25, y: 25 } }],
    },
    node: {
      type: 'breathing-circle',
      style: {
        halo: true,
        haloLineWidth: 5,
      },
    },
  });

  graph.draw();

  return container;
})();