学习
实践
活动
专区
工具
TVP
写文章

网易新闻《娱乐圈画传》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

欢迎关注,转发~

关注本号

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171229G0O4NB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券