求问初页 HTML5海报场景的JS技术实现原理

Question

http://chuye.cloud7.com.cn/2314834
下载一个初页app，看到这个场景动画每一页都在canvas内，想问下这个是怎样把所有元素和动画都在canvas内实现的？
有什么类似的开源框架？
比如https://github.com/Flipboard/react-canvas？

Answer 1

canvas做动画，可能就用到了requestAnimationFrame【不同浏览器，会有前缀】这个新增的方法它替代了原本的setTimeout或setInterval，但要注意咯，你不喜欢，也可以用setTimeout来实现动画。话说，用canvas做动画还是比较复杂的，具体制作的话，参考一下网上setTimeout制作动画就OK，requestAnimationFrame和setTimeout还是比较类似的

Answer 2

就是画进去的啊。各种正在canvas上做文章的各种应用，包括这个“初页”和各种HTML5游戏框架，本质当然都一样，做一个框架，把页面数据按约定解析成各种canvas绘制方法。“初页”这个似乎是自己写的框架，页面间切换是通过CSS3动画移动不同的canvas，和React-canvas始终在同一个canvas里折腾有点差别。而且似乎做了一些自适应工作，适应不同大小屏幕。当然React-canvas也是个好框架，理当也能做到这种程度。