养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

iH5中级教程:微场景H5必备,下拉画轴效果

时间:2024-11-06 08:35:59

向下拉动画轴,跟随着画轴的展开,会出现一幅图,里面的小船还会移动。利用IH5工具,你也可以很快地制作这样的一个交互效果!

iH5中级教程:微场景H5必备,下拉画轴效果

工具/原料

iH5

方法/步骤

1、舞台下添加一张背景图和上下卷轴,下卷轴设置拖动类型为垂直。选中舞台,点击图片工具添加图片。卷轴属性面板处设置卷轴类型为垂直。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

2、选中下卷轴,点击时间轴工具,添加一个时间轴选中时间轴,点击透明按钮工具,添加一个透明按钮,右键重命名为旋转父对象。选中透明按钮,添加轨迹,做一个左右摆动的轨迹明按钮下加一个中国结的子对象,透明按钮的轨迹是五个控制点,旋转度数分别是,0,15,0,-15,0。时间轴的自动播放和循环播放都设为YES。这样中国结就像黏透明按钮上左右摆动。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

3、添加下拉画轴的提示选中舞台,点击透明按钮工具,添加一个透明按钮。右键重命名为点击提示。选中透明按钮,点击时间轴工具,添加一个时间轴。选中时间轴,点击中文字体工具,添加“下拉画轴展开”的文字,点击图片工具,添加手的图片。选中手的图片,点击轨迹工具,添加一个上下移动的轨迹,提示用户下拉画轴观看效果第一个控制点手在上方,第二个控制点手在下方,第三个控制点位置与第二个关键帧一样。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

4、添加画,轴里的画选中舞台,点击工具栏滑动时间轴工具,螅岔出礤在舞台上拉出一个与展开的画一样大的框,滑动时间轴属性面板设置绑定对象下卷轴这张图片素材。(不绑定对象的话,滑动时间轴整个区阄莱决胪域都可以滑动,就没有拉开下卷轴看到里面的画的效果了)滑动方向是下,滑动时间轴放大比例1.3,(与国画展开的速度一致)。选中滑动时间轴,点击透明按钮工具,画一个区域,选中透明按钮,点击图片工具,添加一张黄色的宣纸。宣纸的属性面板,剪切设为YES,(这样的话,国画就不会超出透明按钮的范围)。选中宣纸,点击图片工具,添加一幅画。选中透明按钮,点击轨迹工具,添加轨迹。透明按钮的高度在变化,用透明按钮来控制画的展开效果。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

5、小船移动选中宣纸,点击时间轴工具,宣纸下添加一个时间轴。选中时间轴,点击图片工具,添加小船的图片,选中小船,点解轨迹工具,添加轨迹。点击ADD添加关键帧,小船的时间轴在国画下面,所以第一个控制点小船可以藏在国画左边,第二个控制点,小船在国画右边,模拟小船运动。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

6、选中下卷轴,点击事件工具,添加三个事件:(1)下卷轴开始拖动后,下拉画轴的文字与手的图片隐藏。(2)在下卷轴完全拉开的地方,添加一个透明按钮,作为下卷轴碰撞触发取消拖动的对象下卷轴离碰撞定位对象25个距离时,下卷轴设定属性不能拖(3)下卷轴下添加事件,当下卷轴离碰撞定位对象25个距离时,小船的时间轴开始播放,即小船开始运动。

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

iH5中级教程:微场景H5必备,下拉画轴效果

7、重点控件:事件,透明按钮,滑动时间轴重点事件:触发对象:下卷蛹侦硫馕轴触发条件:手指按下目标对象:下拉画轴提示的文栓疠瑕愤字与手的图片目标动作:隐藏触发对象:下卷轴触发条件:碰撞,对象:碰撞定位对象透明按钮,目标对象:下卷轴目标动作:设置属性,不能拖动。触发对象:下卷轴触发条件:碰撞对象:碰撞定位对象透明按钮,目标对象:小船时间轴,目标动作:从头播放。TIPS:滑动时间轴绑定对象,则会通过此对象的移动使滑动时间轴播放。滑动时间轴直接控制图片从窄变高显示,会使图片不等比例压缩,应该为图片添加父对象透明按钮,选中透明按钮,添加轨迹,通过透明按钮从窄变高显示,让图片以正常尺寸慢慢显示出来

© 一点知识