BML2017主视觉技术剖析

BML2017主视觉技术剖析

H光大小姐H光大小姐

在我的BLOG上观看:BML2017主视觉技术剖析 - dtysky|一个行者的轨迹


今年BML宣发页面的主视觉由我负责,使用了比较新的技术栈,包含大量动画技巧以及视频运用,下面大概分析一下这些技术和遇到的一些坑。

对IE的处理

将这一点放在文章之首是为了充分表达我个人(应该也是世界上所有有追求的前端工程师)对IE的厌恶,经过一番较为艰难的沟通,我们终于就“在此活动干掉IE全家”达成了共识,所以如果用IE访问此页面,你应该会看到一个配有33娘背景图的页面,其上的文字敦促你去下载现代浏览器,我觉得这和苹果强推HTTPS一样,有一定影响力的公司应当为业界的技术革新产生一些贡献。

为了实现这一点,我用了两个手段,对于IE9以下(包括自身)的IE,可以在HTML加入一段这样的注释


<!--[if IE]>
<div class="ie-must-die">
  <div class="ie-container">
    <h1>
      您正在使用IE
    </h1>
    <p>
      少女H也曾依赖过IE,借此来窥探这个世界。
      <br />
      但IE毕竟已然老去,早已无法适应这个绚丽的时代。
      <br />
      他的职责既已完成,不如就任其安然睡去吧——
      <br />
      毕竟,这个时代是属于现代浏览器的。
    </p>
    <a href="https://browsehappy.com" target="_blank">
      您可以点击此处,下载Chrome后再次打开本页面。
    </a>
  </div>
</div>
<![endif]-->

这段代码在IE中会取消注释并插入到DOM中,如果想判断IE版本,可以在if条件处修改,比如要在IE8以下显示,可以写if lt IE9。

但这种方法毕竟只能支持IE10以下的版本,诚然IE10以上的IE已然友善许多,但还是有很多奇怪的坑(尤其是有很多动画的时候),这时候就需要别的方法来对其进行屏蔽。由于我使用的是React,所以只需要设定一个状态,并更具这个状态决定要渲染的DOM即可:


// config.ts
const isIE = !!window.ActiveXObject || 'ActiveXObject' in window;

// App.tsx -> render
if (config.isIE) {
  return (
    <div className={cx('ie-must-die')}>
      ......
    </div>
  );
}

Preload

结构

IE说完,下面切到正文。BML主视觉属于大型活动页面,视频和图像资源比较多,在对首屏展示有着严格要求的情况下,预加载是必须的。我写了一个ResourceManager单例来管理所有资源,它构造时接受一个数组,数组中的每个对象可用参数配置src、type、是否需要preload以及preload时的权重weight,除此之外,还可以设置一个超时时间timeout来强制一定时间内加载完成(即使资源尚未真正加载完),这是为了确保访问体验的下限。


{name: 'world', src: resSrc.world, type: 'video', preload: isPC, weight: 20},
{name: 'guide-img', src: resSrc.guideImg, type: 'image'},

const resourceManager = new ResourceManager(resources, 8000);

当单例初始化结束后,便可以在任何地方调用它的load方法来进行加载,在期间可以用loadDone这个访问器来确定是否已经加载完成。除此之外,我还定义了一个registerOnProgress方法来注册一个回调,此回调在加载进度变更的时候会被调用,它可以灵活得被用于和React组件结合刷新视图:


resourceManager.registerOnProgress((progress: number) => {this.setState({progress}));
resourceManager.load();

而在使用时,只需要调用getSrc(name)方法即可拿到资源的url。

数据结构

加载队列中的每个资源都有相同的的数据结构,其为:


interface IResourceElement extends IResourceEntry {
  preload?: boolean;
  name: string;
  src: string;
  // image or video
  type: 'image' | 'video';
  weight?: number;
  element?: HTMLImageElement | HTMLVideoElement;
  progress?: number;
}

其中progress即为该资源的加载进度,取0 ~ 1,当不需要预加载时,其恒定为1。

当资源加载进度变更时,通过progress访问器可以获取到资源的实际进度,其基本思路就是遍历所有资源对象,将每一个的progress乘以权重weight相加,最后除以权重和。

图像预加载

图像预加载比较简单,只要创建Image对象,绑上onload事件并设置src,在事件执行时将其对应的progress设为1即可。


// element为一个Image对象
const element = this.resources[name].element;
element.onload = () => {
    this.resources[name].progress = 1;
    if (!this.loaded) {
      this.onProgress(this.progress);
    }
};
element.src = this.resources[name].src;

视频预加载

视频预加载比起图像麻烦的一点在于,我们无法通过向new Video()这样的方法创建一个视频对象然后如图像那样处理,而是必须用document.createElement('video')并用其API,此外,为了兼容,还必须将其插入到DOM中来保证其正常加载,于是代码就变成了这样:


// element为视频对象
this.resources[name].element.addEventListener('canplaythrough', this.handleVideoProgress(name));
this.resources[name].element.muted = 'muted';
this.resources[name].element.preload = 'auto';
this.resources[name].element.src = this.resources[name].src;
this.resources[name].element.style.position = 'fixed';
this.resources[name].element.style.transform = 'scale(-10000)';
this.resources[name].element.style.width = '0';
this.resources[name].element.style.height = '0';
document.body.appendChild(this.resources[name].element);
this.resources[name].element.play();

即,将视频绑事件,插入到DOM中并使其不可见,然后播放它。我这里绑的事件是canplaythrough,这个事件将会在每一次视频可以一段时间时触发,这个机制也影响到了对应回调函数的实现。

视频和图像不同,我们可以拿到其总长和加载期间已经加载了多少:


// 总时长
const duration = this.resources[name].element.duration;
// 已经加载的时长
const buffered = this.resources[name].element.buffered.end(0);

通过这二者便可以算出加载的比例,也就是progress的值:


this.resources[name].progress = buffered / this.resources[name].element.duration;

算完后触发onProgress回调,基本就完成了,别忘了在加载结束时将element从DOM中移除www

Guide-首屏

前置处理做完,接下来便是视图的展示了。

首先是首屏,也就是一进来的那段酷炫的特效,其原理很简单,其实就是背景视频 + SVG + 几个DOM。下面分PC和移动两个平台来阐释其中的重点。

PC

PC的H5视频支持基本完美,需要注意的只有。

而这视频虽然有两段,其实是一个视频,只不过我监听了timeupdate方法,在视频播放进度变更的时候设置不同的状态来确保新视图的渲染,跳过功能也不过是修改video.currentTime而已。这里比较需要注意的是样式问题,因为是将视频作为背景,所以我们需要一个类似于background-size: cover的效果,当知道原始视频宽高比的情况下,样式可以这么写:


.cover-video {
    @media (min-aspect-ratio: 16 / 9) {
        width: 100%;
        height: auto;
    }
    @media (max-aspect-ratio: 16 / 9) {
        width: auto;
        height: 100%;
    }
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

至于SVG动画,由于一开始还试图考虑兼容IE,这里使用的是Vivus库,不过它也有一些问题,能用原生的SVG动画还是原生吧。

移动端

移动端的背景视频播放绝对是超级大坑,由于移动平台设备奇多,良莠不齐,所以我付出很多努力后,最后还是在指示下将其取消了,但我研究出的这个方法应该还是可以兼容绝大多数现代设备的,所以就将经验写在这里吧。

第一个问题是有些版本的设备不支持背景视频,很多设备即使支持,浏览器也会劫持视频,对于这些设备和浏览器我建议直接放弃治疗,禁掉视频吧。比如5.0以下的安卓啦,移动端的QQ浏览器(不包括QQ和微信的内置浏览器以及HD版本)。

对于iOS设备,10是可以直接支持背景视频的(Safari或者基于原生Webview的),但8和9需要一个插件来支持iphone-inline-video。此外,还需要在video标签上加上playsInline属性。

对于QQ和微信内置浏览器,只需要在video标签上再加上两个属性即可:


video.setAttribute('webkit-playsinline', 'true');
video.setAttribute('x5-video-player-type', 'h5');

下面给出我用的几个平台的判据:


const isQQ = /TBS/.test(navigator.userAgent);
const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isIpad = /iPad/.test(navigator.userAgent);
const isAndroid = /Android/.test(navigator.userAgent);
const isQQBroswer = !isIpad && /MQQBrowser/.test(navigator.userAgent) && !isQQ
const getAndroidVersion = (ua: string) => {
    const u = ua || navigator.userAgent;
    const match = u.match(/Android\s([0-9\.]*)/);
    return match ? parseFloat(match[1]) : 4;
};

Home-分会场选择

酷炫的特技后是分会场选择页面,此页面结构虽看似简单,但其实是最耗性能的一页,这也怪我当时想的太简单全用DOM动画吧(用canvas可能麻烦点但性能应该会好很多)。

该页面主要由背景的星轨、前面的无限轮播图和其他一些小按钮构成。那些小按钮暂且不论,星轨和轮播图的动画相对复杂,值得单独拿出来说一说。

星轨

星轨分两部分,一个是在完全进入页面后的行星转动动画,一个是在从别的页面切换回来时的逐环扩散效果。

转动

前者比较简单,用无限循环的keyframes实现即可,要注意这里最好让行星自己动,不要带轨道一起,性能会好点。但既然要行星自己动,那么行星自己的transform-origin就要特别注意,其需要注意的样式为:


.star-item {
    transform-origin: @star-size / 2 (@rail-size + @rail-width + @star-size) / 2;
    left: (@rail-size - @star-size) / 2;
    top: -(@star-size + @rail-width) / 2;
}

其中star-size是行星直径,rail-size是轨道直径,rail-width是轨道的border宽度。这个再加上keyframes,整个效果就出来了(当然轨道居中什么的还有些额外样式,很简单,这里不多说)。


@keyframes rotate-stars {
  from {transform: rotate(0deg) translateZ(0);}
  to {transform: rotate(360deg) translateZ(0);}
}
.star-item {
    animation: rotate-stars @step * 4s linear 0s infinite normal;
}

扩散

扩散的效果就比较不友好了,由于我想使用纯CSS实现,所以又不想借助于ReactCssTransitionGroup,所以又只能用keyframes,这里利用了它的一个特性,就是keyframes(所在的class)被新加入到DOM上时,其必定会被触发一遍,这一点在带有这种样式的DOM被新插入页面中时也一样,利用这一点,我们就可以使用keyframes加上不同的插入时点、或者利用其本身的阶段特性,来实现这样的动画效果。我选用的是后者,九个星轨实际上是九个DOM,每一个都拥有自己独立的动画,而它们是同时插入到页面中的,也拥有同样的时间:


.star-rail {
    animation: 1.6s ~'home-star-@{step}' ease-out;
}

然后针对不同的step写动画:


@keyframes home-star-0 {
  0% {opacity: 0;}
  5% {opacity: 1;}
}

......

@keyframes home-star-5 {
  0% {opacity: 0;}
  40% {opacity: 0;}
  60% {opacity: 1;}
}

......

@keyframes home-star-9 {
  0% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 1;}
}

不错,核心就是肝疼的微调,也正因为此,渲染性能消耗变得很高。

轮播

轮播和星轨一样,其实也是分两部分的,入场时是一个额外的DOM,结束后展示的是另外一个DOM,只不过这两个DOM切换时完全重合,所以造成了一种无缝的错觉。

入场

入场和星轨的入场一样,也是利用keyframes分阶段实现的,这个比较简单,基本就是微调样式,对四个场子的bg进行translate和scale、margin的变换,在这里我强行开了translateZ来进行GPU加速,但在一些机器上还是会有些卡和抖动,这个大概是transform变换中的渲染性能消耗和计算出的小数导致。

在入场完成后,js这边控制状态切换到入场后的DOM,实现无缝切换。

入场后

入场后会有一段前景左侧图片和右侧文字的小动画,以及其他一些小按钮的动画,这些都是keyframes实现的。同时,在进行轮播的左右切换之时你会发现前景和背景、前景的图像和文字之间都有明显的视差(即不是同步移动),这个也是通过添加和删除keyframes相关的样式实现的。

而轮播自身,因为是无限循环的轮播,所以每次切换结束总是要将移动侧边缘的DOM删除后插入到另一边,这也导致无法用纯CSS实现,必须上JS,于是这就涉及到了React中的JS动画实现问题。在这里我选用了和ReactMotion相似的原理,自己写了一个Animation组件,用于实现需求的动画。


<Animation
    enable={enableAnimation}
    animation={next.styles}
    duration={duration}
    easing={easing}
    onEnd={this.handleAnimationEnd}
>
    styles => (
        ......
    )
</Animation>

此组件用法如上,enable表示是否允许动画;duration是起始到终止态的时间;easing是缓动函数的类型,这里我们使用了d3-eased3-interpolate来实现起始到终止态之间的插值;onEnd是一个回调,其在每次动画结束后触发;最后是这个animation属性,它是整个组件的核心,用于动画的触发,触发方式是要求两次传入的值不同,这个值可以是一个数字、一个数组或是一个对象。触发动画后,组件的children(要求是一个函数)将会每个一段时间(取决于requestAnimationFrame)接收到一个经过插值计算后的值,然后通过这个值进行组件的渲染。

有了这个组件,轮播的动画逻辑就很清晰了:用户每次操作时算出每个场次的下一个位置,扔到一个数组里(这里是next.styles),然后根据每一次的styles进行渲染,并监听onEnd事件,在动画结束后完成DOM的删除和插入即可。

World-地域选择和分享

第三屏是地域选择和分享,其可以划分为两个主要部分——“地区选择器”和“分享图片生成”。

地区选择器

地区选择器说来也简单,其实就是三个关联选择框,其核心是数据来源。这方面我是选择了网上找到的一个地区区号和名字的列表的xml文件,之后自己转成了两个json文件locationListTable.json和locationLookupTable.json:


const locationListTable = {'11': {name: '北京', children: {'1101': {name: '北京', children: null}}}, ......}
const locationLookupTable = {"11":{"id":"11","name":"北京","parent":null},"1101":{"id":"1101","name":"北京","parent":"11"}, ......}

第一个用于生成关联选择器,第二个用于利用id反向查询名字和父级。有了这两个表,地区选择器的实现基本就是搬砖难度了。

分享

分享图是根据用户选择的地区实时生成的,基于canvas。原理是先载入一张背景图,利用drawImage方法将其绘制到canvas中并将canvas引用保存。之后每次用户点击生成时,只需要用特定的字体将地区的名字用fillText方法绘制上去,之后再用toDataUrl方法即可生成预览图。这是第一步。

生成完预览图后我们并不能直接分享,因为几乎所有社交应用的分享接口都是不支持base64接口的,所以这里由后端提供了一个通过base64为参数上传图片的接口。用户确认后再点击一次生成才会真正得生成图像供用户分享。这也大大降低了后端的压力,提升了用户的体验。

其他

你可能会注意到这个分享流程在任意次访问中只会走一遍,但换个浏览器却又要重新输入。这是由于我此处使用了一个变量来保存用户的访问状态,而此变量存到了localStorage内。在使用localStorage的时候,一定要注意用户是否是在隐身模式下,如果是则需要降级(这里的降级方案是直接存到内存,至少保证该次访问正常),下面是判断用户localStorage是否可用的方法:


let storeEnabled = true;
try {
  localStorage.setItem('test', 'test');
} catch (e) {
  storeEnabled = false;
}

Comments-讨论区

最后就是讨论区了,你们一定以为我只是主站评论区换了个皮肤吧www

错,由于要把评论区改造成贴吧,为了可控和与现在ts + react的技术栈相容,我将评论区重写了一遍,并在外面套了一层别的东西做成了这种微博式的体验。得益于ts和less的优秀,这一部分只花了一周基本就搞定www

虽说一周搞定,但其实讨论区的逻辑工作量是最大的,还好我最先开发的是这一块,那时候脑子最清楚(后面都被各种样式、兼容、媒体查询搞的精疲力竭)

这一块没什么特别的心得,大部分都是业务逻辑和后端对接口,要说真有什么建议的话:

先把类型和数据结构定好再写代码,像这样子都写好回来查后来改都好弄,还有类型校验防止SB错误,你们还有什么理由不用TS!


export interface IMember {
  mid: string;
  uname: string;
  sex: string;
  avatar?: string;
  face: string;
  sign: string;
  rank: string;
  level_info: {
    current_level: number
  };
}

结语

基本就这些了,要说遗憾也有,这次本来想上WEBGL的后来觉得不太稳也没上,由于一开始没想太多所以后面发现性能有问题想改成canvas也来不及了。

说到底还是经验不太够,这次成长了很多,下次大型活动我们再见。

50 条评论