广告合作
  • 今日头条

    今日头条

  • 百度一下

    百度一下,你就知道

  • 新浪网

    新浪网 - 提供新闻线索,重大新闻爆料

  • 搜狐

    搜狐

  • 豆瓣

    豆瓣

  • 百度贴吧

    百度贴吧——全球领先的中文社区

  • 首页 尚未审核订阅工具 订阅

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

    来源:网络收集  点击:  时间:2024-02-18
    【导读】:
    手势解锁动画:有相关的路径提示按钮,并且划过的轨迹会变色,最后解锁成功与解锁失败会出现不同效果。你可以随心制定专属于你的解锁轨迹。工具/原料moreiH5方法/步骤1/4分步阅读

    选中舞台,点击工具栏的图片工具,在舞台上画一个框,上传添加需要的背景图片。这里添加的是一张背景图片和一张含有“欢迎回来”字样的png图片。当然,我们也可以直接使用工具栏的文本工具或者中文字体工具来加上文字。

    2/4

    1、选中舞台,点击时间轴工具,选中时间轴,点击图片工具,共上传3张图片。

    2、选中图片,点击轨迹工具,添加轨迹。其中覆盖层是在眼睛上方的一层与背景颜色相同的图片,给它制定的轨迹是先向下再向上运动,上半层图片中分别包含两个眼睛的图片,制作的轨迹是眼睛的拉伸与还原,这样配合覆盖层的动效,就会形成一个比较生动的睁眼效果。而上半层图片和下半层图片的分离是在睁眼动效完成之。后分别设置了一个向上运动和向下运动的轨迹,即分别在初始位置后最后位置设置关键帧就可以了。下半层是一张png图片,其中包含的镂空图案就是待会要设置的擦除轨迹。所以大家可以根据需要设置自己喜欢的擦除图案和形状。

    1.选中舞台,点击时间轴工具,添加提示动画时间轴。利用时间轴给提示光标设置路径,因为路径是曲折的,在两个相邻的关键帧之间是以直线来运动的,所以就要对每一个拐弯点都设置关键帧。另外对提示动画设置了自动播放,这样在作品打开的时候就会播放提示动画,而在这对轨迹设置了结束显示是NO,并且对时间轴设置了不循环播放,所以提示光标在播放完一轮之后就会消失。

    2.接下来添加的是木有解开动画效果,同样也是用时间轴来设置。选中舞台,点击时间轴工具,添加一个木有解开的动画。给木有解开图片添加的关键帧设置了放大缩小的效果,形成一种弹动的动效。另外因为木有解开的动效是解锁失败触发的,所以,自动播放的选项设置NO。(木有解开动画的开始显示和结束显示都是YES,而在开始并没有看。。见这个图片,那是由于我们在设置轨迹时,对它的第一个关键帧的透明度设置的是0)

    3/4

    1.最后来制作擦除效果需要的内容,添加画图工具,隐藏其它的对象我们可以看出这就是一个手势的轨迹图,这是在画图工具里面加载的一张PNG图片,当然,大家也可以用画笔来画这个轨迹。因为需要擦除的效果,所以这里要对画笔类型设置橡皮擦并对线条宽度做相应的设定还有允许画图的设定。

    2.给画图添加四个事件,选中画图,点击事件工具,使手势解锁成功时“解开动画”开始播放(事件1),画图1隐藏(事件2),解锁事件失败则播放“木有解开”动画(事件3)。而木有解开动画显示后我们依旧可以继续进行解锁,当解锁成功时木有解开时间轴就会跳至0时刻,即透明度为0(事件4),就不会显示“木有解开”了,同时解开动画也会播放。(手势擦除指的是擦除画图中有内容的图画,大小的百分比越大,擦除的精度就要求更高。)

    4/4

    除轨迹的长度),擦除的长度不超于设置的长度且同时擦除的范围在设定的大小之内,目标动作就会被触发;否则,在不满足任意一个条件的情况下,目标动作都不会被触发;但是,如果只设置大小,不规定长度,则擦除轨迹的长度不会受限制,只要擦除范围在设定的大小之内,目标动作就会被触发。

    重点事件:

    触发对象:画图

    触发条件:手势擦除

    大小:60%

    目标对象:解开动画

    目标动作:继续播放

    触发对象:画图

    触发条件:手势擦除少于

    大小:60%

    目标对象:木有解开

    目标动作:从头播放

    本文关键词:

    版权声明:

    1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

    2、本站仅提供信息发布平台,不承担相关法律责任。

    3、若侵犯您的版权或隐私,请联系本站管理员删除。

    4、文章链接:http://www.1haoku.cn/art_67438.html

    相关资讯

    ©2019-2020 http://www.1haoku.cn/ 国ICP备20009186号05-05 05:52:47  耗时:0.024
    0.024s