前端利用过渡动效打造沉浸式的体验

转载自：《 利用过渡动效打造沉浸式的体验》 - P&Pdesign  腾讯PPdesign
把网页作出“端游体验”，光看着就以为爽

【前言】在Web页面中，流畅的过渡动效能够增长用户体验的温馨度，让用户认知过程更为天然，同时恰当的动效也可以引导用户关注重要的信息。在WeGame大屏模式需求场景中，笔者利用这个契机，在开发前期与视觉及动画设计同窗沟通，设定好产品过渡动效及实现方式，给用户在体验中营造“沉浸式”氛围。

一．设计过渡动效的建议

想要设计好的页面过渡效果，能够考虑从这几方面着手：

● 动效的总体性及连贯性

设计过渡动效前须要先总体性的考虑页面框架及交互元素切换时的效果，如同级页面，子级页面、弹窗反馈，菜单的呼出效果。

● 动效的时间及缓动曲线

动效的时间：Google的Material Design中提到，如动画区域越大，相应的动画响应速度应该更快，因为笔者的需求场景为PC设备界面，所以将动画时长控制在0.3S左右。

动效曲线：天然缓动曲线会影响元素的速度同时可让你的动画感受更平滑。能够借助cubic-bezier动画工具设定你以为合适的动画曲线。

二．过渡动效剖析

效果实现上，咱们分为 框架过渡效果及 元素关联效果：

●框架过渡效果

咱们经常使用的框架动画效果有这么几种：渐变、滑动、翻转、缩放、覆盖等效果。

以上的效果能够单独呈现，也可使用多种效果组合来呈现更为有趣的过渡效果。

咱们能够在Web页面开发中快速使用 CSS3 Transition、Animation样式属性便可实现效果。而且咱们能够定义可复用的Transition样式及Animaton样式文件，提供给其余项目Web页面使用。

●元素关联效果

元素关联的过渡效果就像Keynote中的神奇移动效果，元素始终贯穿于页面先后的切换，能让用户能感知到元素内容的层级关系。元素关联效果没法复用于其余项目，须要根据视觉设计场景进行考虑。

三．实现方案

在Web端如须要落地到业务项目中如何实现而且须要考虑什么呢？Web端的页面与原生桌面程序相比，页面打开时，网络请求，资源下载，页面元素渲染过程都是浏览器必须要通过的步骤。所以Web页面上实现需保证：

●原生Web应用实现

业界有像 ANIMSITION.JS 的工具库能够实如今点击触发跳转时先执行动画，同时监听动画播放结束后再进行跳转行为，但由于页面最终仍是发生了跳转，所以页面还会产生闪动的感受。

●Vue 路由实现

Vue框架提供了在路由切换时可使用标签添加路由页面的过渡效果。在开发前期能够规划好路由的结构范围，并定义切换的页面效果便可。

VUE实现的效果

四．体验优化

炫酷的过渡动画和特效带来更好用户体验的同时，也带来了高负荷的资源占用，若是不能采起有效手段，不只达不到预期的效果，反而会影响用户的体验。

咱们能够从如下两方面来优化动画的体验效果：

1、提高页面加载响应速度

页面进入后需加载数据，当数据加载较慢时，会打断过渡动效的平滑切换感，好比说页面加载本地数据及网络数据，就有很是显明的差别感对比；

那假如页面中须要加载网络数据，咱们能够采起什么方式来优化或改善页面过渡动效呢？

能够从如下3个方向来解决：

①减小网络加载数据时长，如页面直出、懒加载、本地缓存策略等技术方案进行尝试；

②使用骨架屏代替内容进行过渡，在骨架屏过渡完成后在切换成真实的页面；

③尽量使用路由切换代替页面跳转，减小页面刷新；

在WeGame的大屏模式需求下，因为Web应用程序打包至本地，所以，咱们能够在页面打开时省去了数据加载的时长；因为使用VUE技术栈进行开发，所以咱们能够减小页面全局刷新，使用路由进行切换；通过实践咱们发现VUE路由的过渡效果能大大知足页面的过渡切换效果；

2、优雅降级

影响Web动效性能的缘由有两个： 浏览器环境和运行设备；

●浏览器环境

动效的呈现效果依赖用户的浏览器内核，浏览器内核越先进，能够实现的动效效果就越多越好。

●运行设备

动效在运行时会占用不少的系统资源（CPU、GPU、内存等），当资源占用超过必定的阈值时，会出现卡顿、掉帧的现象，页面运行的设备配置越高，所受到的影响越小。

所以，当你考虑为你的产品添加过渡效果时，须要使用针对不一样的设备和环境使用不一样的动画解决方案，在高配的设备和环境中使用全动画，中配的设备和环境中使用部分重要动画，在低配的设备和环境中不使用动画，这也就是优雅降级方案。

●对于浏览器环境

咱们能够经过JS获取到浏览器内核的Navigator 信息，经过对不一样的浏览器和版本，进行对应的动画处理；

●对于运行设备

在兼容实验室中对不一样的设备下进行动效效果测试，对测试结果进行分类总结，找到高、中、低的设备的最优动效效果，而后获取到用户的设备信息进行对比，根据对比结果来决定使用什么等级的动效。

①运行在浏览器中：IE内核浏览器能够经过ActiveXObject插件来获取，可是对其余的浏览器就无能为力了，只能经过统一处理的方式来权衡动画了。

②运行在其余客户端中：能够经过客户端获取设备信息，经过接口将信息传递给Web。

在WeGame大屏模式中，模糊背景的实现效果及背景动画均占用了较高的CPU。通过测试，咱们与原生客户端同窗沟通，返回用户设备硬件等级接口，争对硬件设备性能较低的用户屏蔽动画以保证UI的流畅性。

五．结语

其实过渡动效不止于滑动、缩放、位移等效果的应用，也能够结合SVG的形状变形动画、视频等进行页面过渡，具体使用什么方案仍是要取决于产品的形态和需求。