iH5高级教程：H5交互进阶,打字机效果9.docxVIP

iH5高级教程：H5交互进阶，打字机效果 第一步：添加素材 1、选中舞台，点击音乐工具，添加背景音乐素材，音乐属性设为自动播放YES，同样添加打字机声音的音乐素材，音乐属性设为自动播放NO（因为只有在打字机动的时候才有声音）。 选中舞台，点击图片工具，添加打字机图片。选中打字机图片，添加两个音乐按钮图片。按钮灰在按钮红的上面，即打开作品首先显示按钮灰。 选中按钮灰，点击事件工具，添加2个事件。手指按下，音乐暂停，并且让按钮红盖住按钮灰。 选中按钮红，点击事件工具，添加2个事件。手指按下，音乐继续播放，并且让按钮灰盖住按钮红。 选中舞台，点击时间轴工具，添加时间轴1（根据这个案例的需要，将时间轴的自动播放和循环播放属性设置为NO，时间轴时长设为65s），在时间轴下添加1、2、3、4、5图片素材，即打字机中出现的图片，让这些图片成为时间轴1的子对象。同样的方法添加时间轴2，并在它下面添加打字机的GIF图片。时间轴1重命名为24气节，时间轴2重命名为打字。 第二步：设置打字出现的效果 选中时间轴1下的每张图片，点击工具栏中的轨迹按钮，为每张图片添加轨迹。然后在轨迹上添加图片运动的关键帧。例如，选中图片1的轨迹添加关键帧，控制图片1的运动。在这个案例中，这些图片是从下到上出现的，所以只需要选中关键帧，修改图片的Y坐标就可以达到向上运动的效果。比如在图片1轨迹1中，0秒关键帧时，图片1的坐标为（0, 950），在11秒的地方，添加另一个关键帧，并设置图片1的坐标为（0, -602），这样图片1就在11秒的时间内从Y坐标为950的位置向上移动到了-602的位置，即视觉上打字机中的图片向上慢慢出现了。 第三步：添加打字机动画 选中打字时间轴，添加打字GIF，选中打字GIF，点击轨迹，使打字GIF有左右移动的效果。 第一个关键帧和第三个关键帧设置一样。 第二个关键帧，GIF处于右边。 第四步： 选中舞台，添加透明按钮1，区域为“按下看清每一步”的大小，或可以拉得更大。添加透明按钮的远影是避免手机由于长按图片会自动跳出保存图片的指令。 选中透明按钮，点击事件工具，添加事件，用户的动作是长按底部按钮时，打字针会左右运动，同时打字机中的图片向上出现，当手指离开的时候，打字针停止，打字机中的图片也停止向上。 手指按下，24时节时间轴继续播放，手指离开，时间轴暂停。 手指按下，打字时间轴继续播放，手指离开，时间轴暂停。 手指按下，打字声音继续播放，手指离开，声音暂停。 手指按下，打字GIF显示，手指离开，GIF隐藏。 手指按下，打字GIF从头播放，手指离开，GIF结束。 先行知识：时间轴、事件 重点控件：时间轴、事件、GIF、透明按钮 重点事件： 触发对象：透明按钮 触发条件：手指按下 目标对象：时间轴 目标动作：继续播放 触发对象：透明按钮 触发条件：手指按下 目标对象：时间轴 目标动作：暂停 TIPS: 1、避免长按手机时弹出保存图片提示，可以添加层或透明按钮，挡住下面的图片。 2、为了让图片前后衔接，制作打字机打印纸张的效果，每张图片两个关键帧控制图片由下往上移动，前一张图片第二个关键帧的时间与后一张图片的第一个关键帧时间相同，前后衔接。