原文:重新想象 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. 呜呼!Node.js是什么?

    近期看到非常多站点都使用node.js.開始感到非常好奇.就開始推測这是个什么东西,大概就是个js文件吧,所以開始根本 没有在意,可是越感觉就认为越不正确劲,为什么大家都在用它呢?所以我决定搞个明确. ...

  2. JS的类型比较与转换图

    完整比较图:红色:===橙色:==黄色:<= 和 >= 同时成立,== 不成立蓝色:只有 >=绿色:只有 <= https://www.zhihu.com/question/3 ...

  3. 数据挖掘 决策树算法 ID3 通俗演绎

    决策树是对数据进行分类,以此达到预測的目的.该决策树方法先依据训练集数据形成决策树,假设该树不能对全部对象给出正确的分类,那么选择一些例外添�到训练集数据中,反复该过程一直到形成正确的决策集.决策树代 ...

  4. ios 上拉载入下拉刷新Dome

    为练手写了一个小的上拉载入很多其它下拉刷新的小的Dome . 没有太多的技术含量,仅仅是作为新手的启示用.是上一篇下拉载入的扩展.先看一下那个再看这个就easy非常多. Dome下载:http://d ...

  5. Python学习笔记22:Django下载并安装

    Django它是一个开源Web应用程序框架.由Python书面. 通过MVC软件设计模式,这种模式M,视图V和控制器C. 它最初是一个数字新闻内容为主的网站已经发展到管理劳伦斯出版集团.那是,CMS( ...

  6. c#操作.mpp文件

    原文地址:http://mjm13.iteye.com/blog/532404 所需设置    在工程中增加引用Microsoft Project 11.0 Object Library,该引用在co ...

  7. 50 tips of JavaScript

    50 tips of JavaScript,这些坑你都知道吗? 1.在局部作用域中,使用var操作符定义的变量将成为定义该变量的作用域中的局部变量,省略var的会创建全局变量:在全局作用域中,不管是否 ...

  8. Vsphere client 无法登陆VCenter 处理的方法

    上周做安全的时候将DC.DB和VCenter 三台机器的防火墙都启用了,结果Vcenter 登陆的时候总是提示服务器没有响应,连web client 都无法登陆. 处理过程 一.首先要保证 vmvar ...

  9. C#的百度地图开发(一)发起HTTP请求

    原文:C#的百度地图开发(一)发起HTTP请求 百度地图的开发文档中给出了很多的事例,而当用到具体的语言来开发时,又会有些差异.我是使用C#来开发的.在获取相应的数据时,需要通过URL传值,然后获取相 ...

  10. SVN的revert和update命令的区别

    svn中的revert和update 今天有人问到revert和update的问题. 刚开始还真被问住了. 因为感觉revert和update都可以将本地的copy更新到以前的一个版本,会有什么不同呢 ...