4.7 アニメーション

アニメーションを使用すると、グラフの頂点やエッジのダイナミックな動きを表示できます。アニメーションは、settingsフィルタを使用して適用できます。

頂点のストローク幅がアニメーション化されたグラフが表示される例を次に示します:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';

import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};
settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles= [
  {
    target: 'vertex',
    component: 'vertex',
    legendTitle: 'Vertex animation',
    animations: [[
      {
        duration: 1,
        keyFrames: [
          {
            percentage: 0,
            style: {
              strokeWidth: '3px'
            }
          },
          {
            percentage: 50,
            style: {
              strokeWidth: '7px'
            }
          },
          {
            percentage: 100,
            style: {
              strokeWidth: '3px'
            }
          }
        ]
      }
    ]],
    conditions: {
      operator: 'and',
      // This rule is applied to all vertices.
      conditions: []
    }
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

次の値を使用してアニメーションを構成できます:

• duration: アニメーションの期間を秒単位で定義します。
• keyframes: アニメーション中にエンティティに適用する必要があるすべての変更を表す配列。

指定する必要があるkeyframesプロパティは次のとおりです:

• percentage: キーフレームを適用する必要がある、アニメーションの継続期間のパーセントを表します。スムーズなアニメーションを生成するには:
  • 複数のキーフレーム: 値はゼロから開始し、100で終了する必要があります。
  • 単一のキーフレーム: パーセント値が100である必要があります。

  このオプションは、strokeDashoffsetを操作する場合にのみ意味があります。

• style: 各キーフレームでエンティティに適用する必要があるスタイル。

サポートされているスタイル・プロパティは次のとおりです:

• strokeWidth: 頂点を囲むストロークの幅およびエッジの幅も定義します。これは、任意の有効なcss値として渡すことができます(pxをお薦めします)。
• stroke: 頂点とエッジを囲むストロークの色を定義します。
• opacity: 0から1のスケールで不透明度を定義します。0は要素が完全に非表示であることを示し、1は要素が最大不透明度で完全に表示されることを示します。
• r (頂点にのみ適用): 適用先の頂点の半径を定義します。
• strokeDashoffset (エッジにのみ適用): エッジの破線パターンに適用する必要があるオフセット量を定義します。負の値を指定すると、オフセットが反対方向に移動します。このアニメーションを表示するには、破線パターンをエッジに適用する必要があります。そうしないと、グラフには何も表示されません。

次の例では、strokeDashoffsetを使用してエッジ・アニメーションを適用する方法について説明します:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';

import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {};

settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles = [
  {
    target: 'edge',
    component: 'edge',
    legendTitle: 'Edge animation',
    style: {
      dasharray: 'dashed'
    },
    animations: [
      [
        {
          duration: 1,
          keyFrames: [
            {
              percentage: 100,
              style: {
                strokeDashoffset: 50
              }
            }
          ]
        }
      ]]
    ,
    conditions: {
      operator: 'and',
      conditions: []
    }
  }
];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});