HTML5微场景之360度物体展示

卡哇伊的渣渣

手指左右滑动，就有人工旋转手表的操作体验，对产品展示来说是非常好的展示效果。

        



第一步：添加静态对象

添加文字和箭头。可根据自己的实际需要来添加。






第二步：手表的旋转效果

添加一个滑动时间轴，下面添加手表360度不同方向定格的展示图片，本案例有37张。大家也可以加几张或者十几张图，也可以达到类似的效果。为每张图片添加轨迹，所有的控制点都是依次排列的。每一个时刻只要求显示一张图片，每张图片都有两个控制点，属性是完全一致的。在轨迹中设置属性，开始显示与结束显示设为NO，即每一张图片的第一个控制点之前与第二个控制点之后，都是不显示的，只有在两个控制点直接才显示，以此规定每张图片显示的时间段。











第三步：手表的滑动时间轴设置

手表的滑动时间轴，滑动方向设置为左，这样图片的排列方式才会让人觉得是手在翻转物品。滑动放大比例设为1，当用户的手指在滑动时间轴的左边到右边，即整个滑动时间轴完成时间是1。如果比例调大，滑动一点点，图片就会飞快地转动。建议不要调得太大，否则在慢一点的手机里会显得有点卡。





第四步：分享作品

保存作品，回到我的作品页面中，点击分享按钮，可以把这个地址分享给朋友，或者扫描二维码，在手机上观看，还可以分享到微信朋友圈。





如果你有独特的创意想法，运用VXPLO互动大师，通过简单的几步设定完成一个微场景，打破生硬的动态图文，增加用户浏览时更有交互性和趣味性，在微信中快速传播。


任何技术性的问题可以加入“VXPLO互动大师技术服务”群：301817884
或者点击“VXPLO互动大师”直接进入官网体验
VXPLO互动大师欢迎对交互设计有想法的各位朋友们的加入！