原文：https://mp.weixin.qq.com/s/bTWajT3UIm_pGSiDPoyK0A前言在网页中，平滑的过渡动态可以增加用户体验的舒适度，使用户的认知过程更加自然，同时，适当的动作效果也能引导用户关注重要信息。在WeGame大屏模式需求场景下，笔者借此机会在开发前期与视觉、动画设计同学进行交流，设置产品转场效果和实现方式，为用户营造“身临其境”的氛围在体验中。1、设计转场效果的建议：想要设计出好的页面转场效果，可以考虑从以下几个方面入手：动画效果的完整性和连贯性：在设计转场效果之前，需要先考虑页面框架以及交互整体元素切换时的效果，比如层级页面、子层级页面、弹窗反馈、菜单标注的效果。Motiontimeandeasingcurve：Motiontime：GoogleMaterialDesign中提到，如果动画区域越大，对应的动画响应速度应该越快。由于笔者的需求场景是PC设备界面，所以动画时间应该设置为控制在0.3S左右。运动曲线：自然缓动曲线会影响元素的速度，并且可以使您的动画感觉更流畅。你可以使用cubic-bezier动画工具来设置你认为合适的动画曲线。2、转场动画效果分析：在动画效果方面，我们分为帧转场效果和元素关联效果：帧转场效果：我们常用的帧动画效果有几种：渐变、滑动、翻转、缩放、覆盖等Effects以上效果可以单独呈现，也可以通过多种效果的组合来呈现更有趣的过渡效果。我们可以在网页开发中快速使用CSS3Transition和Animation样式属性来实现效果。并且我们可以定义可重用的Transition样式和Animaton样式文件，供其他项目网页使用。元素关联效果：元素关联的过渡效果就像Keynote中神奇的移动效果。元素始终贯穿于页面的前后切换，让用户感知元素内容的层级关系。值得注意的是，元素关联效果不能在其他项目中复用，需要根据视觉设计场景来考虑。3、实施方案如果需要在业务项目中实施，应该如何在web上实施？原生web应用实现：业界有像ANIMSITION.JS这样的工具库可以在点击触发跳转时先执行动画，同时在跳转行为结束后监听动画，但是由于页面还是跳转最终，页面也会有闪烁的感觉。Vue路由实现：Vue框架提供了转场效果，可以在路由切换时使用标签添加到路由页面。在开发初期，可以规划路由的结构范围，定义页面切换效果。VUE实现效果如下：4.体验优化炫酷的转场动画和特效带来更好的用户体验，但也带来了资源占用的高负载。会影响用户体验。我们可以从以下两个方面优化动画体验：1.提高页面加载响应速度。页面进入后需要加载数据。当数据加载缓慢时，会中断转场效果的平滑切换。比如页面加载本地数据和网络数据有非常明显的区别；如果页面需要加载网络数据，我们可以通过哪些方法来优化或提升页面过渡效果？可以从以下三个方向解决：减少网络加载数据的时间，如页面直出、延迟加载、本地缓存策略等技术方案；使用骨架屏代替内容进行转场，骨架屏转场完成后切换到真实页面；尽量使用路由切换代替页面跳转，减少页面刷新；在WeGame大屏模式的需求下，由于web应用是在本地打包的，我们可以节省打开页面时加载数据的时间；由于使用VUE技术栈进行开发，我们可以减少页面的全局刷新，使用路由进行切换；通过实践，我们发现VUE路由的转场效果可以很好的满足页面的转场切换效果；2、优雅降级影响网页动效表现的原因有两个：浏览器环境和运行设备；浏览器环境：动画的渲染效果取决于用户的浏览器内核。浏览器内核越高级，能实现的动画效果越多越好。运行设备：动效运行时会占用大量系统资源（CPU、GPU、内存等）。当资源使用超过一定阈值时，会出现卡顿和掉帧现象。运行页面的设备配置越高，受影响越小。因此，当您考虑为您的产品添加转场效果时，您需要针对不同的设备和环境使用不同的动画解决方案。完整动画用于高端设备和环境，部分动画用于中端设备和环境。动画，低端设备和环境不使用动画，是一种优雅的降级方案。对于浏览器环境：我们可以通过JS获取浏览器内核的Navigator信息，针对不同的浏览器和版本进行相应的动画处理；针对运行设备：在兼容性实验室对不同设备进行动画效果效果测试，对测试结果进行分类汇总，找出高、中、低设备的最佳动画效果，然后获取用户的设备信息进行对比，决定什么根据比较结果使用的动画级别。在浏览器中运行：IE核心浏览器可以通过ActiveXObject插件获取，但是对于其他浏览器就无能为力了，只能通过统一的处理方式权衡动画。运行在其他客户端：可以通过客户端获取设备信息，并通过接口传递给Web。在WeGame大屏模式下，背景虚化效果和背景动画都非常占用CPU。经过测试，我们与nativeclient同学沟通，返回用户设备硬件层面的接口，力求针对硬件设备性能??低的用户屏蔽动画，保证UI的流畅性。5.结语其实转场动画效果并不局限于滑动、缩放、位移等效果的应用。也可以结合SVG形状变形动画、视频等进行页面转场。具体解决方案取决于产品的形态和需求。
