快生活 - 生活常识大全

教程拖动拼图解锁效果制作步骤详解


  本文详细介绍了如何用Axure制作拼图样式的拖动解锁效果,有需要的小伙伴赶紧学习起来~
  用Axure制作拼图样式的拖动解锁的效果:
  拉动按钮直线运动在一定范围内;
  拼图跟随按钮直线运动在一定范围内;
  按钮停下来,如果拼图位置跟阴影位置的误差在一定范围内;
  点击登录按钮跳转到登录成功页面。
  一、元件布局
  先用图片处理软件制作了三片拼图,两个小拼图是一样大的,大小拼图两者是能合一的,其他的图标从网上下载,图形可用Axure制作。
  记录下滚动条的宽度和位置,这是按钮和拼图移动的范围,按钮元件设置为动态画板
  二、添加事件
  1. 按钮沿直线在一定范围内移动
  选中动态面板添加拖动时事件,添加移动动作
  2. 拼图跟随沿直线在一定范围内移动 ——同按钮,直接添加动作即可
  3. 按钮停下来,如果拼图位置跟阴影位置的误差在一定范围内(技术小白在这卡了很久)
  添加事件拖动结束时,添加情形(条件),设置拼图和拼图阴影直接距离绝对值大于等于10,添加动作,这个条件下将产生什么动作
  重点是第2步,设置变量和函数。
  设置局部变量拼图和拼图阴影,用函数math.abs计算两个图形左侧距离的绝对值,当大于10时,按钮退回原处(可以设具体的位置)。
  4.点击登录按钮跳转到登录成功页面
  总结一下:做这个效果的难点在于增加了变量和函数在里面,同时两个判断条件所产生的位置不同,一个是按钮界面一个是登陆界面。
网站目录投稿:妙柏