江苏龙网

  1. 首页 > 生活 > >

网易新闻\u003c滑向童年\u003e中的视觉效果是咋做的

网易的这个滑向童年应该是使用canvas绘制的类似视差滚动的效果，简单考虑的话，这种动画，页面中各种不同的图片/元素的都可以用一个固定范式来描述：
1.物体初始状态 ＝》 物体终止状态/物体偏移量状态包括 颜色 宽高 位置 透明度，层级等等。
2. 物体处于初始状态的滚动位置 (相对于全屏)3.物体处于终止状态的滚动位置4.视差滚动总长度。
这样比如我描述一个行为：一个盒子从页面顶部到页面底部1000px内，右移1000px，就可以用下面这个简单的dsl描述：
var list = { elem:\u0026#39;box\u0026#39;, style:\u0026#39;left\u0026#39;, scrollStart:0, scrollEnd:1000, styleVal:1000, }简单的demo：背景固定
demo是使用dom做的，使用canvas只需要不断的获取到偏移量然后drawimage就好啦

■网友
没有仔细看代码，不过几年前用createjs实现过不少类似的H5。
做法是监听stagemousemove(类似于dom的mousemove、touchmove)的同时，去调用tweenjs的gotoAndStop函数，实现对特定时间点的帧动画切换，手指在stage上move的长度对应着一定数量的帧动画。
【网易新闻\u003c滑向童年\u003e中的视觉效果是咋做的】 著名钢琴家李坚钢琴独奏音乐会邀请函 (在H5轮播的区域切换中，帧动画精确的随手指移动)
同时，也可以使用createjs.Ticker实现某一帧到某一帧的动画片段的进行过程。
2015联想手机爱你有我(这个和网易这个还是比较类似的，使用stagemousemove监听调用播放即为滑动播放)
亚马逊物流,通关赢大奖(一个略微复杂的广告类游戏，将大大小小的动画片段组织起来)
当时是使用flash动画(adobe flash cc)+内置js脚本导出包含各个动画片段的js代码，然后在自己的js中以play，stop,gotoAndStop等函数调用即可，对会flash动画的同学来说还是很方便的(也不需要使用ActionScript);
现在啊逗比出了Animate CC，应该会更加方便了吧（现在不做动画了,没怎么用Animate CC，不太清楚实际使用情况）。


    推荐阅读


    上一篇：虚拟现实硬件设备铺天盖地如雨后春笋，但是VR内容在哪里买个头盔就为了看电影玩游戏

    下一篇：2015年有哪些交互设计沙龙