网易新闻《娱乐圈画传》H5的动画技巧

今天看到一个非常喜欢的H5，又是网易出品的！于是，我忍不住去研究了他的实现方式，有3个值得我们学习的地方，分别是逐帧动画，多种变换叠加的css动画，还有最亮的：画中画动画的实现方式，下文将分享技术实现方式。

实验环境，采用chrome开发者工具：

一、逐帧动画

这个h5，几乎没有采用gif图片，大部分采用css的方式实现的逐帧动画。

比如上图，每一帧的尺寸是500px 1000px，共有8帧，存成雪碧图的形式。

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。好处是减少你的网站的HTTP请求数量。

重点在于这句代码animation: people_ani 1s steps(1,end) infinite;

其他如下：

二、多种变换叠加的动画

首页的海浪波动动画，在x轴跟y轴都同时运动，采用了伪元素的这种方法。

把x轴的变化写在元素本身，y轴的变化写在before里。

代码如下：

三、动态部分与背景分离：

这种就不多说了，这样可以减少图片文件大小。

四、画中画的实现：

整个h5最吸引人的就是画中画的动画形式，下图是前后2帧的图片：

前后2帧的变化关系如下图所示：

这里都是采用canvas逐帧绘制而成的,比css方案有个好处，就是同一时间绘制显示的内容，避免了采用css分别变换带来的不确定性。

我们尝试下，这里只选取了其中2帧作为演示。

html代码：

把canvas撑满屏幕，div class='collection'隐藏。

设一个初始化参数：

js代码：

当长按start按钮时，开始绘制逐帧动画，是通过radio不断乘于一个缩放系数达到目的的。

重复这一过程的代码如下：

上面这个代码表示，把后面一帧逐渐缩小至手机屏幕，原理如下图：

再把前面一帧，逐渐缩小，成为画中画，原理如下图：

代码：

为了实验方便，我把radio跟两个方法都拆开来了，实际使用的时候，只需调用一次radio=0.99*radio即可。

drawImgOversize与drawImgMinisize有兴趣再深入理解下哦，代码如下：

以上就是动画技术的核心内容，以供学习研究之用。

附上h5的地址：

http://ent.163.com/special/entphotos2017/

ps：

之前我也研究另外2个喜欢的h5的实现方式，比如：

可以点击查阅。

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

Elasticsearch

Solidity

Keras

欢迎关注，转发～

关注本号