网站首页/win10系统列表/内容

通过C#完成Win10流畅设计中的连续体验动画的技巧

win10系统2023-01-18阅读
Windows 10是美国微软公司研发的跨平台及设备应用的操作系统。是微软发布的最后一个独立Windows版本。Windows 10共有7个发行版本,分别面向不同用户和设备。截止至2018年3月7日,Windows 10正式版已更新至秋季创意者10.0.16299.309版本,预览版已更新至春季创意者10.0.17120版本

  

 

1、“连续体验动画”是什么

若干周前,微软发布了Windows应用新的UI设计语言:Fluent Design(流畅设计)。这个设计理念包含四个要素:Material(材质),Motion(动感),Depth(深度)和Lighting(光影)。本文要讲解的连续体验动画旨在实现Motion。

连续体验动画是一类旨在帮助用户理解下一组UI和上一组UI中直接相关的部分的动画,一般发生于页面间导航的时候:比如从物品列表页面导航至列表中某物品的详细信息页面。下面这个来自官方的gif比较直观地展示了这个动画的效果:

通过C#实现Win10流畅设计中的连续体验动画的技巧1.gif

2、创建连续体验动画(使用C#)

一般地,创建连续体验动画有下面两步:

①准备(Prepare)源页面上的元素,通知系统这些元素将参与连续体验动画;

②开始(Start)连续体验动画,并向目标页面的目标元素传递一个引用;

在准备阶段完毕之后,系统将不会析构指定的元素,并让它始终显示在最顶层。按照MSDN的建议,连续体验动画应该开始于250毫秒之内,否则这个一直在顶层显示的元素就会给人一种迟滞感。如果超过3000毫秒都没有启动这个动画,这个动画和涉及到的元素就会被系统析构,这之后任何尝试启动这个动画的操作就会抛出异常。

为了演示这个操作,我们创建一个叫Connected Animation Test的工程,适当增删修改MainPage.xaml,使其内容如下:

通过C#实现Win10流畅设计中的连续体验动画的技巧2.jpg

记得在你的Assets目录下放一个Test.png,内容是你喜欢的任何图片。这里我用的是灰色的纯色图片。

同时创建一个DestinationPage,并修改其XAML为下面的内容:

通过C#实现Win10流畅设计中的连续体验动画的技巧3.jpg

注意,这里就是我们涉及到的两个元素:源元素SourceImage和目标元素DestinationImage。

连续体验动画都是由连续体验动画服务来管理的。我们可以通过ConnectedAnimationService.GetForCurrentView()方法来获得当前视图的连续体验动画服务的实例,注意需要引用名称空间Windows.UI.Xaml.Media.Animation。这个实例的类型是ConnectedAnimationService,它提供方法PrepareToAnimate()用来准备一个元素,GetAnimation()用来获取准备好的动画对象,其返回值是ConnectedAnimation类型;这个类型提供TryStart()方法来启动动画。为了更好地演示这个实例,我们进一步完善MainPage.xaml:

通过C#实现Win10流畅设计中的连续体验动画的技巧4.jpg

和DestinationPage.xaml:

通过C#实现Win10流畅设计中的连续体验动画的技巧5.jpg

给MainPage中的Button_Click编写代码:

通过C#实现Win10流畅设计中的连续体验动画的技巧6.jpg

在这段代码中,我们将SourceImage元素列为连续动画的准备对象,并导航到第二个页面。记得引用名称空间:

通过C#实现Win10流畅设计中的连续体验动画的技巧7.jpg

在目标页面DestinationPage的代码中,override掉其基类的OnNavigateTo()方法,用于在页面被导航至的时候启动动画:

通过C#实现Win10流畅设计中的连续体验动画的技巧8.jpg

本段代码的作用,是获取上个页面创建的“image”动画,并在目标元素为DestinationImage的情况下启动动画。

现在启动应用程序,观察页面间的导航动画:

通过C#实现Win10流畅设计中的连续体验动画的技巧9.gif

可以看到,除了图像之外的元素是按照常规的导航方式:第一个页面的Button消失了,第二个页面的TextBlock出现了;但是我们设置了连续动画的对象,却是按照我们的设想进行动画的。这意味着我们初步构建的平滑动画完成了。

另外需要提及的是,有时侯在动画启动时,目标对象未必被创建,这就会产生异常。这时应该使用类似的TryStartConnectedAnimationAsync()方法,来异步等待目标对象被创建,再执行动画。

同时,如果你只希望设定某元素的一部分为动画对象(比如某ListViewItem中的一个Image),你可以使用PrepareToAnimate()方法的另一个重载版本来指定源元素的一部分为动画对象。IntelliSence功能会详细讲解它的作用。

还有最后一点提示:某些情况下,我们可能需要让新页面上的部分元素随着连续动画运动,比如下面gif中,动画元素右侧的介绍信息:

通过C#实现Win10流畅设计中的连续体验动画的技巧10.gif

我们可以通过TryStart()方法的另一个重载,在第二个参数的位置传递一个由希望随着动画运动的元素组成的UIElement数组,就像这样:

通过C#实现Win10流畅设计中的连续体验动画的技巧11.jpg

在上面的例子中,数组内的DescriptionRoot元素就会跟随动画而移动了。

3、不适合使用连续体验动画的情况

目标元素需要等待网络加载:这会使动画产生严重的迟滞感和断裂感;

目标元素与源元素没有直接关联;

不要使元素四处乱飞。

4、总结

连续体验动画是使用户产生“流畅”感觉的重点。正确使用连续体验动画来进行页面导航,并结合Fluent Design的其它部分,将大幅提升用户体验。 

Win10系统之家

 


新技术融合:在易用性、安全性等方面进行了深入的改进与优化。针对云服务、智能移动设备、自然人机交互等新技术进行融合。Windows 10所新增的Windows Hello功能将带来一系列对于生物识别技术的支持。除了常见的指纹扫描之外,系统还能通过面部或虹膜扫描来让你进行登入。当然,你需要使用新的3D红外摄像头来获取到这些新功能。

相关阅读