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

简单动画

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

PDF用于离线使用

• 下载PDF

示例代码：

• 基本动画

相关文章：

• 异步支持概述

相关API：

• ViewExtensions

让我们知道你对此的感受

最后更新：2016年7月

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

概观

本

ViewExtensions

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

• TranslateTo

  动画

  TranslationX

  和

  TranslationY

  属性a 

  VisualElement

  。

• ScaleTo

  动画a的

  Scale

  财产

  VisualElement

  。

• RelScaleTo

  Scale

  对a 的属性应用动画增量或减少

  VisualElement

  。

• RotateTo

  动画a的

  Rotation

  财产

  VisualElement

  。

• RelRotateTo

  Rotation

  对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

方法为

Rotation

an 的属性设置动画

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

方法为

Scale

an 的属性设置动画

Image

：

await image.ScaleTo (2, 2000);           

该代码

Image

通过在2秒（2000毫秒）内扩展两倍的大小来动画实例。该

ScaleTo

方法获取

Scale

动画开始的当前属性值（默认值1），然后从该值缩放到其第一个参数（2）。这具有将图像的尺寸扩大到其尺寸的两倍的效果。

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

相对缩放

以下代码示例演示如何使用该

RelScaleTo

方法为

Scale

an 的属性设置动画

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

和动画进行动画处理：

TranslationY

Image

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

该代码

Image

通过在1秒（1000毫秒）内水平和垂直翻译实例。该

TranslateTo

方法同时将图像向左转100像素，向上翻转100像素。这是因为第一个和第二个参数都是负数。提供正数会将图像转换为正确和向下。

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

衰退

以下代码示例演示如何使用该

FadeTo

方法为

Opacity

an 的属性设置动画

Image

：

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

该代码

Image

通过在超过4秒（4000毫秒）内淡出实例来动画化该实例。该

FadeTo

方法获取

Opacity

动画开始的当前属性值，然后从该值逐渐变为其第一个参数（1）。

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

复合动画

复合动画是动画的连续组合，可以与

await

运算符一起创建，如下面的代码示例所示：

await image.TranslateTo (-100, 0, 1000);    // Move image left
await image.TranslateTo (-100, -100, 1000); // Move image up
await image.TranslateTo (100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo (0, 100, 1000);     // Move image left
await 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 animation
uint 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次，旋转为

RotateTo

251次，旋转为

RotateXTo

199次

RotateYTo

。这些值是素数，因此确保旋转不同步，因此不会导致重复的模式。

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

取消动画

应用程序可以通过调用该

static

ViewExtensions.CancelAnimations

方法来取消一个或多个动画，如下面的代码示例所示：

ViewExtensions.CancelAnimations (image);           

这将立即取消当前在

Image

实例上运行的所有动画。

概要

本文演示了使用

ViewExtensions

该类创建和取消动画。该类提供了可用于构建旋转，缩放，翻译和淡化

VisualElement

实例的简单动画的扩展方法。