iH5高级教程H5交互进阶,手势解锁效果.docVIP

iH5高级教程：H5交互进阶，手势解锁效果 手势解锁动画：有相关的路径提示按钮，并且划过的轨迹会变色，最后解锁成功与解锁失败会出现不同效果。你可以随心制定专属于你的解锁轨迹。 步骤： 第一步：上传背景图片 选中舞台，点击工具栏的图片工具，在舞台上画一个框，上传添加需要的背景图片。这里添加的是一张背景图片和一张含有“欢迎回来”字样的png图片。当然，我们也可以直接使用工具栏的文本工具或者中文字体工具来加上文字。 第二步：添加时间轴（设置解锁后动画效果） 1、选中舞台，点击时间轴工具，选中时间轴，点击图片工具，共上传3张图片。 2、选中图片，点击轨迹工具，添加轨迹。 选中舞台，点击时间轴工具，添加提示动画时间轴。利用时间轴给提示光标设置路径，因为路径是曲折的，在两个相邻的关键帧之间是以直线来运动的，所以就要对每一个拐弯点都设置关键帧。另外对提示动画设置了自动播放，这样在作品打开的时候就会播放提示动画，而在这对轨迹设置了结束显示是NO，并且对时间轴设置了不循环播放，所以提示光标在播放完一轮之后就会消失。 接下来添加的是木有解开动画效果，同样也是用时间轴来设置。选中舞台，点击时间轴工具，添加一个木有解开的动画。给木有解开图片添加的关键帧设置了放大缩小的效果，形成一种弹动的动效。另外因为木有解开的动效是解锁失败触发的，所以，自动播放的选项设置NO。（木有解开动画的开始显示和结束显示都是YES，而在开始并没有看。。见这个图片，那是由于我们在设置轨迹时，对它的第一个关键帧的透明度设置的是0） 第三步：利用画图工具制作擦除效果 最后来制作擦除效果需要的内容，添加画图工具，隐藏其它的对象我们可以看出这就是一个手势的轨迹图，这是在画图工具里面加载的一张PNG图片，当然，大家也可以用画笔来画这个轨迹。因为需要擦除的效果，所以这里要对画笔类型设置橡皮擦并对线条宽度做相应的设定还有允许画图的设定。 2.给画图添加四个事件，选中画图，点击事件工具，使手势解锁成功时“解开动画”开始播放（事件1），画图1隐藏（事件2），解锁事件失败则播放“木有解开”动画（事件3）。而木有解开动画显示后我们依旧可以继续进行解锁，当解锁成功时木有解开时间轴就会跳至0时刻，即透明度为0（事件4），就不会显示“木有解开”了，同时解开动画也会播放。（手势擦除指的是擦除画图中有内容的图画，大小的百分比越大，擦除的精度就要求更高。） 先行知识：画图、时间轴 重点控件：画图、事件、手势擦除、手势擦除少于、时间轴 重点知识： 2、手势擦除少于： 重点事件： 触发对象：画图触发条件：手势擦除 大小：60% 目标对象：解开动画 目标动作：继续播放 触发对象：画图 触发条件：手势擦除少于 大小：60% 目标对象：木有解开 目标动作：从头播放