文档详情

iH5中级教程:微场景H5必备横向滑动切换

平***
实名认证
店铺
DOCX
1.67MB
约15页
文档ID:16872674
iH5中级教程:微场景H5必备横向滑动切换_第1页
1/15

iH5 中级教程:微场景 H5 必备,横向滑动切换第一步:1、 选中舞台,点击工具栏页面工具 ,添加五个页面2、选中第一个页面,点击工具栏图片工具 ,添加窗户的背景图片2、 选中页面 1,点击时间轴图标 添加时间轴 13、 (1)时间轴下添加箭头图片(2)图片下添加轨迹(3)时间轴总时长 0.6 秒(4)为图片添加三个关键帧,通过调整 y 坐标和透明度,制作箭头指示上滑页面的效果4、 (1)页面 1 下添加时间轴 2(2)时间轴总时长 3 秒(3)选中时间轴,点击图片工具,添加人物素材(4)选中素材,点击轨迹工具,添加轨迹(5)缩小图片,透明度为 0(6)点 ADD 添加关键帧(7)移动小方块到轨迹 1 秒的位置,调节图片透明度 100(8)把图片放大,移动到窗边的位置,点 ADD 添加关键帧这样就有人物从无到有出现的效果5、 (1)时间轴 2 里添加两张文字图片(2)每张图片下都添加一个轨迹(3)通过设置关键帧,制作文字从两边往中间靠拢的轨迹第二步:1、选中第二页,点击图片工具,添加一张人物图片3、 (1)点击时间轴图标 ,页面 2 下添加时间轴,(2)选中时间轴,点击富文本工具 ,在舞台画一个框,在编辑框里填写一些文字。

3)选中富文本,点击轨迹工具,添加轨迹(4)轨迹开始显示为 NO(5)选中富文本,添加两个关键帧,调整透明度和位置,使文字会从无到有,从上到下出现第三步:1、 选中页面 3,点击工具栏滑动时间轴工具 ,在舞台上画一个区域,添加滑动时间轴,滑动时间轴与舞台一样尺寸2、选中滑动时间轴,点击透明按钮工具 ,在舞台上画一个区域,添加透明按钮,此透明按钮宽 3200,高 1008,是一个比舞台宽的长方形3、选中透明按钮,点击工具栏图片工具,添加 6 张食物的图片作为子对象6张图片平铺在透明按钮上,其中第一张图片和第六张图片是同一个食物图片前后图片一样才能在循环播放时前后衔接 )4、选中透明按钮,点击轨迹工具添加轨迹,点击 ADD 添加关键帧5、轨迹控制透明按钮往左移动,关键帧的坐标分别是(0,0) (-640,0) (-1280,0) (-1920,0) (-2560,0) (-3200,0) 2、滑动时间轴属性面板设置,总时长 5 秒,循环播放 yes,滑动放大比例 0.2,滑动方向左,自动跳转控制点 YES滑动放大比例越小,动画越平稳,越大,速度越快自动跳转控制点就是滑一下屏幕,自动跳到下一个关键帧的状态。

第四步:1、选中滑动时间轴,点击富文本工具,添加 6 个富文本2、选中富文本,点击工具栏轨迹工具,每个富文本都添加一个轨迹3、在对应食物图片的关键帧处添加富文本的关键帧富文本的轨迹属性面板,开始显示、结束显示为 NO,即当图片 1 显示的时候,富文本 1 显示,其他时间均不显示4、滑动时间轴下,添加碟子图片作为遮罩装饰为食物添加碟子阴影的效果5、页面 3 下添加时间轴,时间轴下添加箭头图片,为箭头图片添加轨迹第五步:1、 选中页面 4,点击时间轴工具,添加时间轴2、时间轴下添加宽度大于舞台的图片,图片下添加轨迹,图片往左移动2、选中时间轴,点击工具栏事件工具,添加事件,时间轴结束,目标对象时间轴,目标动作反向播放3、页面 4 下添加时间轴,控制富文本从上往下显示第六步:页面 5 下添加时间轴,时间轴控制富文本从下往上、从无到有显示第一个关键帧透明度为 0,第二个关键帧透明度为 100重点控件:滑动时间轴、轨迹、透明按钮、富文本知识点:1、 滑动放大比例:使用此参数来设定手指滑动的距离对滑动时间轴轴播放进度的控制,默认值为 1,即手指按设定方向划过滑动时间轴整个范围时,滑动时间轴会从起点播放到终点。

滑动放大比例越小,动画越平稳,越大,速度越快2、 自动跳转控制点:自动跳转控制点是指滑动时滑动时间轴是否在滑动停止时自动播放至下一个控制点,如果将这个选项设为是,那么在滑动停止时,将会自动播放到下一控制点再停止,呈现出类似惯性滑动的效果3、 自动跳转时长:如果将“自动跳转控制点”设置成为是,那么可以通过自动跳转时长来设定滑动停止后,滑动时间轴播放至下一控制点的时间,以秒为单位如果时间设得长,那么自动跳转的时间便会慢TIPS:1、 在时间轴与滑动时间轴里,如果希望循环播放可以前后衔接,应该使第一个关键帧和最后一个关键帧控制图片的状态一致2、 需要制作图片移动切换的效果,可以添加一个透明按钮,透明按钮下平铺多张图片子对象,轨迹控制透明按钮移动,多张图片即可移动切换相关事件:触发对象:时间轴触发条件:结束目标对象:时间轴目标动作:反向播放时间轴控制白色墙向左移动,时间轴结束后,反向播放,即白色墙向右移动。

下载提示
相似文档
正为您匹配相似的精品文档