[Windows 8 App]Storyboard-----主題動畫

2013-12-28

1819
0
Windows 8 控制項
2013-12-30

Storyboard是一個用來添加動畫的容器

透過Storyboard可以建立主題動畫、插值動畫和關鍵影格動畫

他們都是依據時間線進行播放動畫

並且能夠在後台通過添加事件來控制動畫的播放、暫停、恢復以及停止

主題動畫

Windows 8 系統中包含了豐富的主題動畫

在開發Windows 應用商店應用時，

使用主題動畫編寫較少的程式碼就可以達到所期望的動畫效果

下面介紹一些常用的主題動畫

FadeInThemeAnimation ：用來設定控制項在屏幕中的淡入效果

FadeOutThemeAnimation：用來設定控制項從介面中刪除或隱藏時的淡出效果

DropTargetItemThemeAnimation：應用在拖放目標元素的預設動畫

PopInThemeAnimation ：控制項的彈入元件顯示時應用在控制上的預設動畫，此動畫結合了不透明度和轉換

PopOutThemeAnimation ：控制項的彈入元件關閉或刪除時應用在控制上的預設動畫，此動畫結合了不透明度和轉換

RepositionThemeAnimation：介面元件重新配置時使用的預設動畫

PointerDownThemeAnimation：代表一個預設動畫，當使用者點擊元素時動畫會進行

PointerUpThemeAnimation ：在點擊一個項目或元素後進行的使用者操作預設動畫

下面以FadeOutThemeAnimation 動畫做範例

首先，新增一個專案【FadeOutThemeAnimation 】，開啟【MainPage.xaml】

在Grid程式碼中輸入以下程式碼：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <FadeOutThemeAnimation Storyboard.TargetName="MyRectangle" />
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>
        <Rectangle x:Name="MyRectangle" PointerPressed="MyRectangle_PointerPressed" Fill="Yellow" Width="400" Height="300" />
    </Grid>

以上的程式碼中，首先在StackPanel元素的StackPanel.Resources中添加一個做為動畫資源的Storyboard元素

並命名為storyboard，以方便在後台文件中呼叫storyboard對象的Begin方法啟動動畫

再來在Storyboard元素中新增一個主題動畫FadeOutThemeAnimation

新增好了之後呢，在Grid元素中添加一個Rectangle元素作為動畫的目標

並將此Rectangle命名為MyRectangle，接著為Rectangle元素的PointerPressed事件定義名為MyRectangle_PointerPressed的事件處理方法

當觸發此事件時將會啟動主題動畫

接下來，開啟【MainPage.xaml.cs】

為PointerPressed事件添加事件處理方法MyRectangle_PointerPressed

程式碼如下：

private void MyRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
   storyboard.Begin();
}

上面的程式碼呼叫了storyboard的Begin方法

執行專案的畫面：

這是一個Rectangle，點擊此Rectangle會產生下面的動畫

回首頁