Windows 8 Store Apps學習(21) 動畫: ThemeTransition（過渡效果）

介紹

重新想象 Windows 8 Store Apps 之 動畫

ThemeTransition 的概述

EntranceThemeTransition - 頁面間跳轉時的過渡效果

ContentThemeTransition - 內容改變時的過渡效果

RepositionThemeTransition - 位置改變時的過渡效果

PopupThemeTransition - 彈出時的過渡效果

AddDeleteThemeTransition - 添加項或刪除項時的過渡效果

ReorderThemeTransition - 對集合中的元素重新排序時的過渡效果

PaneThemeTransition - 基於邊緣的較大 UI 滑入和滑出時的過渡效果

EdgeUIThemeTransition - 基於邊緣的較小 UI 滑入和滑出時的過渡效果

樣本

1、過渡效果的概述

Animation/ThemeTransition/Summary.xaml

<Page    x:Class="XamlDemo.Animation.ThemeTransition.Summary"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Animation.ThemeTransition"    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">                <TextBlock Text="請參見本 xaml 中的注釋" FontSize="14.667" />                <!--                UIElement.Transitions - 指定 UIElement 的過渡動畫                                <Rectangle>                    <Rectangle.Transitions>                        <TransitionCollection>                            <EntranceThemeTransition/>                        </TransitionCollection>                    </Rectangle.Transitions>                </Rectangle>            -->                    <!--                Panel.ChildrenTransitions - 指定 Panel 的子項目們的過渡動畫                                <WrapGrid>                    <WrapGrid.ChildrenTransitions>                        <TransitionCollection>                            <EntranceThemeTransition/>                        </TransitionCollection>                    </WrapGrid.ChildrenTransitions>                </WrapGrid>            -->                    <!--                ItemsControl.ItemContainerTransitions - 指定 ItemsControl 的項容器的過渡動畫                                <ItemsControl>                    <ItemsControl.ItemContainerTransitions>                        <TransitionCollection>                            <EntranceThemeTransition/>                        </TransitionCollection>                    </ItemsControl.ItemContainerTransitions>                </ItemsControl>            -->                    <!--                ContentControl.ContentTransitions - 指定 ContentControl 的過渡動畫                                <ContentControl>                    <ContentControl.ContentTransitions>                        <TransitionCollection>                            <EntranceThemeTransition/>                        </TransitionCollection>                    </ContentControl.ContentTransitions>                </ContentControl>            -->                        </StackPanel>    </Grid></Page>

2、示範 EntranceThemeTransition

Animation/ThemeTransition/Entrance.xaml

<Page    x:Class="XamlDemo.Animation.ThemeTransition.Entrance"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Animation.ThemeTransition"    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">                            <!--                EntranceThemeTransition - 頁面間跳轉時的過渡效果                    FromHorizontalOffset - 初始位置的水平位移量                    FromVerticalOffset - 初始位置的垂直位移量                    IsStaggeringEnabled - 當包含多個子項目時，是否需要錯開呈現它們            -->            <Frame Name="frame" Width="400" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">                <Frame.ContentTransitions>                    <TransitionCollection>                        <EntranceThemeTransition IsStaggeringEnabled="False" />                    </TransitionCollection>                </Frame.ContentTransitions>            </Frame>                <Button Name="btnGotoFrame1" Content="導航至 Frame1" Click="btnGotoFrame1_Click_1" Margin="0 10 0 0" />            <Button Name="btnGotoFrame2" Content="導航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />                <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">                <ItemsControl.ItemsPanel>                    <ItemsPanelTemplate>                        <WrapGrid>                            <WrapGrid.ChildrenTransitions>                                <TransitionCollection>                                    <EntranceThemeTransition IsStaggeringEnabled="True" />                                </TransitionCollection>                            </WrapGrid.ChildrenTransitions>                        </WrapGrid>                    </ItemsPanelTemplate>                </ItemsControl.ItemsPanel>                <ItemsControl.Items>                    <Rectangle Width="100" Height="100" Fill="Red" />                    <Rectangle Width="100" Height="100" Fill="Green" />                    <Rectangle Width="100" Height="100" Fill="Blue" />                </ItemsControl.Items>                <ItemsControl.Template>                    <ControlTemplate>                        <Border BorderBrush="Orange" BorderThickness="1">                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />                        </Border>                    </ControlTemplate>                </ItemsControl.Template>            </ItemsControl>                        </StackPanel>    </Grid></Page>