中的 Easing 函式 Xamarin.Forms
Xamarin.Forms 包含 Easing 類別,可讓您指定傳輸函式,以控制動畫在執行時如何加速或變慢速度。 本文示範如何使用預先定義的 Easing 函式,以及如何建立自定義 Easing 函式。
類別 Easing
會定義動畫可以使用的一些 Easing 函式:
- easing 函
BounceIn
式會在開頭反彈動畫。 - easing 函
BounceOut
式會在結尾反彈動畫。 - easing 函
CubicIn
式會慢慢加速動畫。 - Easing 函
CubicInOut
式會在開頭加速動畫,並在結尾減速動畫。 - Easing 函
CubicOut
式會快速減速動畫。 - Easing 函
Linear
式會使用常數速度,而且是預設的 Easing 函式。 - Easing 函
SinIn
式可順暢地加速動畫。 - Easing 函
SinInOut
式會順暢地加速開頭的動畫,並順暢地減速動畫結尾。 - Easing 函
SinOut
式會順暢地減速動畫。 - Easing 函
SpringIn
式會使動畫非常快速地加速到結尾。 - Easing 函
SpringOut
式會導致動畫在結尾快速減速。
和 In
Out
後綴表示 Easing 函式所提供的效果是否在動畫開頭、結尾或兩者皆明顯。
此外,也可以建立自定義 Easing 函式。 如需詳細資訊,請參閱 自定義 Easing 函式。
使用 Easing 函式
類別中的 ViewExtensions
動畫擴充方法可讓 easing 函式指定為最終方法參數,如下列程式代碼範例所示:
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);
藉由指定動畫的 Easing 函式,動畫速度會變成非線性,併產生 easing 函式所提供的效果。 在建立動畫時省略 Easing 函式會導致動畫使用預設 Linear
的 Easing 函式,這會產生線性速度。
注意
Xamarin.Forms 5.0 包含類型轉換器,可將 Easing 函式的字串表示轉換成適當的 Easing
列舉成員。 此類型轉換器會在 XAML 中設定的任何類型 Easing
屬性上自動叫用。
如需在 類別中使用 ViewExtensions
動畫擴充方法的詳細資訊,請參閱 簡單動畫。 類別也可以取用 Animation
Easing 函式。 如需詳細資訊,請參閱 自定義動畫。
自訂 Easing 函式
建立自定義 Easing 函式有三個主要方法:
- 建立接受
double
自變數的方法,並傳double
回結果。 - 建立
Func<double, double>
。 - 將 easing 函式指定為建構函式的
Easing
自變數。
在這三種情況下,自定義 Easing 函式應該會針對 0 的自變數傳回 0,而 1 的自變數則傳回 1。 不過,任何值都可以在 0 和 1 的自變數值之間傳回。 現在將接著討論每個方法。
自訂 Easing 方法
自定義 Easing 函式可以定義為接受 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
實例會以離散跳躍轉譯,而不是順暢地轉譯。
自定義 Easing Func
自訂 Easing 函式也可以定義為 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
表示啟動快速、減速和反轉路線的 Easing 函式,然後再次反轉課程,以快速加速到結尾。 因此,雖然實例的整體移動 Image
是向下的,但它也會在動畫中途暫時反轉路線。
自訂 Easing 建構函式
自訂 easing 函式也可以定義為建構函式的 Easing
自變數,如下列程式代碼範例所示:
await image.TranslateTo (0, 200, 2000, new Easing (t => 1 - Math.Cos (10 * Math.PI * t) * Math.Exp (-5 * t)));
自訂 easing 函式會指定為建構函式的 Lambda 函式自變數 Easing
,並使用 Math.Cos
方法來建立方法所抑制 Math.Exp
的緩慢下降效果。 因此, Image
實例會轉譯,使其看起來會捨棄到其最終的休息位置。
摘要
本文示範如何使用預先定義的 Easing 函式,以及如何建立自定義 Easing 函式。 Xamarin.Forms 包含類別 Easing
,可讓您指定傳輸函式,控制動畫在執行時如何加速或變慢。