欢迎访问图博新闻门户网!

全国新闻

您现在的位置: 主页 > 娱乐 >

网易2016娱乐圈画传的场景H5的实现原理是什么?

作者:admin 来源:未知 更新时间:2020-11-14 23:12

  我用threejs尝试过 通过沿着Z轴在空间上进行图片的对位布局 然后图片一张比一张大 然后z轴的距离也无限延长 效果勉强能够实现 但是图片多了会直接导致微信浏览器卡崩 同时图片放大太大的话 容易出现前后图片的交替闪烁的情况 总之 性能方面我突破不了 唉

  不过网易的这个图片处理的非常棒 那么大的图却只有几百KB 还很清晰 不得不赞 而且画中画的比例控制的也非常到位 过度场景的图也设置的很合理

  在《二零一七娱乐圈画传》刷屏后,榜妹也第一时间联系到了网易娱乐团队,与统筹郑寒月、文案张志明一起聊了聊刷屏h5的背后故事。

  郑寒月:娱乐圈画传是网易娱乐一直以来的品牌策划,相当于每年底的保留节目。今年也是在往年的基础上做了一次传承和创新,保留最初古典画风与娱乐圈热闹氛围的一种反差效果,今年除了一镜到底还加入了一些动效的创意,如果用户留心的话,能发现制作团队在这个策划中的很多小心思。

  郑寒月:“画中画”是一种特别棒的体验形式,其实它并不是今年首创,但我们今年在启动这个项目时就提出了新的想法,与插画师李志、动效师孟帅以及前端王震一起磨合,最终实现了“画中画一镜到底+动效”流畅的展示效果。而且今年除了动效外,新增了一个特别棒的回看效果,用户点击再看一次,能像穿越时光机一样回到策划的最初,是一种全新的体验形式。

  榜妹:画中采用了很多隐晦的表达方式,比如“白女侠手戳小鲜肉敏感部,江湖再现一指弹”,为什么?

  张志明:首先我们是做新闻出身,选取的事件是全年最大的娱乐事件和热点新闻。新闻如果通过绘画来展现,我们觉得要抓取新闻里最好玩,最有趣的一部分,这样才能抓人,才可以使用户有兴趣继续点下去。

  白百何新闻中最有趣的就是“一指禅”,通过绘画和动效来展现就要抓住这个点。薛之谦同样也是全年的大事件,他的新闻事件可能是跟李雨桐的相互指责,“求锤得锤”,我们就画了李雨桐千手观音拿着大铁锤打薛之谦,也反应了新闻事件的本质。

  我们没有做的那么古板,通过比较隐晦的表达来呈现出最好玩最有趣的新闻。遗憾的是由于制作时间比较早,12月发生的事情并没有选上,不然侯耀华和女徒弟的事情画出“白云皮革城”“师傅,妖精”,也会非常有趣。

  郑寒月:这首歌其实是一首老歌,因为开心麻花的新电影又火了起来,选择这首歌一方面是因为传唱度高朗朗上口,一播放就很惊喜、很,虽然是老歌也给人眼前一亮的新奇感,有点出其不意;另一方面正好也快过年了,《好运来》很有中国新年的意境,寓意也很好。这个策划从测试开始,我们制作团队都听了太多遍这首歌,现在不仅幻听还老不自觉唱起来。

  郑寒月:其实这个过程并没有太顺利,因为手绘作品加上分层做动效,它会造成整个H5体量很大,这就会严重影响加载速度和用户操作体验,我们也经过多轮测试,做了取舍,包括删减掉了一些原本做好的动效,最终有了现在极具观赏性、趣味性的实现效果。也是非常感谢我们强大的制作团队成员们。

  郑寒月:从最初立意沟通新想法,到28日上线个月时间,插画师李志从底稿到最终成稿很用心,包括期间我们会沟通场景中的细节和元素,包括王俊凯18岁震撼的生日应援怎么表现、怎么突出场景中人物的特点等等,大家碰撞想法,如何让用户观赏性更强,如何更好地实现动效。这个策划在插画、动效、前端制作上耗时都很长。

  张志明:去年一镜到底出来刷屏后,有人反应长按比较累。今年在展现形式上,前期我们有讨论采用别的形式,因为怕用户审美疲劳和没有创新。但是通过和前端动效设计讨论,我们延续了去年的形式,但是有所改动。就是加了动态效果,其实每张都有动效,在切换的过程会有短暂停顿让用户来观看整个新闻。由于加载过大,我们舍弃了很多,只保留了好玩的动效,如白百合、薛之谦等。

  动效+一镜到底其实是今年的形式。我们也总结了去年没有回放的功能,在最后再看一次,做了一个闪回功能。可能在形式上,会有瓶颈,但是当用户对之前的形式没有反感的时候,我们可以延续,就是站在前人的肩膀上。我们就把重心放在了内容和画风上,想着如何会更有趣,会让网友乐,开心还能回顾全年事情。背景音乐就用了神曲“好运来”,和画传上的人物有鲜明的对比,这样制作、内容、画风、音效都结合起来就构成了今年的画传骨架。

  郑寒月:我们28日中午12点开始在网易新闻客户端上推荐,然后就引爆了朋友圈的刷屏,传播效果非常直观。要是还没有看过二零一七年娱乐圈画传,去朋友圈刷一下,总能找到。

  代码也简单,解压缩一下就能看懂了,核心其实就是用了canvas的draw image的接口,在requestanimationframe里调用。

  重点在于超出屏幕的图片和在屏幕内的图片的参数的计算,然后在适当的时候把图片换掉。我也试过用dom动画实现,但不如canvas流畅。

  创意是来源于万达的一镜到底h5,只是万达的是用视频实现的,在ios手机上有几率会弹视频控件,体验不太好。