时间:2012年08月18日 作者:剧中人
360度展示
目前,很多网页里都有360度展示产品的特效,有些采用flash,有的用视频,还有的用js。说到各自的优点,应该是各有千秋吧!
这类特效用的最多的应该就是flash了吧,因为flash小巧轻便、交互性强、声色具绘,但其明显缺点是依赖于插件;视频用于展示是最好的,但其交互性较差,不考虑html5也离不开插件;js跨平台兼容较好,交互性较强但仅限于片段较短且不需要声音的地方使用。
其实捣鼓这个东东是因为小剧的好友天水给我的苹果官网的一个360度展示苹果手机的案例。小剧做的效果与案例有一点点不同,苹果官网展示的是鼠标拖拽旋转产品视角,而小剧做的是鼠标悬停对应按钮旋转视视角。
原理很简单,就是事先准备好一段3D渲染出的图像序列,一般36张就足够,不过图像越多动画越细腻。当按钮触发悬停事件,不停地更换当显示的图像,图像连续的变化便形成了一段近乎完美的动画。
源代码很简单,这里小剧主要学习到的是对代码精简复用的一般方法,算是一点点小有成就吧,砖家们、拍砖吧