バージョン

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

トピックの概要

目的

このトピックは、igDataChart™ コントロールのトランジション アニメーション機能およびサポートされるシリーズのリストについての情報を提供します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります:

このトピックでは、igDataChart™ コントロールをページに追加し、データにバインドする方法を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

はじめに

概要

この機能は、新しいデータ ソースを読み込むときのシリーズのアニメーション化を可能にします。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、columnSeries は x 軸から上昇するアニメーション、lineSeries は y 軸から描画するアニメーションを再生します。シリーズのアニメーションについて、トランジション アニメーション サンプルおよびトランジション アニメーション (財務) を参照してください。

isTransitionInEnabled プロパティを true に設定すると、アニメーション化されたトランジションを有効にします。

デフォルトで、アニメーション化されたトランジションは無効になっています。

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

サポートされるシリーズ

以下のシリーズ タイプはトランジション アニメーション機能をサポートします:

  • カテゴリ シリーズ
  • 範囲カテゴリ シリーズ
  • 財務物価シリーズ
  • 財務指標

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

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

  • 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" (デフォルト値) に設定すると、シリーズ タイプに基づきトランジション タイプを自動的に選択することもできます。

例

以下の例は、財務チャートでトランジション イン アニメーションを有効にして変更する方法を紹介します。

トランジション アニメーション (財務)

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する追加情報を提供しています。

このトピックでは、igDataChart™ コントロールをページに追加する方法を紹介します。 and bind it to data.

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub