好久不见,甚是想念,最近一段时间比较忙,之前答应大家VR汽车的原型教程,今天终于做好了,希望大家喜欢。做这一期主要是为了教大家如何用axure做一个3D的模板,做好之后,只要更换图片,就可以简单的实现效果。
好的废话不多说,首先我们看看做出来的效果吧
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/51494ac3d2711f79/#g=1
【原型下载】
方式2:https://weidian.com/item.html?itemID=4266676568
【制作教程】
1、素材准备
其实用Axure做3D效果最重要的就是材料,如果我们没有专业设备拍摄的话,可以采用以下两种方法进行拍摄,一个是以拍摄物为中点,我们和拍摄物的距离为半径,围绕着拍摄物进行拍摄,这种方式适合拍摄外部全景;另一种方法就是以自己为圆心,360度旋转拍摄,这种一般适合拍摄内景,例如汽车内部。当然了拍摄角度小,出来的效果就越好,但是耗费的时间也就越长,建议可以在10-20度拍一张照片其实就挺流畅的了,该原型就是每12度拍摄一张照片的效果。
2、材料准备
动态面板——实现3D效果
图片——导入你拍摄的照片
左右箭头——用于控制动态面板的状态
如下图所示摆放,注意图片需要放在动态面板里面,左右按钮放在动态面板外面
然后我们需要复制多个动态面板state,依次按顺序导入对应角度的图片。
3、交互设置
其实这个原型主要是材料准备时间长,交互是比较简单的
左按钮交互——鼠标单击时设置动态面板的状态为Previous,向前循环。
右按钮交互——鼠标单击时设置动态面板的状态为next,向后循环。
动态面板拖动时,我们只需要触发左右按钮鼠标单击时的事件就可以完成滑动看图的效果。这里需要注意的是,我们需要先判断鼠标是向左滑动还是向右滑动,如果向左滑动就触发左按钮,如果是向右滑动就触发右按钮。这里需要用到DragX函数,如果DragX大于0,就是是向右滑动,如果是少于0就是向左滑动。
以上就是本期分享的全部内容,谢谢阅读,如果喜欢的话,点下关注在走呗,作者会持续为大家带来高保真的axure教程的。
作者:梓贤vigo;
微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载