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


http://chuye.cloud7.com.cn/2314834

下载一个 初页app ,看到这个场景动画每一页都在canvas内,想问下这个是怎样把所有元素和动画都在canvas内实现的?

有什么类似的开源框架?
比如 https://github.com/Flipboard/react-canvas

canvas html5 JavaScript

我只是酱油 10 years, 2 months ago

就是画进去的啊。
各种正在 canvas 上做文章的各种应用,包括这个“初页”和各种 HTML5 游戏框架,
本质当然都一样,做一个框架,把页面数据按约定解析成各种 canvas 绘制方法。

“初页”这个似乎是自己写的框架,页面间切换是通过 CSS3 动画移动不同的 canvas
React-canvas 始终在同一个 canvas 里折腾有点差别。
而且似乎做了一些自适应工作,适应不同大小屏幕。

当然 React-canvas 也是个好框架,理当也能做到这种程度。

ace0087 answered 10 years, 2 months ago

canvas做动画,可能就用到了requestAnimationFrame【不同浏览器,会有前缀】这个新增的方法
它替代了原本的setTimeout或setInterval,但要注意咯,你不喜欢,也可以用setTimeout来实现动画。

话说,用canvas做动画还是比较复杂的,具体制作的话,参考一下网上setTimeout制作动画就OK,
requestAnimationFrame和setTimeout还是比较类似的

这个总没有了吧 answered 10 years, 2 months ago

我想请问一下楼主有没有什么可以制作类试于初页的h5开源框架

淡然不漠然 answered 10 years, 2 months ago

看了楼主那个链接,我怎么没发现canvas呢。。。
那些动画都是css3做的,移动一大堆div而已

看到楼上煞有介事的说canvas的也是醉了

disco answered 10 years, 2 months ago

Your Answer