共用方式為


中的 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 式會導致動畫在結尾快速減速。

InOut 後綴表示 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 函式有三個主要方法:

  1. 建立接受 double 自變數的方法,並傳 double 回結果。
  2. 建立 Func<double, double>
  3. 將 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 ,可讓您指定傳輸函式,控制動畫在執行時如何加速或變慢。