原文:重新想象 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
[源码下载]

重新想象 Windows 8 Store Apps (20) - 动画: ThemeAnimation（主题动画）的更多相关文章

  1. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  2. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

  3. 重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）

    原文:重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition(过渡效果) [源码下载] 重新想象 Windows 8 Store Apps (21) ...

  4. 重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等

    [源码下载] 重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等 作者:webabcd ...

  5. 重新想象 Windows 8 Store Apps (41) - 打印

    [源码下载] 重新想象 Windows 8 Store Apps (41) - 打印 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 打印 示例1.需要打印的文档Pr ...

  6. 重新想象 Windows 8 Store Apps (48) - 多线程之其他辅助类: SpinWait, SpinLock, Volatile, SynchronizationContext, CoreDispatcher, ThreadLocal, ThreadStaticAttribute

    [源码下载] 重新想象 Windows 8 Store Apps (48) - 多线程之其他辅助类: SpinWait, SpinLock, Volatile, SynchronizationCont ...

  7. 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式

    [源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...

  8. 重新想象 Windows 8 Store Apps (62) - 通信: Socket TCP, Socket UDP

    [源码下载] 重新想象 Windows 8 Store Apps (62) - 通信: Socket TCP, Socket UDP 作者:webabcd 介绍重新想象 Windows 8 Store ...

  9. 重新想象 Windows 8 Store Apps (63) - 通信: WebSocket

    [源码下载] 重新想象 Windows 8 Store Apps (63) - 通信: WebSocket 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 通信 So ...

随机推荐

  1. Web Api集成Swagger

    WebApi集成Swagger 1.新建一个WebApi空项目 2.新建一个Person实体类: public class Person { public int ID { get; set; } p ...

  2. 降低成本是永恒的追求(xamarin)

    减少为主线的成本始终是一个社会经济发展.经济活动似乎很.商业模式的出现相关.我记得早起写Web程序,真正的企业并不多忙.大部分时间处理与浏览器的问题之间的差异所带来. 有些型号也做了屏蔽这样的差别,有 ...

  3. 基于AdaBoost的人脸检测

    原地址:http://blog.csdn.net/celerychen2009/article/details/8839097 人脸检测和人脸识别都是属于典型的机器学习的方法,但是他们使用的方法却相差 ...

  4. Ctrl-A全选

    Ctrl-A全选这点事(C#,WinForm)   所有的文本框,不管单行多行都Ctrl-A全选就好了吧?是啊,很方便.Windows的软件基本都是这样.可为什么我们自己制作的WinForm就默认不是 ...

  5. oschina jQuery 插件

    jQuery 插件 jQuery自动完成插件(25) jQuery分页插件(20) jQuery 文件上传(21) jQuery 地图插件(14) jQuery对话框(109) jQuery图片展示/ ...

  6. net 面向接口框架

    Asp.net 面向接口框架之应用程序上下文作用域组件 在团队中推广面向接口开发两年左右,成果总体来说我还是挺满意的,使用面向接口开发的模块使用Unity容器配置的功能非常稳定,便于共享迁移(另一个项 ...

  7. DIV+CSS 入门

    玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...

  8. 调用WCF的异步方法

    原文:调用WCF的异步方法 AsyncCallback aLoginCallback = delegate(IAsyncResult result) { var aSystemUser = WcfCl ...

  9. Redis集群_3.redis主从自动切换Sentinel(转)

    Redis SentinelSentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中 一.Sentinel作用:1):Master状态检测 2 ...

  10. prepareCall()运行存储过程

    CallableStatement 对象为全部的 DBMS 提供了一种以标准形式调用已储存过程的方法.已储存过程储存在数据库中.对已储存过程的调用是 CallableStatement对象所含的内容. ...