手机版 欢迎访问人人都是自媒体网站
原型演示地址:#g=1&p=index
效果如下:
原材料:动态面板、西瓜图(圆圈)、唇膏图、背景图、挑战失败弹窗(默认隐藏)、挑战成功弹窗(默认隐藏),2个默认隐藏文本框(记录位置x和y)。
步骤1设置西瓜图载入时的事件。
旋转西瓜,方向和速度可以自己设置
设置记录文字x文本框=唇膏1的横坐标,设置记录文字y文本框=唇膏1的纵坐标。
设置动态面板在state1和2之间不断循环。用于后续判断挑战是否成功。
禁用唇膏2-11。
设置唇膏点击时事件:
禁用本元件,点击后不能再点。
移动该元件到西瓜的底部。
移动下一唇膏(唇膏2)到本唇膏的位置(记录x文本框和y文本框的值)。
设置等待时间=唇膏移动的时间
旋转唇膏,速度和方向和西瓜旋转一致。
启用下一唇膏。
最后一根唇膏鼠标单击时:
禁用本元件,点击后不能再点。
移动该元件到西瓜的底部。
设置等待时间=唇膏移动的时间
旋转唇膏,速度和方向和西瓜旋转一致。
等待500毫秒。
显示挑战成功弹窗
设置动态面板:
载入时:设置面板不断循环
状态变更时:判断唇膏1-11之间有没有是否接触,如果接触了显示挑战失败弹窗。
设置挑战失败弹窗显示时事件:
禁用所有唇膏。
隐藏挑战成功弹窗下面全部元件(这样最后一根失败也不会弹出)。
原型可在axure官网下载,希望大家做出自己喜欢的原型。
Copyright © 2018 DEDE97. 织梦97 版权所有 京ICP