iH5高级教程︰H5交互进阶,密码解锁效果.doc

H5交互进阶，密码解锁效果 密码解锁：一个帘幕背景的解锁屏幕，在按错密码时舞台会震动，连续按错三次时会播放解锁失败的动画，而当按对密码时帘幕拉开形成播放解锁成功的动画。用在作品的封面，就可以阻挡那些没有密码的人群啦！ 步骤： 第一步：制作密码界面效果 1.选中舞台，点击图片工具，添加数字按钮，选中图片，点击透明按钮工具，在相应区域画一个框。数字按钮是由一张数字图和九个透明按钮组成的。透明按钮分别是对应在九个不同的数字上，形成点击数字的效果。 第二步：制作解锁成功和失败的效果 1.用时间轴制作解锁失败的动画效果。选中舞台，点击时间轴工具，选中时间轴工具，点击图片工具，上传一张失败图片，选中图片，点击轨迹工具。这里设计的轨迹是图片从下到上的一个运动轨迹。 2. 选中舞台，点击时间轴工具，选中时间轴工具，点击图片工具，上传3张图片，选中图片，点击轨迹工具。添加数码按钮的窗帘背景，其中包括固定的上部分窗帘和解锁成功时会有动效的左右两边的窗帘。上部分窗帘放在舞台下，无论何时都不会发生变化。而用时间轴给左右窗帘制作了帘幕拉开的动效，即给帘幕最初的效果和最终被拉开的效果分别添加关键帧，在时间轴下还有一张welcome的图片，因为图片在窗帘的下方，所以只有当帘幕拉开时才会显现出来。 用计数器设置当解锁三次都失败时，舞台会播放失败动画的时间轴。选中舞台，点击计数器工具，选中计数器，点击事件工具（案例播放时隐藏计数器）。所以事件的设置是当计数器的数值等于3的时候，触发失败动画的播放同时删除数码按钮。也就是说三次错误之后就不能再进行密码的输入了。 第三步：设置密码配对的逻辑 1.选中舞台，点击输入框工具，在舞台上画一个框，选中输入框，点击事件工具，添加6个事件。连接数码按钮和时间轴，分别实现不同情况下失败动画和成功动画的实现。（输入框在这设置了颜色是方便大家区分，在运行中是没有对输入框的颜色进行设置的） 2.在这将密码设置为654321，事件1、2和事件3设置的是解锁成功时的效果，即解锁成功动画的播放、数码按钮的删除和输入框密码的清除。 3.事件4、5和事件6设置的是解锁失败的动效。即在前三次当输入密码不等于设定的密码时，舞台会发生振动（事件4），计数器的数值加一（事件5），输入框的文字会清除（事件6），而在密码输入错误到第三次的时候，计数器的数值变为3，就会触发刚刚设置的计数器触发的事件——失败动画的播放。 4.最后一步给数码按钮的透明按钮分别设置事件以对应输入框。（以按钮1为例）即按下透明按钮的时候再输入框会输入透明按钮的对应数值。选中数字透明按钮，点击事件工具。 先行知识：时间轴、计数器、输入框 重点控件： 知识点： 1、匹配： 2、不匹配： 3、添加文字： 触发对象：透明按钮1 触发条件：手指按下 目标对象：输入框 目标动作：添加文字值：1 触发对象：输入框 触发条件：匹配 值：654321目标对象：成功动画 目标动作：从头播放 触发对象：输入框 触发条件：不匹配 值：654321目标对象：数码按钮 目标动作：振动 时间0.5