Xamarin.Forms のイージング関数
Xamarin.Forms には、実行中のアニメーションの速度の上げ下げを制御する転送関数を指定できる、イージング クラスが備わっています。 この記事では、定義済みのイージング関数を使用する方法と、カスタム イージング関数を作成する方法について説明します。
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 のイージング関数が使用され、線形速度が生成されます。
Note
Xamarin.Forms 5.0 には、イージング関数の文字列表現を適切な Easing 列挙メンバーに変換する型コンバーターが含まれています。 この型コンバーターは、XAML で設定されている型 Easing のプロパティに対して自動的に呼び出されます。
ViewExtensions クラスでアニメーション拡張メソッドを使用する方法の詳細については、単純なアニメーションに関する記事を参照してください。 イージング関数は、Animation クラスで使用することもできます。 詳細については、「カスタム アニメーション」を参照してください。
カスタム イージング関数
カスタム イージング関数を作成するには、次の 3 つのメイン アプローチがあります。
double引数を受け取り、double結果を返すメソッドを作成します。Func<double, double>を作成する。- イージング関数を
Easingコンストラクターの引数として指定します。
3 つのケースすべてで、カスタム イージング関数では、引数 0 の場合は 0、引数 1 には 1 を返す必要があります。 ただし、引数の値 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 インスタンスは、最終的な配置場所にドロップするように変換されます。
まとめ
この記事では、定義済みのイージング関数を使用する方法と、カスタム イージング関数を作成する方法について説明しました。 Xamarin.Forms には、実行中のアニメーションの速度の上げ下げを制御する転送関数を指定できる、Easing クラスが備わっています。