windows phone開發學習–storyboard的動畫效果

在windows phone應用程式的開發中，比較炫的動畫效果能增加使用者的體驗感，初級的如平移和翻轉這些動畫，進階的就涉及到遊戲中的一些動畫了。目前做的這個應用正好需要這麼一個效果，於是學習了一下如何做齣動畫效果，發現其實挺簡單的，微軟提供了一個storyboard的控制項，使用即可。

例如我需要添加翻轉效果，而且在翻轉過後顯示不同的內容，只需要在xaml以及背景cs中添加下面代碼即可：

xaml: 注意並不一定需要添加到頁面中，添加到使用者控制項中可以，只需要把前後定位器改為<UserControl.Resources> ...</UserControl.Resources>即可

<phone:PhoneApplicationPage.Resources><Storyboard x:Name="Storyboard1"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBox1"><EasingDoubleKeyFrame KeyTime="0" Value="1"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"><EasingDoubleKeyFrame.EasingFunction><CircleEase EasingMode="EaseIn"/></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame></DoubleAnimationUsingKeyFrames></Storyboard>            <Storyboard x:Name="Storyboard2"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="textBox1"><EasingDoubleKeyFrame KeyTime="0" Value="0"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"><EasingDoubleKeyFrame.EasingFunction><CircleEase EasingMode="EaseOut"/></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame></DoubleAnimationUsingKeyFrames></Storyboard></phone:PhoneApplicationPage.Resources>

其中Storyboard.TargetName="textBox1" 指出針對哪個控制項進行動畫效果，在相應的控制項下也需要添加相應代碼：

<TextBox.RenderTransform>            <CompositeTransform/>            </TextBox.RenderTransform>

其中針對翻轉有一個參數設定，是按照中心翻轉還是按照上下翻轉，在控制項中設定對應的 RenderTransformOrigin="0.5,0.5" 即可，我這裡是設定按照中心翻轉

在後台cs代碼中設定響應事件，例如點擊滑鼠：

     private void button1_Click(object sender, RoutedEventArgs e)        {            Storyboard1.Begin();            Storyboard1.Completed +=              (o, args) =>              {                textBox1.Text = "這是翻轉之後的文本";                Storyboard2.Begin();              };                 }

注意這裡是非同步呼叫，其實也可以換一種做法，就是在storyboard中添加完成事件，例如

 <Storyboard x:Name="Storyboard1" Completed="Storyboard1_Completed">

然後在背景對應函數中添加處理

 private void Storyboard1_Completed(object sender, EventArgs e)        {            if (flag == 1)            {              //  DecrementMonth();                Storyboard2.Begin();            }            else            {               // IncrementMonth();                Storyboard2.Begin();            }        }

以上兩種做法是類似的，不過我更喜歡第二種方法，畢竟這樣只需要用一個控制項出發storyboard開始，然後就不用去管了，storyboard完成時會自動調用自己的完成函數。

很顯然翻轉只是各種動畫中最簡單的一種，目前這種效果對當前的項目來說已經夠了。storyboard中涉及到很多參數，如果仔細研究下肯定能做出自己需要的效果，邊做邊學吧。