天天看點

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

最後的步驟将是有趣的。我們将建立錄制音頻螢幕上卷盤對象的動畫。我們希望它在錄制時能夠旋轉。這是對應用程式正在執行工作的很好的可視化,它向使用者提供了一個很好的可視化提示:他們正在執行應用程式中的一項重要操作。

本課的計劃:

我們将建立一個示範圖闆(storyboard),該示範圖闆中包含對橢圓及其它對象進行旋轉的動畫

我們将通過程式設計方式啟動并停止動畫

但是首先我們需要學習一些在Windows Phone上建立動畫的知識。

在我們深入探讨動畫主題前,我希望對它進行一個概要介紹。一旦我們熟悉了

動畫如何在XAML使用者界面架構中工作,在将特定動畫應用到旋轉轉盤時将會更有信心。

首先,我們需要知道到Grid、Button等XAML控件與動畫定義是分開的。您可以根據需要建立應用于不同控件的動畫。動畫與控件關聯并在随後通過事件觸發。在本例中,我們已經定義了Grid和構成卷盤的形狀。我們将很快定義與二者相關的動畫,然後我們将編寫C#代碼觸發動畫。我們将在本課結束前完成所有這些工作。

動畫由一個示範圖闆和至少一個動畫對象組成。

讓我們先讨論動畫。首先,有幾種不同類型的動畫資料類型。我們将使用DoubleAnimation資料類型,因為我們希望從0.0到360.0移動Rotation(旋轉)屬性,0.0到360.0是每4秒鐘動畫移動的角度。換句話說,我希望Grid每隔4秒旋轉一圈。除了DoubleAnimation,還有在兩種顔色之間建立動畫的類ColorAnimation,修改對象XY坐标或大小的PointAnimation。

動畫基本上是時間線(timeline)與結果的組合。該結果由特定的您選擇的動畫類決定。重要的是要知道所有的動畫類繼承自Timeline類,它提供了與動畫時間相關的屬性。BeginTime允許您延遲動畫的啟動,也許是需要等待示範圖闆上的其它動畫的開始或完成,Duration屬性将影響在提供所需的結果前動畫需要持續多久,例如它可以是指淡入效果需要多長時間。還有AutoReverse和RepeatBehavior屬性,它們分别用于訓示是否自動按相反的順序播放以及時間線的重複行為。

示範圖闆是一個或多個動畫的集合。您根據需要對動畫進行組合,這些動畫被按鈕單擊,加載事件等特定的事件觸發。示範圖闆允許您将動畫與目标對象進行配對。動畫是對哪些屬性将被影響,什麼時候以及多長時間将被影響的定義。我們需要将動畫應用于目标對象。在本例中目标對象是Grid,它包含代表卷盤的形狀。

我們的示範圖闆很簡單,因為我們僅希望發生一件事情:每4秒鐘從0度旋轉到360度。一旦我們準備好允許示範圖闆進行播放,我們調用它的Begin()方法。它将依次啟動所有的子動畫和子示範圖闆。

有4種可能的轉換用于建立動畫,您可以參考以下頁面:

<a href="http://msdn.microsoft.com/en-us/library/ms750596.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/ms750596.aspx</a>

(該文章針對WPF,但是許多概念可以轉換到Windows Phone API中繼續使用。)

旋轉轉換(RotateTransform)

縮放轉換(ScaleTransform)

扭曲轉換(SkewTransform)

平移轉換(TranslateTransform)

此外您可以使用ColorAnimation對其它屬性進行更改。關于動畫還有很多内容需要學習,為擷取有關動畫更完整的解釋,我建議您從這裡開始:

<a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206955(v=vs.105).aspx" target="_blank">http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206955(v=vs.105).aspx</a>

現在您已具備了示範圖闆和動畫的基本知識,讓我們對Grid進行修改(它包含了構成卷盤圖像的形狀)。您需要回想一下一個大的橢圓、幾個小的矩形和一個小的橢圓出于布局的目的被包含在Grid中。

為了讓它們同時都能正确移動,僅建立網格(grid,而不是每個單獨的形狀)的動畫/旋轉更為容易:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

我将添加一個名稱,這樣我可以通過程式設計方式通路它,我希望整個網格和它的所有子對象作為一個組合體一起旋轉:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

添加程式設計方式需要的名稱屬性

我将RenderTransform設定為CompositeTransform。本質上我這樣設定的目的是将Grid的内容作為一個完整的單元進行轉換。我沒有提供如何轉換網格的細節,僅僅是說我希望将網格以及它的子對象作為一個組執行轉換。我将在示範圖闆中定義如何轉換網格。

在靠近RecordAudio.xaml頁面頂部(PhoneApplicationPage聲明的下方),我将添加一個資源部分(a Resources section):

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

我們建立了一個頁面級别的資源

我們建立了一個示範圖闆,因為它是頁面級别的,是以我們可以在本頁的其它位置重複使用。我們設定示範圖闆的名稱為"RotateCircle",并且它一旦啟動,它的重複行為是"Forever(永久)"。馬上我将通過示範圖闆的名稱以程式設計方式通路它以實作示範圖闆的啟動/停止。

我們将建立一個DoubleAnimation對象。為什麼是DoubleAnimation?正如我們在開始時讨論的,我們希望從0.0到360.0這個範圍修改Rotation屬性(見Storyboard.Target屬性),它是一個數值屬性(是以我們需要使用DoubleAnimation)。我們設定動畫的持續時間(Duration)到4秒,是以在4秒鐘内我們希望Rotation的值從0開始并增加到360。我們将TargetName設定為包含卷盤的Grid的名稱。TargetProperty有些棘手。我們必須這樣寫是因為我們正在處理複合轉換(CompositeTransform)。正如我剛才提到的,我們希望建立Grid和它的子對象的動畫。否則我們可以簡單地設定TargetProperty="Rotation"。

在以聲明方式定義動畫後,接下來的步驟很簡單。我們将根據ToggleButton的狀态啟動并停止動畫:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

開始錄制時,啟動動畫。

當停止錄制時,停止動畫。

如果我們此時運作應用程式,我們會發現在錄制時的一個奇怪行為:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

這是因為我們沒有定義轉換發生的原點。它不應在預設的XY位置(0,0左上角),我們希望它位于中間位置(.5, .5),是以我們将RenderTransformOrigin設定到該位置:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

現在當我們重新運作應用程式,卷盤将旋轉而不是移動:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

我想看看它在我的Nokia Lumia 920上運作的怎麼樣,是以我通過USB接口将手機連接配接到計算機并使用工具欄上運作按鈕旁的下拉清單選擇裝置:

Windows Phone 8初學者開發—第22部分:用示範圖闆建立卷盤的動畫第22部分: 用示範圖闆建立卷盤的動畫

我可以運作應用程式,錄制并儲存聲音,甚至與在Visual Studio中使用模拟器一樣設定斷點。非常好。

綜上所述,在本課中您學習了使用示範圖闆建立動畫以及動畫類之間的關系。我們讨論了不同類型的動畫和轉換,您可以将它們添加到您的應用程式中。随後我們學習了如何通過程式設計方式觸發并停止示範圖闆。我們學習了通過更改RenderTransformOrigin屬性對旋轉動畫的開始位置進行修改。本課的重點是考慮到XAML和Windows Phone API中提供的豐富的動畫選項,您的任何想象都可以找到辦法來完成。

現在我們已經完成了應用程式的第一個版本,我希望您自己能夠添加一些功能。我自己尚未添加這些特性,顯然實作這些特性需要花上一兩天來研究、開發和調試,這裡就是我希望您嘗試和添加的特性:

向每個項目添加圖像。您需要修改資料模型以容納一個相關的圖像檔案,并且您需要向項目添加圖像檔案,向DataTemplate添加一個Image控件并綁定到該控件。實際上如果您觀看本系列的其餘部分,您會獲得如何做到這一點的一些提示,因為在我們建立第二個完整應用程式時會将圖像綁定到磁貼。

删除項目。如果您添加了自定義聲音,現在還沒有辦法删除它。這是一個令人不快的限制。Clint建議您使用Windows Phone Toolkit中的上下文菜單。我們在建立下一個應用程式過程中也将學習如何使用它。

将聲音固定到開始頁面。這是我從沒有嘗試實作的功能,但是我知道有相關的教程可以提供指導。

是否還有其它特性可以使這個應用程式變得更酷?嘗試添加它們或在本視訊下面的評論部分與您的同學分享這些挑戰。

現在我們需要在下一課中繼續開始我們的第二個應用程式。

繼續閱讀