前端动效库搭建之路

原创 37OceanTeam 三七互娱技术团队

前端动效库

搭建之路

Part.1 现代浏览器的普及给css3带来的施展空间

移动互联网愈发普及，老旧的window xp 也不再维护，人们上网的的方式再不断改变。操作系统的不断升级，人们上网所选择的浏览器也发生了很大的变化。下图是海外某地区的浏览器访问占比。由下图来看，在该地区，chrome、safari、android webview,ui/wkwebview 这些webkit 内核发展而来的浏览器占据了超过4/5 的份额。对css3 友好的现代浏览器更是占了绝大多数。IE只占有了不到1/10 的份额。而这些IE浏览器中，大部分都是对css3兼容友好的IE11。也就是说，对css3 兼容不够友好的IE10 及一下版本的浏览器占比几乎可以忽略不计。

这种浏览器市场占比的变化，对前端技术来说是非常积极的。以往为了兼顾使用IE10 及以下版本浏览器的用户，我们会非常谨慎地使用css3、html5 等新技术规范。随着这些“行为怪异”的浏览器从历史的舞台褪去， html5、css3等新的技术规范有了更好的发挥空间。对我们厂的业务而言，我们可以在更多的页面使用html5 的canvas、css3 等技术给页面添加更酷炫复杂的动效特效，让页面看起来更加地“靓仔”。

复杂酷炫动效的开发要求程序员投入更多的开发时间成本。为了保证在动效页面的开发效率，我们走上了动效库的搭建之路。

Part.2 动效库搭建三步曲

我们在已有的业务基础上开始搭建动效库。为了搭建一个符合业务实际、使用率高的动效库，我们采取了三步曲行动：

第一步，动效库调研

第二步，动效库管理后台搭建

第三步，实际业务应用

经过三步实践，我们的动效库之路已初见成效。下面，我们就详细介绍一下每一步操作。

第一步，动效库调研、封装

这一步，我们拆分了四个小步骤：动效调研、规范建立、动效沉淀、后台整合。

1）完成动效调研

动效库的调研，由美术、产品的同事一起收集海外市场的游戏类的事前预约活动、官网等页面。在总共一个月的时间内，我们先后对需求方收集到的大量网站进行了调研。最终总结出了一批非常值得我们参考的动效网页。并且把其中常用的动效，封装成组件添加到我们的动效库。

2）对动效进行分类、制定组件开发规范

为了方便美术设计同事查阅和技术日后开发使用，我们对动效库进行了分类，并且制定动效库组件的封装计划、封装的代码风格规范、命名规范和使用规范。图三

在活动官网中应用的新特效方式，都会封装成新的组件。定义一整套动效开发与使用规范，与工作流进行无缝集成。为了方便开发人员共享动效库,我们通过npm 包的方式共享。

3）动效沉淀

在平常的活动中日积月累了够多的组件之后，我们的收获可以开始日益体现，越来越多的活动可以使用上以往已经封装好的动效组件

4）后台整合

这一步完成了上述中的动效库后台的搭建，将第二步的组件录入到动效库后台当中，投入使用。

第二步，动效库管理后台搭建

在上文提到，搭建动效库的目的，不仅仅是制作动效组件库，提升开发效率；另一方面我们调研封装的动效的特效，也需要提供给产品、设计同事。他们在设计活动、官网的时候、可以参考已经实现的方案，控制开发需要投入的成本；同时也可以给他们设计上提供一个参考的方案。

为了达到跟产品、设计共享动效库的目的，我们建立了动效库管理后台，并集成到业务后台。由前端把调研、和封装的动效上传到动效库后台。其他的前端同事、产品、设计，可以根据自己需要的动效库类型，查看查阅对应的动效。

在开发动效库后台时，技术选型方面，我们选择了海外大部分发行平台一致使用的vu2 框架。

基础的脚手架、路由、状态管理、框架技术栈包括：

动效库后台效果图：

第三步，实际业务应用

“从业务中来，到业务中去”，我们的动效库组件是从大量竞品游戏的推广运营页面的调研、以往活动积累中提炼而来。为了验证我们的动效库组件是否符合业务实际，我们在已有业务进行了实践分析。

以下是开发中的动效库的使用步骤。

步骤一：依赖安装

步骤二：引用插件，配置相关参数

步骤三：效果预览

Part.3 案例分析

案例一：斗罗大陆官网

设计理念

新版本官网，采用了代入感较强的书本形式的方式来制作，书本制作通过CG建模贴图然后进行动作绑定来制作。书本进场及书本翻开效果，达到一致的效果，但是制作周期较长，同时在协助的过程中出现较大的调整，导致书本精度及视频动态和平面图效果不够一致，也是一次经验积累。官网主要分书本进场、书本翻开、内容展示翻页效果及列表拉申效果，尽可能在一屏展示效果，减少不必要的跳转。

页面效果

实现难点、遇到的问题

1）多个动画联合无缝播放（PC、移动端）

遇到的问题：动画在每一个播放完毕切换到下一个的时候，会出现黑屏或者闪屏的现象，让人看起来不是无缝播放，影响用户体验

解决办法：监听动画播放结束，给下一个动画的外层div加上更高zIndex值

2）书本的翻页需要贴合视频背景，因为需要用到视频中的动画做背景

遇到的问题：书本很难贴合视频背景，不同的屏幕设备下需要做适配（PC）

解决办法：对屏幕宽度为1920、1680、1600、1440的PC屏幕做了适配，当屏幕宽度小于等于1680的时候出现滚动条，写css样式时写了几套。

3）右侧新闻、攻略等模块之间功能切换复杂

遇到的问题：由于右侧侧边栏集成了非常多的模块，比如新闻列表、新闻详情、新闻中心、攻略列表、攻略详情、攻略中心、FB分享等等，都需要在侧边栏内来回隐藏显示，模块之间的切换和隐藏变得非常的复杂，再加上模块之间的切换需要有动画效果，给工作进一步增加了复杂度。

建议：多个模块不要都集中在同一部分，模块太集中导致开发容易产生混乱

4）移动端视频播放比较难处理，视频之间播放切换会黑屏

遇到的问题1：在iPhone下会出现很大的视频播放按钮、不能连续自动播放、自动变成全屏播放等等

解决办法：

使用插件 https://github.com/fregante/iphone-inline-video

遇到的问题2：在移动端下播放视频，切换的时候会黑屏一下才回播放下一个

解决办法：在视频播放的时候设置一张该视频最后一帧的图片作为背景图

案例二：暗黑大天使印象页

设计理念

《暗黑大天使》整体设计偏暗黑及欧式魔幻。整个印象站在体验上为朝右滑动形式，印象站整体偏蓝色调（与法师设定相同），首屏采用微动画形式提升代入感。右滑将进入时间轴模块，通过一个个时间节点的呈现带新老玩家重新回顾奇迹的点点滴滴。角色介绍模块通过场景转变切换不同职业，场景颜色与角色设定相符，在改变整体色调的同时，整体框架不变。整个印象站通过滚轮操作，通过一系列的动效提升代入感，抓住玩家眼球。

实现效果