免费的零代码H5对折翻页效果制作教程

卡哇伊的渣渣

能像看书一样对折看相片是不是很有趣，使用一个免费的在线H5编辑工具不需要写代码也可以制作这种类似的效果，下面教大家来制作一个非常简单的对折翻页。

工具/原料：图片素材



第一步：登录。百度搜索找到互动大师官网，注册账号并登录。





第二步：创建作品。在“我的作品”里创建一个新的手机案例，进入编辑页面。






第三步：选择舞台，设置舞台颜色，点击工具栏“音乐”图标，将你的背景音乐上传，选择音乐，点击工具栏“事件”图标，选择事件，触发条件选择结束，目标对象是舞台.背景，目标动作从头播放。









第四步：选择舞台，点击工具栏“透明按钮”图标，在舞台下随意划个区域作为向上滑动指示的载体，选择透明按钮，初始可见为NO，点击工具栏“时间轴”图标，选择时间轴，点击舞台“图片”图标，将向上指示图标图片上传，并调整位置，选中UP图片，添加轨迹，通过时间轴制作上下的循环动效。






第五步：选择舞台，点击工具栏“页面”图标，添加7个页面，选择页面1，选择背景颜色，重置时间轴选择YES，点击工具栏“时间轴”，选择时间轴，自动播放属性选择YES，点击工具栏“图片”图标，将4张图片上传，分别选择4张图片，点击工具栏“轨迹”图标，结合时间轴，让4张图片依次浮现。选择时间轴，点击工具栏“事件”，选择事件，触发条件接收，目标对象舞台.向上按钮，目标动作显示















第六步：选择页面2，点击滑动时间轴在页面下划下一个区域，选择滑动时间轴，设置属性，覆盖页面，总时长为2秒，点击工具栏“图片”图标，将照片正反面上传。







第七步：在3D旋转副对象下两张图片添加轨迹

1-1的图是X的旋转角度为0到90度

1-2的图是X的旋转角度从-90度到0度

将两张图的轨迹设置中开始和结束显示设置为no






第八步：选择滑动时间轴，点击工具栏“图片”图标，点击空白，这图片作为图片上对话的容器，选择容器1，点击“时间轴”图标，选择时间轴，点击工具栏“图片”图标，上传素材，并在素材下添加轨迹，用时间轴和轨迹控制素材的出现，形成动态效果









第九步：选择容器1，点击工具栏“轨迹”和“事件”，为容器1添加两个事件和一个轨迹，轨迹两个帧分别是相片正面X轴0度时候透明度为百分之0，当相片正面为90度的时候，透明度为百分之百，选择轨道1，自动播完属性设置为YES，选择事件1，触发条件显示，目标对象选择容器1下的时间轴1，目标动作从头播放，选择事件2，触发条件显示，目标对象是页面2，动作是改变背景颜色















第十步：按照容器1的制作方法，制作容器2，容器2是对应照片背面显示的。容器2下时间轴和容器1下时间轴的播放形式一样，依次显示，形成动态效果。










第十一步：选择滑动时间轴，点击工具栏“事件”图片，添加4个事件，依次设置事件，选择页面2 ，点击工具栏“透明按钮”随意做个滑动暂停按钮。作为滑动惯性停止节点











第十二步：页面3和页面4与页面2的制作方法是完全一样的，当时页面背景颜色不一样，可以直接复制页面2，然后替换照片素材





第十三步：页面5 页面6 都是用时间轴和轨迹结合做的一些动态效果，页面7是一张图片做的页面





第十四步：作品的保存。点击编辑页面上方的保存按钮，在弹出的对话框修改作品的名称和描述，上传作品的封面图片，状态设置为公开，点击确定保存作品。



第十五步：分享作品。在“我的作品”里找到刚刚做的作品，点作品封面上的分享按钮，用微信扫描作品的二维码打开并分享出去。



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