[XAML|Windows Phone] 如何使動畫(故事本 Storyboard)結束後,處理想要做的事情

最近在開發手機遊戲,由於遊戲中一開始都會有顯示自己的工作室Logo動畫,在進到遊戲的酷炫效果,所以也開始嘗試製作。

而在開發時因為是使用XAML與XNA的範本,所以會從一般的MainPage.xaml檔進到含有XNA繪圖引擎與相關類別庫的GamePage.xaml檔案,所以便想到要在MainPage透過Storyboard產生動畫效果,當圖片結束後再進到另一個Page

那麼在這邊除了記錄之,也是給予希望想要在使用完Storyboard後,可以處理你想要的事情的朋友們一個解決方法

PS: 此方法也可以適用在Windows store App,WPF中

前言

 


 

最近在開發手機遊戲,由於遊戲中一開始都會有顯示自己的工作室Logo動畫,在進到遊戲的酷炫效果,所以也開始嘗試製作。

而在開發時因為是使用XAML與XNA的範本,所以會從一般的MainPage.xaml檔進到含有XNA繪圖引擎與相關類別庫的GamePage.xaml檔案,所以便想到要在MainPage透過Storyboard產生動畫效果,當圖片結束後再進到另一個Page

 

那麼在這邊除了記錄之,也是給予希望想要在使用完Storyboard後,可以處理你想要的事情的朋友們一個解決方法

PS: 此方法也可以適用在Windows store App,WPF中

 

先來談談Storyboard.Begin方法

 


 

如下,在這邊我希望透過一個Button點擊觸發,播放讓畫面上的Rectangle這個粉紅色的物件,顏色轉淡後,再切換到製作的一個Page2.xaml

mainpage

 

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類別(WPFStore App也是),如

ColorAnimation

DoubleAnimation

PointAnimation

ColorAnimationUsingKeyFrame

DoubleAnimationnUsingKeyFrame

PointAnimationUsingKeyFrame

…等

 

 

都有包含Completed事件,透過此事件,可以在我們動畫結尾時觸發此事件來確保動畫有完成,並處理我們想要做的下一件事

如下在DoubleAnimation中便包含此事件

complete

 

然後Code部分再來處理切換到別的Page


//當動畫播完後會進入此事件,導向遊戲選單
private void DoubleAnimation_Completed(object sender, EventArgs e)
{
     NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}

 

除此之外,Storyboard也繼承TimeLine,所以也可以直接透過Storyboard的Complete事件來一次搞定

storyboard

 

 

如何進到頁面就直接撥動畫

如果剛好要寫遊戲的你看到這篇的話,這裡剛好再次滿足你,透過Loaded事件來處理當Application資源載完後,再來啟動storyboard


this.Loaded += new RoutedEventHandler(NavigationPage_Loaded);

 


void NavigationPage_Loaded(object sender, RoutedEventArgs e)
{
     //如果你需要再進到Page時馬上處理動畫,可以透過Loaded事件
      myStoryboard.Begin();
}

 

HelloStoryboardComplete.zip

 

參考資料

計時事件概觀

 


 

文章中的敘述如有觀念不正確錯誤的部分,歡迎告知指正 謝謝 =)

另外要轉載請附上出處 感謝