如何制作折角翻书效果

卡哇伊的渣渣

我们现在日常朋友圈生活中充斥了满满的H5页面，现在H5是很火的一种宣传方式，我们经常看到一些翻书效果，H5也能制作出来。那么怎么制作呢？今天我们利用一个非常好用的免费制作H5的在线工具来给大家分享一下做法。

第一步：创建手机案例

1.进入互动大师，点击我的作品——创建作品——手机案例



2.设置舞台大小为640*1008，这是手机案例常用的大小。



第二步：上传相关的图片素材和翻页页脚素材

1.上传需要进行翻页的图片，这里先上传1张，将其大小设置为640*1008。





2.翻页页脚素材可以在我的作品——模板与教学——案例0129【折角翻书】里复制，也可以自己制作或网上找。在这里我们利用案例里的页脚素材，在编辑器中打开后选中页脚1，右键复制到剪贴板。





3.将素材粘贴到自己的作品里，选中舞台，右键选择“从粘贴板粘贴”后删掉页脚1的轨迹，因为到现在还没有用到时间轴或滑动时间轴，所以暂时删掉，后面需要时会重新添加轨迹。



第三步：添加容器和滑动时间轴

1.添加3个透明按钮，第一个透明按钮选中舞台后添加，第二个选中透明按钮1添加，使第二个透明按钮1成为第一个透明按钮1的子对象。第三个如此类推，使其成分第二个的子对象。这个透明按钮层是为了放置图片1且制作翻页效果的，为了避免位移，将所有的透明按钮的坐标都设置为（0,0）。



2.为了方便辨认，将透明按钮分别重命名为“页1”、“外框”、“图片容器”，并将1剪切粘贴到图片容器下。





3.由于图片容器是用来装图片的，所以它的大小要设置成比图片（640*1008）一样大，而“外框”的大小由于跟翻书效果有关系，要设置得比舞台大一些。“页1”则可以随便设置，因为其大小跟翻书效果是没有关联的。另外为了制造翻页效果需要将“外框”属性中的剪切选为YES。



4.添加一个滑动时间轴，将“页1”和“页脚1”剪切到滑动时间轴下。



5.为“页脚1”和“外框”添加轨迹。



第四步：设置折角翻书效果

1.选中“页1”，将其属性中的旋转设置为-5。同理，将图片容器属性中的旋转设置为5。







2.如果此时图片显示位置有变，是因为旋转属性有更改，所以对象的xy坐标和对象的宽和高需要微调，直至调回合适的位置。



3.为“页脚1”和“外框”添加2个控制点。



4.两条轨迹的控制点1均保持原属性，选中“页脚1”轨迹的控制点2，改变其属性窗口的y坐标，制造页脚翻页效果的第一步。



5.选中“外框”轨迹的控制点2，改变其属性窗口的高，调整“页脚1”控制点的位置，完成折角翻书效果。



第五步：复制效果，进行图片的替换。

1.复制“页脚1”和“页1”，粘贴在滑动时间轴1下。




2.重命名新的“页脚1”和“页1”为“页脚2”和“页2”。双击“页2”下的“1”，替换图片即可。如此类推，便能快速做出折角翻书效果。




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