重新想象 Windows 8 Store Apps (20) 动画: ThemeAnimation（主题动画）

[源码下载]

重新想象 Windows 8 Store Apps (20) - 动画: ThemeAnimation（主题动画）

作者：webabcd


介绍
重新想象 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>

Animation/ThemeAnimation/PopInPopOut.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class PopInPopOut : Page
    {
        public PopInPopOut()
        {
            this.InitializeComponent();
        }

        private void btnPopIn_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardPopIn.Begin();
        }

        private void btnPopOut_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardPopOut.Begin();
        }
    }
}

2、演示主题动画之 FadeIn, FadeOut
Animation/ThemeAnimation/FadeInFadeOut.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.FadeInFadeOut"
    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>
                <!--
                    FadeInThemeAnimation - 控件淡入的动画
                -->
                <Storyboard x:Name="storyboardFadeIn">
                    <FadeInThemeAnimation Storyboard.TargetName="border" />
                </Storyboard>

                <!--
                    FadeOutThemeAnimation - 控件淡出的动画
                -->
                <Storyboard x:Name="storyboardFadeOut">
                    <FadeOutThemeAnimation 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="btnFadeIn" Content="FadeInThemeAnimation Demo" Click="btnFadeIn_Click_1" Margin="0 10 0 0" />
            <Button Name="btnFadeOut" Content="FadeOutThemeAnimation Demo" Click="btnFadeOut_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeAnimation/FadeInFadeOut.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class FadeInFadeOut : Page
    {
        public FadeInFadeOut()
        {
            this.InitializeComponent();
        }

        private void btnFadeIn_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardFadeIn.Begin();
        }

        private void btnFadeOut_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardFadeOut.Begin();
        }
    }
}

3、演示主题动画之 PointerDown, PointerUp
Animation/ThemeAnimation/PointerDownPointerUp.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.PointerDownPointerUp"
    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>
                <!--
                    PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画
                -->
                <Storyboard x:Name="storyboardPointerDown">
                    <PointerDownThemeAnimation Storyboard.TargetName="border" />
                </Storyboard>

                <!--
                    PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画
                -->
                <Storyboard x:Name="storyboardPointerUp">
                    <PointerUpThemeAnimation 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="btnPointerDown" Content="PointerDownThemeAnimation Demo" Click="btnPointerDown_Click_1" Margin="0 10 0 0" />
            <Button Name="btnPointerUp" Content="PointerUpThemeAnimation Demo" Click="btnPointerUp_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeAnimation/PointerDownPointerUp.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class PointerDownPointerUp : Page
    {
        public PointerDownPointerUp()
        {
            this.InitializeComponent();
        }

        private void btnPointerDown_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardPointerDown.Begin();
        }

        private void btnPointerUp_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardPointerUp.Begin();
        }
    }
}

4、演示主题动画之 SwipeHint, SwipeBack
Animation/ThemeAnimation/SwipeHintSwipeBack.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.SwipeHintSwipeBack"
    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>
                <!--
                    SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时）
                        ToHorizontalOffset, ToVerticalOffset - 控件需要到达的偏移量
                -->
                <Storyboard x:Name="storyboardSwipeHint">
                    <SwipeHintThemeAnimation Storyboard.TargetName="border" ToHorizontalOffset="100" ToVerticalOffset="100" />
                </Storyboard>

                <!--
                    SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时）
                        FromHorizontalOffset, FromVerticalOffset - 控件从此偏移量返回原位
                -->
                <Storyboard x:Name="storyboardSwipeBack">
                    <SwipeBackThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="100" FromVerticalOffset="100" />
                </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="btnSwipeHint" Content="SwipeHintThemeAnimation Demo" Click="btnSwipeHint_Click_1" Margin="0 10 0 0" />
            <Button Name="btnSwipeBack" Content="SwipeBackThemeAnimation Demo" Click="btnSwipeBack_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeAnimation/SwipeHintSwipeBack.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class SwipeHintSwipeBack : Page
    {
        public SwipeHintSwipeBack()
        {
            this.InitializeComponent();
        }

        private void btnSwipeHint_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardSwipeHint.Begin();
        }

        private void btnSwipeBack_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardSwipeBack.Begin();
        }
    }
}

5、演示主题动画之 Reposition
Animation/ThemeAnimation/Reposition.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.Reposition"
    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>
                <!--
                    RepositionThemeAnimation - 控件重新定位时的动画
                        FromHorizontalOffset, FromVerticalOffset - 控件从此偏移量的位置重新定位到新的位置
                -->
                <Storyboard x:Name="storyboardReposition">
                    <RepositionThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="1000" FromVerticalOffset="300" />
                </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="btnReposition" Content="RepositionThemeAnimation Demo" Click="btnReposition_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeAnimation/Reposition.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class Reposition : Page
    {
        public Reposition()
        {
            this.InitializeComponent();
        }

        private void btnReposition_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardReposition.Begin();
        }
    }
}

6、演示主题动画之 SplitOpen, SplitClose
Animation/ThemeAnimation/SplitOpenSplitClose.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.SplitOpenSplitClose"
    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>
                <!--
                    SplitOpenThemeAnimation - 打开“拆分”控件的动画
                        打开 OpenedTargetName（OpenedTargetName 的内容是 ContentTargetName），关闭 ClosedTargetName
                
                    具体的用法参见 ComboBox 的 ControlTemplate
                -->
                <Storyboard x:Name="storyboardSplitOpen">
                    <SplitOpenThemeAnimation 
                        OpenedTargetName="border" 
                        ContentTargetName="textBlock" 
                        ClosedTargetName="rectangle"
                        ContentTranslationDirection="Left"
                        ContentTranslationOffset="200"  
                        OffsetFromCenter="0"
                        OpenedLength="1"
                        ClosedLength="0" />
                </Storyboard>

                <!--
                    SplitCloseThemeAnimation - 关闭“拆分”控件的动画
                        关闭 OpenedTargetName（OpenedTargetName 的内容是 ContentTargetName），打开 ClosedTargetName
                
                    具体的用法参见 ComboBox 的 ControlTemplate
                -->
                <Storyboard x:Name="storyboardSplitClose">
                    <SplitCloseThemeAnimation
                        OpenedTargetName="border" 
                        ContentTargetName="textBlock" 
                        ClosedTargetName="rectangle"
                        ContentTranslationDirection="Left"
                        ContentTranslationOffset="200"  
                        OffsetFromCenter="0"
                        OpenedLength="1"
                        ClosedLength="0" />
                </Storyboard>
            </StackPanel.Resources>

            <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left" />
            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left" />

            <Button Name="btnSplitOpen" Content="SplitOpenThemeAnimation Demo" Click="btnSplitOpen_Click_1" Margin="0 10 0 0" />
            <Button Name="btnSplitClose" Content="SplitCloseThemeAnimation Demo" Click="btnSplitClose_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeAnimation/SplitOpenSplitClose.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeAnimation
{
    public sealed partial class SplitOpenSplitClose : Page
    {
        public SplitOpenSplitClose()
        {
            this.InitializeComponent();
        }

        private void btnSplitOpen_Click_1(object sender, RoutedEventArgs e)
        {
            TextBlock textBlock = new TextBlock();
            textBlock.Name = "textBlock";
            textBlock.Text = "我是 Border 里的内容";
            textBlock.FontSize = 24.667;
            textBlock.TextAlignment = TextAlignment.Center;
            textBlock.VerticalAlignment = VerticalAlignment.Center;

            border.Child = textBlock;

            storyboardSplitOpen.Begin();
        }

        private void btnSplitClose_Click_1(object sender, RoutedEventArgs e)
        {
            storyboardSplitClose.Begin();
        }
    }
}

7、演示主题动画之 DragItem, DragOver, DropTargetItem
Animation/ThemeAnimation/DragItemDragOverDropTargetItem.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeAnimation.DragItemDragOverDropTargetItem"
    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">

            <TextBlock FontSize="14.667" LineHeight="22">
                <Run>顾名思义的 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation</Run>
                <LineBreak />
                <Run>具体的用法参见 GridViewItem 或 ListViewItem 的 ControlTemplate</Run>
            </TextBlock>

        </StackPanel>
    </Grid>
</Page>

OK
[源码下载]