Xamarin.Forms 用户界面——动画——简单动画

简单动画

旋转，缩放，翻译和褪色的视觉元素

PDF用于离线使用

• 下载PDF

示例代码：

• 基本动画

相关文章：

• 异步支持概述

相关API：

• ViewExtensions

让我们知道你对此的感受

最后更新：2016年7月

ViewExtensions类提供了可用于构造简单动画的扩展方法。本文演示使用ViewExtensions类创建和取消动画。

概观

本ViewExtensions类提供了可用于创建简单的动画以下扩展方法：

• TranslateTo动画TranslationX和TranslationY属性a VisualElement。
• ScaleTo动画a的Scale财产VisualElement。
• RelScaleToScale对a 的属性应用动画增量或减少VisualElement。
• RotateTo动画a的Rotation财产VisualElement。
• RelRotateToRotation对a 的属性应用动画增量或减少VisualElement。
• RotateXTo动画a的RotationX财产VisualElement。
• RotateYTo动画a的RotationY财产VisualElement。
• FadeTo动画a的Opacity财产VisualElement。

默认情况下，每个动画将需要250毫秒。但是，创建动画时可以指定每个动画的持续时间。

所述ViewExtensions类还包括一个CancelAnimations可被用于取消任何动画的方法。

的ViewExtensions类提供了一个LayoutTo扩展方法。然而，该方法旨在通过布局来使用，以便在包含大小和位置变化的布局状态之间进行动画转换。因此，它只应由Layout子类使用。

类中的动画扩展方法ViewExtensions都是异步的，并返回一个Task<bool>对象。false如果动画完成，并且true动画被取消，则返回值。因此，动画方法通常与await操作者一起使用，这样可以很容易地确定动画何时完成。此外，随后可以在先前的方法完成之后执行随后的动画方法来创建顺序动画。有关更多信息，请参阅复合动画。

如果需要让动画在后台完成，则await可以省略操作员。在这种情况下，动画扩展方法将在启动动画后快速返回，动画发生在后台。当创建复合动画时，可以利用此操作。有关详细信息，请参阅复合动画。

有关await操作员的更多信息，请参阅异步支持概述。

单一动画

每个扩展方法都ViewExtensions实现一个单一的动画操作，它将一个属性从一个值逐渐改变为另一个值。本节探讨每个动画操作。

回转

以下代码示例演示如何使用该RotateTo方法为Rotationan 的属性设置动画Image：

await image.RotateTo (360, 2000);image.Rotation = 0;

此代码Image通过在2秒（2000毫秒）内旋转高达360度来动画实例。该RotateTo方法获取Rotation动画开始的当前属性值，然后从该值旋转到其第一个参数（360）。动画完成后，图像的Rotation属性将重置为0.这样可以确保Rotation在动画结束后属性不会保留在360，这样可以防止额外的旋转。

以下屏幕截图显示了每个平台上的旋转进程：

相对旋转

以下代码示例演示如何使用该RelRotateTo方法递增地增加或减少以下的Rotation属性Image：

await image.RelRotateTo (360, 2000);

该代码Image通过从其起始位置旋转360度超过2秒（2000毫秒）来动画实例。该RelRotateTo方法获取Rotation动画开始的当前属性值，然后从该值旋转到该值加上其第一个参数（360）。这确保每个动画总是从起始位置旋转360度。因此，如果在动画已经进行过程中调用了新的动画，它将从当前位置开始，并且可能在不是360度增量的位置处结束。

以下屏幕截图显示了每个平台上正在进行的相对旋转：

缩放

以下代码示例演示如何使用该ScaleTo方法为Scalean 的属性设置动画Image：

await image.ScaleTo (2, 2000);

该代码Image通过在2秒（2000毫秒）内扩展两倍的大小来动画实例。该ScaleTo方法获取Scale动画开始的当前属性值（默认值1），然后从该值缩放到其第一个参数（2）。这具有将图像的尺寸扩大到其尺寸的两倍的效果。

以下屏幕截图显示了每个平台上的缩放：

相对缩放

以下代码示例演示如何使用该RelScaleTo方法为Scalean 的属性设置动画Image：

await image.RelScaleTo (2, 2000);

该代码Image通过在2秒（2000毫秒）内扩展两倍的大小来动画实例。该RelScaleTo方法获取Scale动画开始的当前属性值，然后从该值缩放到该值加上其第一个参数（2）。这确保每个动画始终从起始位置缩放为2。

锚定缩放和旋转

的AnchorX和AnchorY属性中设置缩放或旋转的中心Rotation和Scale属性。因此，他们的价值观也会影响RotateTo和ScaleTo方法。

给定一个Image布局的中心，下面的代码示例演示了通过设置其AnchorY属性来绕着布局中心旋转图像：

image.AnchorY = (Math.Min (absoluteLayout.Width, absoluteLayout.Height) / 2) / image.Height;await image.RotateTo (360, 2000);

要旋转Image周围的布局的中心情况下，AnchorX和AnchorY属性必须被设置为是相对于的宽度和高度的值Image。在这个例子中，它的中心Image被定义为布局的中心，所以默认AnchorX值为0.5并不需要改变。然而，AnchorY属性被重新定义为从Image布局的顶部到中心点的值。这可以确保Image围绕布局的中心点进行360度的全旋转，如以下屏幕截图所示：

翻译

以下代码示例演示如何使用该TranslateTo方法对an的属性TranslationX和动画进行动画处理：TranslationYImage

await image.TranslateTo (-100, -100, 1000);

该代码Image通过在1秒（1000毫秒）内水平和垂直翻译实例。该TranslateTo方法同时将图像向左转100像素，向上翻转100像素。这是因为第一个和第二个参数都是负数。提供正数会将图像转换为正确和向下。

以下屏幕截图显示了每个平台上的正在进行的翻译：

衰退

以下代码示例演示如何使用该FadeTo方法为Opacityan 的属性设置动画Image：

image.Opacity = 0;await image.FadeTo (1, 4000);

该代码Image通过在超过4秒（4000毫秒）内淡出实例来动画化该实例。该FadeTo方法获取Opacity动画开始的当前属性值，然后从该值逐渐变为其第一个参数（1）。

以下屏幕截图显示了每个平台上的淡入淡出：

复合动画

复合动画是动画的连续组合，可以与await运算符一起创建，如下面的代码示例所示：

await image.TranslateTo (-100, 0, 1000);    // Move image leftawait image.TranslateTo (-100, -100, 1000); // Move image upawait image.TranslateTo (100, 100, 2000);   // Move image diagonally down and rightawait image.TranslateTo (0, 100, 1000);     // Move image leftawait image.TranslateTo (0, 0, 1000);       // Move image up

在这个例子中，Image翻译超过6秒（6000毫秒）。Image使用五个动画的翻译，await操作员指示每个动画顺序执行。因此，在之前的方法完成之后执行后续的动画方法。

复合动画

复合动画是两个或多个动画同时运行的动画组合。可以通过混合等待已久的动画来创建复合动画，如以下代码示例所示：

image.RotateTo (360, 4000);await image.ScaleTo (2, 2000);await image.ScaleTo (1, 2000);

在这个例子中，Image缩放并同时旋转4秒（4000毫秒）。Image使用与旋转同时发生的两个连续动画的缩放。该RotateTo方法在没有await操作符的情况下执行并立即返回，第一个ScaleTo动画随后开始。第await一个ScaleTo方法调用的运算符延迟第二个ScaleTo方法调用，直到第一个ScaleTo方法调用完成。在这一点上，RotateTo动画已经完成了一半，Image旋转了180度。在最后的2秒（2000毫秒），第二个ScaleTo动画和RotateTo动画都完成了。

同时运行多个异步方法

的static Task.WhenAny和Task.WhenAll方法用于同时运行多个异步方法，并且因此可以被用来创建复合动画。这两种方法都返回一个Task对象并接受每个返回Task对象的方法集合。该Task.WhenAny方法在其集合中的任何方法完成执行时完成，如以下代码示例所示：

await Task.WhenAny<bool>(  image.RotateTo (360, 4000),  image.ScaleTo (2, 2000));await image.ScaleTo (1, 2000);

在这个例子中，Task.WhenAny方法调用包含两个任务。第一个任务旋转图像超过4秒（4000毫秒），第二个任务缩放图像超过2秒（2000毫秒）。当第二个任务完成时，Task.WhenAny方法调用完成。但是，即使该RotateTo方法仍在运行，第二种ScaleTo方法可以开始。

该Task.WhenAll方法在其集合中的所有方法已完成时完成，如以下代码示例所示：

// 10 minute animationuint duration = 10 * 60 * 1000;await Task.WhenAll (  image.RotateTo (307 * 360, duration),  image.RotateXTo (251 * 360, duration),  image.RotateYTo (199 * 360, duration));

在这个例子中，Task.WhenAll方法调用包含三个任务，每个任务执行超过10分钟。每个Task旋转数为360度，旋转数为307次，旋转为RotateTo251次，旋转为RotateXTo199次RotateYTo。这些值是素数，因此确保旋转不同步，因此不会导致重复的模式。

以下屏幕截图显示了每个平台上正在进行的多轮：

取消动画

应用程序可以通过调用该static ViewExtensions.CancelAnimations方法来取消一个或多个动画，如下面的代码示例所示：

ViewExtensions.CancelAnimations (image);

这将立即取消当前在Image实例上运行的所有动画。

概要

本文演示了使用ViewExtensions该类创建和取消动画。该类提供了可用于构建旋转，缩放，翻译和淡化VisualElement实例的简单动画的扩展方法。