重新想象 Windows 8 Store Apps (20)

豆包ko

　　[源码下载]




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


























　　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


























　　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


























　　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


























　　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





















　　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























　　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







顾名思义的 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation

具体的用法参见 GridViewItem 或 ListViewItem 的 ControlTemplate




　　
OK
[源码下载]