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

執行個體的簡單動畫的擴充方法。