html5 仿真翻页 h5翻页效果怎么做

如何制作带有翻页效果的免费手机H5页面？

现在有许多风靡的H5页面，这些手机H5页面的特别吸引人，那么在H5页面里如何进行手机页面的翻页特效呢？下面给大家推荐一个VX互动的在线工具，并用它来教大家如何制作特别的手机h5页面翻页。

步骤1：新建一个手机案例

创建手机案例，进入互动，点击我的作品——创建作品——手机案例2添加两个页面对象，对于舞台大小的设置，手机案例一般默认是640*1040，这是iphone6p的页面大小，这里我们使用640*1008的大小，这是iphone5s的大小，这个大小对于大多数的安卓手机也是适用的。

步骤2：单张图片的上传和修改

选中页面1，添加上传图片2将xy轴设置为0，大小设置为640*1008。这样设置便可以使图片满屏显示。

步骤3：制作动画。

添加时间轴，将图片，粘贴至时间轴下。为图片添加轨迹，并将时间轴设置为1秒左右。设置好图片动画时长，这样就不会出现设置的控制点动画播放完，时间轴仍然继续播放的情况。3.添加2个控制点，选中控制点1，设置透明度为0，控制点2的状态由于在设置控制点1前就已经添加，所以属性状态的透明度是与原来持同的100。这样就做出了一个渐现的效果。页面下添加2个事件，将事件1进行设置，触发对象为动作为显示，目标对象为时间轴，目标动作为从头播放，这样就能做出自动出现动画的效果。5设置事件2，触发动作为隐藏，目标对象为时间轴，目标动作为跳至某时刻，设置为0，这样做的目的是使你从下一页返回上一页时动画从头开始，可以避免返回上一页时时间轴动画播放完毕后不再播放。

步骤4：制作翻页效果。

页面切换更改为上下，滑动效果制作完成。

步骤5：更快捷地创建类似的新页面。

重庆版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com