《iH5高级教程HTML5建站,翻页过渡效果.docx》由会员分享，可在线阅读，更多相关《iH5高级教程HTML5建站,翻页过渡效果.docx（2页珍藏版）》请在三一办公上搜索。
1、iH5高级教程HTML5建站,翻页过渡效果iH5高级教程：HTML5建站，翻页过渡效果 步骤： 第一步：准备素材 1.将舞台大小设置成宽为1024px，高为600px。本操作只是示范案例的操作，实际操作舞台大小可以自行设置。 2.选中舞台，点击页面工具，新建一个页面，设置页面的背景颜色。 第二步：制作动画过渡效果 1.在页面下添加一个时间轴。添加中文字体“阳光”和图片1，并为其添加轨迹。 2.分别选中两个对象的轨迹，分别为其添加2个关键帧。先选中图片1，设置舞台左边的图片1的属性，适当调整其透明度和设置旋转角度后在0秒处添加第一个关键帧。然后再次选中图片1，将图片1属性的透明度恢复到100，旋
2、转角度恢复到0，在时间轴合适的位置添加关键帧。 选中中文字体“阳光”，适当调整其位置和大小，为它的轨迹在合适的位置添加关键帧。然后再次选中中文字体“阳光”，调整其位移和大小，在合适的时间添加关键帧。 3.将中文字体“阳光”隐藏，这样当时间轴播放的时候，还没有出现关键帧前这个中文字体会隐藏。 4.选中页面，点击事件工具，添加一个事件，触发条件为显示，目标对象为时间轴，目标动作为从头播放。那么当页面显示的时候，时间轴就会从头播放。 第三步：制作页面2 由于页面2和页面1的效果是一样的，复制页面1后，选中舞台，点击鼠标右键选择粘贴，然后找到舞台右边对象树的页面2里的中文字体和图片1。分别双击两个对象进行更改为文字和替换上传图片。 先行知识：事件、时间轴 重点控件：页面、事件、时间轴、轨迹 重点事件： 触发对象：页面1 触发条件：显示 目标对象：时间轴 目标动作：从头播放 TIPS： 1.过渡效果：实际上只是利用了对象属性和时间轴结合制作而成的效果。旋转、位移、缩放的动画都可以通过时间轴动画实现。 2.页面下的事件1是本示例中使时间轴播放的事件，而我们在自行制作案例时也可以将时间轴设置为自动播放。
