Windows 8 Store Apps學習(20) 動畫: ThemeAnimation（主題動畫）

介紹

重新想象 Windows 8 Store Apps 之 動畫

PopInThemeAnimation - 控制項出現時的動畫, PopOutThemeAnimation - 控制項消失時的動畫

FadeInThemeAnimation - 控制項淡入的動畫, FadeOutThemeAnimation - 控制項淡出的動畫

PointerDownThemeAnimation - 滑鼠（手指）在控制項上按下時的動畫, PointerUpThemeAnimation - 滑鼠 （手指）在控制項上抬起時的動畫

SwipeHintThemeAnimation - 控制項的 Swipe 動畫（當你的控制項在收到 Swipe 後會做響應時）, SwipeBackThemeAnimation - 控制項的 Swipe 動畫（當你的控制項在收到 Swipe 後不需要做任何響應時）

RepositionThemeAnimation - 控制項重新置放時的動畫

SplitOpenThemeAnimation - 開啟“拆分”控制項的動畫, SplitCloseThemeAnimation - 關閉“拆分”控制項 的動畫

DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation - 顧名思義的一些 動畫效果，用於集合類的控制項

樣本

1、示範主題動畫之 PopIn, PopOut

Animation/ThemeAnimation/PopInPopOut.xaml

<Page    x:Class="XamlDemo.Animation.ThemeAnimation.PopInPopOut"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Animation.ThemeAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">            <StackPanel.Resources>                <!--                    PopInThemeAnimation - 控制項出現時的動畫                        FromHorizontalOffset - 控制項起始位置的水平位移量                        FromVerticalOffset - 控制項起始位置的垂直位移量                -->                <Storyboard x:Name="storyboardPopIn">                    <PopInThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="1000" FromVerticalOffset="300" />                </Storyboard>                    <!--                    PopOutThemeAnimation - 控制項消失時的動畫                -->                <Storyboard x:Name="storyboardPopOut">                    <PopOutThemeAnimation Storyboard.TargetName="border" />                </Storyboard>            </StackPanel.Resources>                <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 裡的內容" FontSize="24.667" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>                <Button Name="btnPopIn" Content="PopInThemeAnimation Demo" Click="btnPopIn_Click_1" Margin="0 30 0 0" />            <Button Name="btnPopOut" Content="PopOutThemeAnimation Demo" Click="btnPopOut_Click_1" Margin="0 10 0 0" />            </StackPanel>    </Grid></Page>