通过

Xamarin.Forms 中的缓动函数

Xamarin.Forms 包含一个 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 缓动函数，从而产生线性速度。

注意

Xamarin.Forms 5.0 包含一个类型转换器，可将缓动函数的字符串表示转换为适当的 Easing 枚举成员。 在 XAML 中设置的任何 Easing 类型属性都会自动调用该类型转换器。

有关使用 ViewExtensions 类中动画扩展方法的更多信息，请参见简单动画 。 Animation 类也可以使用缓动函数。 有关详细信息，请参阅自定义动画。

自定义缓动函数

创建自定义缓动函数有三种主要方法：

  1. 创建采用 double 参数并返回 double 结果的方法。
  2. 创建 Func<double, double>。
  3. 将缓动函数指定为 Easing 构造函数的参数。

在这三种情况下，如果参数为 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 构造函数的 Lambda 函数参数，并使用 Math.Cos 方法创建受 Math.Exp 方法抑制的缓慢下降效果。 因此，Image 实例被转换成看似下降至其最终静止位置的效果。

总结

本文演示如何使用预定义的缓动函数，以及如何创建自定义缓动函数。 Xamarin.Forms 包含一个 Easing 类，可用于指定一个传输函数来控制动画在运行时如何加速或减速。