このトピックは、 XamDataChart コントロールのトランジション アニメーション機能およびサポートされるシリーズのリストについての情報を提供します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります:
このトピックは、以下のセクションで構成されます。
この機能は、新しいデータ ソースを読み込むときにシリーズをアニメーション化することを許可します。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、 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" (デフォルト値) に設定すると、シリーズ タイプに基づいてトランジション タイプは自動的に選択されます。
以下の例では、以下の設定の結果、トランジション イン アニメーションが有効になり、シリーズ列を右側からアコーディオンできる方法を示します。
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamDataChart x:Name="Chart" >
<ig:XamDataChart.Series>
<ig:ColumnSeries IsTransitionInEnabled="True"
TransitionInSpeed="IndexSpeed">
<ig:ColumnSeries.TransitionInEasingFunction>
<CubicEase />
</ig:ColumnSeries.TransitionInEasingFunction>
</ig:ColumnSeries>
</ig:XamDataChart.Series>
</ig:XamDataChart>C# の場合:
var series = new ColumnSeries();
series.IsTransitionInEnabled = true;
series.TransitionInSpeed = TransitionInSpeedType.IndexSpeed;
series.TransitionInEasingFunction = System.Windows.Media.Animation.CubicEase;Visual Basic の場合:
Dim series As New ColumnSeries()
series.IsTransitionInEnabled = true
series.TransitionInSpeed = TransitionInSpeedType.IndexSpeed
series.TransitionInEasingFunction = System.Windows.Media.Animation.CubicEase以下のトピックでは、このトピックに関連する追加情報を提供しています。