iH5高级教程：HTML5建站,翻页过渡效果.docx

iH5高级教程：HTML5建站，翻页过渡效果

步骤：
第一步：准备素材

1.将舞台大小设置成宽为1024px，高为600px。本操作只是示范案例的操作，实际操作舞台大小可以自行设置。

2.选中舞台，点击页面工具，新建一个页面，设置页面的背景颜色。

第二步：制作动画过渡效果

1.在页面下添加一个时间轴。添加中文字体“阳光”和图片1，并为其添加轨迹。

2.分别选中两个对象的轨迹，分别为其添加2个关键帧。先选中图片1，设置舞台左边的图片1的属性，适当调整其透明度和设置旋转角度后在0秒处添加第一个关键帧。然后再次选中图片1，将图片1属性的透明度恢复到100，旋转角度恢复到0，在时间轴合适的位置添加关键帧。

选中中文字体“阳光”，适当调整其位置和大小，为它的轨迹在合适的位置添加关键帧。然后再次选中中文字体“阳光”，调整其位移和大小，在合适的时间添加关键帧。

3.将中文字体“阳光”隐藏，这样当时间轴播放的时候，还没有出现关键帧前这个中文字体会隐藏。

4.选中页面，点击事件工具，添加一个事件，触发条件为显示，目标对象为时间轴，目标动作为从头播放。那么当页面显示的时候，时间轴就会从头播放。

第三步：制作页面2

由于页面2和页面1的效果是一样的，复制页面1后，选中舞台，点击鼠标右键选择粘贴，然后找到舞台右边对象树的页面2里的中文字体和图片1。分别双击两个对象进行更改为文字和替换上传图片。

先行知识：事件、时间轴
重点控件：页面、事件、时间轴、轨迹

重点事件：

触发对象：页面1
触发条件：显示
目标对象：时间轴
目标动作：从头播放

TIPS：
1.过渡效果：实际上只是利用了对象属性和时间轴结合制作而成的效果。旋转、位移、缩放的动画都可以通过时间轴动画实现。
2.页面下的事件1是本示例中使时间轴播放的事件，而我们在自行制作案例时也可以将时间轴设置为自动播放。