トランジション イン アニメーション

この機能は、新しいデータ ソースを読み込むときにシリーズをアニメーション化することを許可します。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、列シリーズは x 軸を上に上昇させるとアニメーションを再生します。折れ線シリーズは y 軸から描画するとアニメーションを再生します。 タイトルおよびサブタイトル情報のためにチャートはサイズ変更できます。

このトピックの内容

• 概要
• サポートされるトランジションのタイプ
• サポートされるトランジションのスピード タイプ
• サポートされるイージング関数のタイプ
• トランジションイン アニメーションを構成する
• 関連トピック

概要

デフォルトでアニメーション トランジションは無効ですが、isTransitionInEnabled オプションを Ture に設定してトランジションイン アニメーションを有効にできます。

アニメーション化されたトランジションのトランジション タイプ、データ ポイントに相対するスピード、およびイージング関数によって管理されるイージング トランジションを構成できます。

サポートされるトランジションのタイプ

移動および方向に基づいて複数のアニメーション トランジションのタイプがサポートされます。

• FromZero - シリーズが数値軸の参照値からトランジションします。

• アコーディオンタイプ トランジション:

  • 側面から:
    • AccordionFromLeft – シリーズは左側からアコーディオンします。
    • AccordionFromRight – シリーズは右側からアコーディオンします。
    • AccordionFromTop – シリーズは上側からアコーディオンします。
    • AccordionFromBottom – シリーズは下側からアコーディオンします。
  • 軸から:
    • AccordionFromCategoryAxisMinimum – シリーズはカテゴリ軸の最小値からアコーディオンします。
    • AccordionFromCategoryAxisMaximum – シリーズはカテゴリ軸の最大値からアコーディオンします。
    • AccordionFromValueAxisMaximum – シリーズは値軸の最大値からアコーディオンします。
    • AccordionFromValueAxisMinimum – シリーズは値軸の最小値からアコーディオンします。

• Expand – シリーズは値の中点から展開します。

• スイープタイプのトランジション:
  • 側面から:
    • SweepFromLeft – シリーズは左側からスイープします。
    • SweepFromRight – シリーズは右側からスイープします。
    • SweepFromTop – シリーズは上側からスイープします。
    • SweepFromBottom – シリーズは下側からスイープします。
    • SweepFromCenter – シリーズは中央からスイープします。
  • 軸から:
    • SweepFromCategoryAxisMaximum – シリーズはカテゴリ軸の最大値からスイープします。
    • SweepFromCategoryAxisMinimum – シリーズはカテゴリ軸の最小値からスイープします。
    • SweepFromValueAxisMaximum – シリーズは値軸の最大値からスイープします。
    • SweepFromValueAxisMinimum – シリーズは値軸の最小値からスイープします。

サポートされるトランジションのスピード タイプ

トランジションのスピード タイプは、アニメーション化されたトランジションが再生されているときに、現在シリーズの項目に相対するスピードを決定します。以下のはスピード タイプです:

• Auto – 自動的にスピード タイプを選択します。
• IndexScaled – データ ポイントのインデックスが軸基点から離れた場合、そのポイントのアニメーションは遅いです。
• Normal – すべてのスピードは標準です。データ ポイントが同じ時間に表示されます。
• Random – データ ポイントがランダム時間に表示されます。
• ValueScaled – データ ポイントの値が開始ポイントから離れた場合、そのポイントのアニメーションは遅いです。

サポートされるイージング関数のタイプ

イージング関数は、アニメーションのイーズ インする方法を決定します。イージング関数を適用できます。デフォルト値は CubicEase です。

トランジションイン アニメーションを構成する

トランジション タイプは、transitionInMode プロパティを任意のトランジション名に設定すると構成されます。プロパティを “Auto” (デフォルト値) に設定すると、シリーズ タイプに基づきトランジション タイプを自動的に選択することもできます。

以下の例では、トランジション イン アニメーションが有効になり、チャートを右側からアコーディオンできる方法を示します。

HTML の場合:

$(function () {
   $("#chart").igCategoryChart({
      dataSource: data,
      chartType: "auto",
      isTransitionInEnabled: true,
      transitionInDuration: 500,
      transitionInEasingFunction:"cubic"
    });
});

関連トピック:

• igCategoryChart の追加

• データ バインド