背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）-白红宇

背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）

阅读量：4306 次

发布时间：2019-06-06

本文共 11116 字，大约阅读时间需要 37 分钟。

原文:

背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）

作者：

介绍

背水一战 Windows 10 之动画

PopInThemeAnimation - 控件出现时的动画

PopOutThemeAnimation - 控件消失时的动画

FadeInThemeAnimation - 控件淡入的动画

FadeOutThemeAnimation - 控件淡出的动画

PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画

PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画

SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时）

SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时）

RepositionThemeAnimation - 控件重新定位时的动画

SplitOpenThemeAnimation - 打开“拆分”控件的动画

SplitCloseThemeAnimation - 关闭“拆分”控件的动画

DrillInThemeAnimation - 有层次关系的，从上级到下级的导航动画（master 到 details）

DrillOutThemeAnimation - 有层次关系的，从下级到上级的导航动画（details 到 master）

DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation - 顾名思义的一些动画效果，用于集合类的控件

示例

1、演示主题动画之 PopInThemeAnimation, PopOutThemeAnimation

Animation/ThemeAnimation/PopInPopOut.xaml

Animation/ThemeAnimation/PopInPopOut.xaml.cs

/* * PopInThemeAnimation - 控件出现时的动画 * PopOutThemeAnimation - 控件消失时的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class PopInPopOut : Page    {        public PopInPopOut()        {            this.InitializeComponent();        }        private void btnPopIn_Click(object sender, RoutedEventArgs e)        {            storyboardPopIn.Begin();        }        private void btnPopOut_Click(object sender, RoutedEventArgs e)        {            storyboardPopOut.Begin();        }    }}

2、演示主题动画之 FadeInThemeAnimation, FadeOutThemeAnimation

Animation/ThemeAnimation/FadeInFadeOut.xaml

Animation/ThemeAnimation/FadeInFadeOut.xaml.cs

/* * FadeInThemeAnimation - 控件淡入的动画 * FadeOutThemeAnimation - 控件淡出的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class FadeInFadeOut : Page    {        public FadeInFadeOut()        {            this.InitializeComponent();        }        private void btnFadeIn_Click(object sender, RoutedEventArgs e)        {            storyboardFadeIn.Begin();        }        private void btnFadeOut_Click(object sender, RoutedEventArgs e)        {            storyboardFadeOut.Begin();        }    }}

3、演示主题动画之 PointerDownThemeAnimation, PointerUpThemeAnimation

Animation/ThemeAnimation/PointerDownPointerUp.xaml

Animation/ThemeAnimation/PointerDownPointerUp.xaml.cs

/* * PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画 * PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画 *  *  * 注： * 调用 PointerDownThemeAnimation 的 Begin() 方法就是按下时的动画，再调用 PointerDownThemeAnimation 的 Stop() 方法就是抬起时的动画 * 所以一般来说，只要使用 PointerDownThemeAnimation 的 Begin() 和 Stop() 即可，而不再需要 PointerUpThemeAnimation */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class PointerDownPointerUp : Page    {        public PointerDownPointerUp()        {            this.InitializeComponent();        }        private void btnPointerDownBegin_Click(object sender, RoutedEventArgs e)        {            storyboardPointerDown.Begin();        }        private void btnPointerDownStop_Click(object sender, RoutedEventArgs e)        {            storyboardPointerDown.Stop();        }    }}

4、演示主题动画之 SwipeHintThemeAnimation, SwipeBackThemeAnimation

Animation/ThemeAnimation/SwipeHintSwipeBack.xaml

Animation/ThemeAnimation/SwipeHintSwipeBack.xaml.cs

/* * SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时） * SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时） */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class SwipeHintSwipeBack : Page    {        public SwipeHintSwipeBack()        {            this.InitializeComponent();        }        private void btnSwipeHint_Click(object sender, RoutedEventArgs e)        {            storyboardSwipeHint.Begin();        }        private void btnSwipeBack_Click(object sender, RoutedEventArgs e)        {            storyboardSwipeBack.Begin();        }    }}

5、演示主题动画之 RepositionThemeAnimation

Animation/ThemeAnimation/Reposition.xaml

Animation/ThemeAnimation/Reposition.xaml.cs

/* * RepositionThemeAnimation - 控件重新定位时的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class Reposition : Page    {        public Reposition()        {            this.InitializeComponent();        }        private void btnReposition_Click(object sender, RoutedEventArgs e)        {            storyboardReposition.Begin();        }    }}

6、演示主题动画之 SplitOpenThemeAnimation, SplitCloseThemeAnimation

Animation/ThemeAnimation/SplitOpenSplitClose.xaml

Animation/ThemeAnimation/SplitOpenSplitClose.xaml.cs

/* * SplitOpenThemeAnimation - 打开“拆分”控件的动画 * SplitCloseThemeAnimation - 关闭“拆分”控件的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class SplitOpenSplitClose : Page    {        public SplitOpenSplitClose()        {            this.InitializeComponent();        }        private void btnSplitOpen_Click(object sender, RoutedEventArgs e)        {            TextBlock textBlock = new TextBlock();            textBlock.Name = "textBlock";            textBlock.Text = "我是 Border 里的内容";            textBlock.TextAlignment = TextAlignment.Center;            textBlock.VerticalAlignment = VerticalAlignment.Center;            border.Child = textBlock;            storyboardSplitOpen.Begin();        }        private void btnSplitClose_Click(object sender, RoutedEventArgs e)        {            storyboardSplitClose.Begin();        }    }}

7、演示主题动画之 DrillInThemeAnimation, DrillOutThemeAnimation

Animation/ThemeAnimation/DrillInDrillOut.xaml

Animation/ThemeAnimation/DrillInDrillOut.xaml.cs

/* * DrillInThemeAnimation - 有层次关系的，从上级到下级的导航动画（master 到 details） * DrillOutThemeAnimation - 有层次关系的，从下级到上级的导航动画（details 到 master） */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class DrillInDrillOut : Page    {        public DrillInDrillOut()        {            this.InitializeComponent();        }        private void btnDrillIn_Click(object sender, RoutedEventArgs e)        {            storyboardDrillIn.Begin();        }        private void btnDrillOut_Click(object sender, RoutedEventArgs e)        {            storyboardDrillOut.Begin();        }    }}

8、演示主题动画之 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation

Animation/ThemeAnimation/DragItemDragOverDropTargetItem.xaml


            
                 
                      
                           
            
             顾名思义的 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation
                            
                            
            
             具体的用法参见 GridViewItem 或 ListViewItem 的 ControlTemplate（另外，关于 GridViewItem 或 ListViewItem 的拖动项的说明，请参见控件部分的对应的示例代码）