FlexChart では、チャートをロードして描画するとき、またはチャートに変更を加えて更新するときのいずれかの方法を使用して、アニメーション効果を有効にすることができます。チャートのアニメーションは、C1.Xamarin.Forms.Core 名前空間にある C1Animation クラスを通してサポートされます。

次の GIF は、FlexChart 内のアニメーションを示しています。

C1Animation クラスの Duration プロパティを使用して、チャート内のアニメーションの持続期間を設定できます。また、C1Easing クラスの値を受け取る C1Animation クラスの Easing プロパティを使用して、アニメーションの値を補間することができます。このクラスは、CircleIn、CircleOut、Linear などの標準イージング関数のコレクションをサポートします。

• CircleIn： 円形に低速で開始して高速化するイージング関数。
• CircleOut： 円形に高速で開始して低速化するイージング関数。
• Linear： 一定速度のイージング関数。

C1Animation animate = new C1Animation();
// 更新アニメーションの期間を設定する
animate.Duration = new TimeSpan(3000 * 10000);
// アニメーションの値を補間する
animate.Easing = C1Easing.Linear;

C1Easing クラスのイージング関数のほかに、FlexChart は、Xamarin.Forms.Easing クラスの組み込みイージング関数をサポートします。詳細については、Xamarin イージングクラスを参照してください。

チャートのロードまたは更新中にアニメーションを表示できます。チャートのロード中にアニメーションを表示するには、ChartBase クラスの LoadAnimation プロパティを使用します。このプロパティは、C1Animation クラスのオブジェクトからロードアニメーションを受け取ります。同様に、値の追加、削除、または修正によって基底のデータコレクションが変化したときにチャートをアニメーションするには、ChartBase クラスの UpdateAnimation プロパティを使用します。

// 読み込みアニメーションを設定する
chart.LoadAnimation = animate;

AnimationMode 列挙の値を受け取る AnimationMode プロパティを設定することで、アニメーション効果を適用することができます。この列挙は、All、None、Series、Point の 4 つのアニメーションモードをサポートします。

• All：プロット領域の下部からすべてのプロット要素が同時にアニメーション表示されます。
• None：アニメーション表示しません。
• Series：プロット領域の下部から各系列が 1 つずつアニメーション表示されます。
• Point：左から右にプロット要素が 1 つずつ表示されます。

// アニメーションモードを設定する
chart.AnimationMode = AnimationMode.Series;