イージング関数

.NET マルチプラットフォーム アプリ UI (.NET MAUI) には、アニメーションの実行中にどのように加速または減速するかを制御する伝達関数を指定できる Easing クラスが含まれています。

Easing クラスは、アニメーションで使用できる多数のイージング関数を定義します。

• BounceIn イージング関数は、最初にアニメーションをバウンスします。
• BounceOut イージング関数は、最後にアニメーションをバウンスします。
• CubicIn イージング関数は、アニメーションをゆっくりと加速します。
• CubicInOut イージング関数は、最初にアニメーションを加速し、最後にアニメーションを減速します。
• CubicOut イージング関数は、アニメーションをすばやく減速します。
• Linear イージング関数は一定の速度を使用し、既定のイージング関数です。
• SinIn イージング関数はアニメーションをスムーズに加速します。
• SinInOut イージング関数は、最初のアニメーションをスムーズに加速し、最後にアニメーションをスムーズに減速します。
• SinOut イージング関数はアニメーションをスムーズに減速します。
• SpringIn イージングを使用すると、アニメーションが最後に向かって非常にすばやく加速します。
• SpringOut イージング関数を使用すると、アニメーションは末尾に向かってすばやく減速します。

In と Out のサフィックスは、イージング関数によって提供される効果が、アニメーションの先頭、末尾、またはその両方で目立つかどうかを示します。

さらに、カスタム イージング関数を作成できます。 詳細については、「カスタム イージング関数」をご覧ください。

イージング関数を使用する

ViewExtensions クラスのアニメーション拡張メソッドを使用すると、イージング関数を最後のメソッド引数として指定できます。

await image.TranslateTo(0, 200, 2000, Easing.BounceIn);
await image.ScaleTo(2, 2000, Easing.CubicIn);
await image.RotateTo(360, 2000, Easing.SinInOut);
await image.ScaleTo(1, 2000, Easing.CubicOut);
await image.TranslateTo(0, -200, 2000, Easing.BounceOut);

アニメーションにイージング関数を指定すると、アニメーションの速度が非線形になり、イージング関数によって提供される効果が生成されます。 アニメーションを作成するときにイージング関数を省略すると、アニメーションで既定の Linear のイージング関数が使用され、線形速度が生成されます。

ViewExtensions クラスでのアニメーション拡張メソッドの使用の詳細については、「基本アニメーション」をご覧ください。 イージング関数は、Animation クラスで使用することもできます。 詳細については、「カスタム アニメーション」をご覧ください。

カスタム イージング関数

カスタム イージング関数を作成するには、次の 3 つのメイン アプローチがあります。

1. double 引数を受け取り、double 結果を返すメソッドを作成します。
2. Func<double, double> を作成します。
3. イージング関数を Easing コンストラクターの引数として指定します。

3 つのケースすべてにおいて、カスタム イージング関数は 0 から 1 までの値を返す必要があります。

カスタム イージング メソッド

カスタム イージング関数は、double 引数を受け取り、double 結果を返すメソッドとして定義できます。

double CustomEase (double t)
{
  return t == 0 || t == 1 ? t : (int)(5 * t) / 5.0;
}

await image.TranslateTo(0, 200, 2000, (Easing)CustomEase);

この例では、CustomEase メソッドは受信値を 0、0.2、0.4、0.6、0.8、1 の値に切り捨てます。 したがって、Image インスタンスはスムーズではなく、個別のジャンプで変換されます。

カスタム イージング関数

カスタム イージング関数は、Func<double, double> として定義することもできます。

Func<double, double> CustomEaseFunc = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;
await image.TranslateTo(0, 200, 2000, CustomEaseFunc);

この例では、CustomEaseFunc は、高速で開始し、速度を落としてコースを反転し、最後に向かってすばやく加速するために再びコースを反転するイージング関数を表します。 したがって、Image インスタンスの全体的な動きは下向きですが、アニメーションの途中で一時的にコースが反転します。

カスタム イージング コンストラクター

カスタム イージング関数は、Easing コンストラクターの引数として定義することもできます。

await image.TranslateTo(0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));

この例では、カスタム イージング関数が Easing コンストラクターへのラムダ関数の引数として指定され、Math.Cos メソッドを使用して、Math.Exp メソッドによって減衰される低速ドロップ効果を作成します。 そのため、Image インスタンスは、最終的な位置にドロップするように変換されます。