使用动画故事板 storyboard 简洁明了

研究windows phone 编程中，然后搜寻资料，看到了动画故事版，网上找到很多资料，均需要大量代码并没有简洁的说明，

结果还是一个404的快照网页让我茅塞顿开，现在就转载这篇文章。忘那404的兄弟走好

最近在開發手機遊戲，由於遊戲中一開始都會有顯示自己的工作室Logo動畫，在進到遊戲的酷炫效果，所以也開始嘗試製作。
而在開發時因為是使用XAML與XNA的範本，所以會從一般的MainPage.xaml檔進到含有XNA繪圖引擎與相關類別庫的GamePage.xaml檔案，所以便想到要在MainPage透過Storyboard產生動畫效果，當圖片結束後再進到另一個Page
 
那　在這邊除了記錄之，也是給予希望想要在使用完Storyboard後，可以處理你想要的事情的朋友們一個解決方法
PS: 此方法也可以適用在Windows store App,WPF中
 
先來談談Storyboard.Begin方法
 
 
如下，在這邊我希望透過一個Button點擊觸發，播放讓畫面上的Rectangle這個粉紅色的物件，顏色轉淡後，再切換到製作的一個Page2.xaml
[檢視圖片]
 
MainPage.xaml程式檔案
<Grid.Resources>
               <Storyboard x:Name="myStoryboard">
                   <DoubleAnimation
                     Storyboard.TargetName="Rect"
                     Storyboard.TargetProperty="Opacity"
                     From="1.0" To="0.0" Duration="0:0:1"/>
               </Storyboard>
</Grid.Resources>
<Rectangle x:Name="Rect" Fill="Pink" HorizontalAlignment="Center" Height="300"  Stroke="Black" VerticalAlignment="Center" Width="300"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="167,41,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.726,0.436" Click="Button_Click_1"/>
 
然後.cs檔透過button事件處理來啟動storyboard
private void Button_Click_1(object sender, RoutedEventArgs e)
{
           myStoryboard.Begin();
           NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}
可是當程式執行，他卻不會等動畫播完就馬上跳至另一個Page…
猜測應該是使用非同步的方式處理吧（如果有查到相關原因的話還請告知小弟^^”)
 
所以當值行myStoryboard.Begin()後，仍然程式會繼續往下執行呼叫到NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative))導覽到另外一個頁面
 
解決方式－透過Complete事件
 
 
在Animation的類別中，只要有繼承Timeline類別(WPF與Store App也是)，如
ColorAnimation
DoubleAnimation
PointAnimation
ColorAnimationUsingKeyFrame
DoubleAnimationnUsingKeyFrame
PointAnimationUsingKeyFrame
…等
 
 
都有包含Completed事件，透過此事件，可以在我們動畫結尾時觸發此事件來確保動畫有完成，並處理我們想要做的下一件事
如下在DoubleAnimation中便包含此事件
[檢視圖片]
 
然後Code部分再來處理切換到別的Page
//當動畫播完後會進入此事件，導向遊戲選單
private void DoubleAnimation_Completed(object sender, EventArgs e)
{
     NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}
 
除此之外，Storyboard也繼承TimeLine，所以也可以直接透過Storyboard的Complete事件來一次搞定
[檢視圖片]
 
 
如何進到頁面就直接撥動畫
如果剛好要寫遊戲的你看到這篇的話，這裡剛好再次滿足你，透過Loaded事件來處理當Application資源載完後，再來啟動storyboard
this.Loaded += new RoutedEventHandler(NavigationPage_Loaded);
 
void NavigationPage_Loaded(object sender, RoutedEventArgs e)
{
     //如果你需要再進到Page時馬上處理動畫，可以透過Loaded事件
      myStoryboard.Begin();
}
 


最近在開發手機遊戲，由於遊戲中一開始都會有顯示自己的工作室Logo動畫，在進到遊戲的酷炫效果，所以也開始嘗試製作。
而在開發時因為是使用XAML與XNA的範本，所以會從一般的MainPage.xaml檔進到含有XNA繪圖引擎與相關類別庫的GamePage.xaml檔案，所以便想到要在MainPage透過Storyboard產生動畫效果，當圖片結束後再進到另一個Page
 
那　在這邊除了記錄之，也是給予希望想要在使用完Storyboard後，可以處理你想要的事情的朋友們一個解決方法
PS: 此方法也可以適用在Windows store App,WPF中
 
先來談談Storyboard.Begin方法
 
 
如下，在這邊我希望透過一個Button點擊觸發，播放讓畫面上的Rectangle這個粉紅色的物件，顏色轉淡後，再切換到製作的一個Page2.xaml
[檢視圖片]
 
MainPage.xaml程式檔案
<Grid.Resources>
               <Storyboard x:Name="myStoryboard">
                   <DoubleAnimation
                     Storyboard.TargetName="Rect"
                     Storyboard.TargetProperty="Opacity"
                     From="1.0" To="0.0" Duration="0:0:1"/>
               </Storyboard>
</Grid.Resources>
<Rectangle x:Name="Rect" Fill="Pink" HorizontalAlignment="Center" Height="300"  Stroke="Black" VerticalAlignment="Center" Width="300"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="167,41,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.726,0.436" Click="Button_Click_1"/>
 
然後.cs檔透過button事件處理來啟動storyboard
private void Button_Click_1(object sender, RoutedEventArgs e)
{
           myStoryboard.Begin();
           NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}
可是當程式執行，他卻不會等動畫播完就馬上跳至另一個Page…
猜測應該是使用非同步的方式處理吧（如果有查到相關原因的話還請告知小弟^^”)
 
所以當值行myStoryboard.Begin()後，仍然程式會繼續往下執行呼叫到NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative))導覽到另外一個頁面
 
解決方式－透過Complete事件
 
 
在Animation的類別中，只要有繼承Timeline類別(WPF與Store App也是)，如
ColorAnimation
DoubleAnimation
PointAnimation
ColorAnimationUsingKeyFrame
DoubleAnimationnUsingKeyFrame
PointAnimationUsingKeyFrame
…等
 
 
都有包含Completed事件，透過此事件，可以在我們動畫結尾時觸發此事件來確保動畫有完成，並處理我們想要做的下一件事
如下在DoubleAnimation中便包含此事件
[檢視圖片]
 
然後Code部分再來處理切換到別的Page
//當動畫播完後會進入此事件，導向遊戲選單
private void DoubleAnimation_Completed(object sender, EventArgs e)
{
     NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}
 
除此之外，Storyboard也繼承TimeLine，所以也可以直接透過Storyboard的Complete事件來一次搞定
[檢視圖片]
 
 
如何進到頁面就直接撥動畫
如果剛好要寫遊戲的你看到這篇的話，這裡剛好再次滿足你，透過Loaded事件來處理當Application資源載完後，再來啟動storyboard
this.Loaded += new RoutedEventHandler(NavigationPage_Loaded);
 
void NavigationPage_Loaded(object sender, RoutedEventArgs e)
{
     //如果你需要再進到Page時馬上處理動畫，可以透過Loaded事件
      myStoryboard.Begin();
}