axure动态面板如何实现滑动解锁_第1页
axure动态面板如何实现滑动解锁_第2页
axure动态面板如何实现滑动解锁_第3页
axure动态面板如何实现滑动解锁_第4页
axure动态面板如何实现滑动解锁_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

axure动态面板如何实现滑动解锁在制作app交互效果的时候，遇到手机滑动解锁，所以特意去学了axure怎么用动态面板实现滑动解锁（也就是拖动）的效果，这里和大家做一个分享。一、第1步：准备相关的元件并命名手机图片、手机壁纸（这里为了好看，可忽略）、轨迹矩形、滑块图标、提示文本、变化矩形（尺寸随着滑块的移动而变化），如下图：建议：第一次建议用矩形，不要用圆角，下图只是为了好看：二、第2步：调整元件的位置、尺寸、颜色调整轨迹矩形为半透明状态，且边框去掉；调整变化矩形的初始宽度为1；调整提示文本的颜色为灰色，调整后如下图：三、第3步：设置交互1.选中滑块，将其转化为动态面板然后添加【拖动时】的交互用例，添加动作【移动】，选中当前元件，设置【水平拖动】，动画效果可选【线性】，这样比较自然，时间可自行设置。如下图：2.添加边界即滑块从哪里开始，到哪里结束；这里滑块从轨迹矩形的左侧开始，到轨迹矩形的右侧结束；在设置边界前，需点击fx添加变量：添加完局部变量后，点击插入变量或函数，插入刚刚设置的变量，输入左侧[[LVAR1.left]]，点击确定：点击确定后，按照同样的方法添加右侧的边界，输入[[LVAR1.right]],如下图：3.设置变化矩形的尺寸点击【设置文本】，选中元件【变化矩形】：因为它的尺寸是个变量，所以【宽】不能是定值，需要点击右侧的fx按钮添加变量，它的宽=滑块左侧的x坐标–轨迹矩形左侧的x坐标，变量设置如下图所示：点击确定后，设置锚点为左侧，动画选为【线性】，时间设置为与滑块拖动的时间一致即可；如下图所示；这样设置完动作之后，还需为这些动作添加条件，点击【添加条件】的按钮，出现弹框如下图，选择“符合全部以下条件”，设置【滑块左侧】的【值】大于等于【轨迹左侧】的【值】时，滑块开始拖动：下图为设置滑块的变量：下图为设置轨迹矩形的变量：下图为添加完变量后，点击确定即可：点击条件设置的确定后为下图，然后再点击确定即可：4.设置【拖动结束时】选中【动态面板】即滑块，添加【拖动结束时】的交互用例，添加动作【设置文本】，元件选择为【向右滑动解锁的文本标签】，设置文本为【富文本】，然后点击【编辑文本】，进入到文本编辑弹框：以下为文本编辑，输入文本为“解锁成功”，然后点击确定即可：下图为点击确定后的：设置完文本后，我们还需要添加一个拖动结束的条件，即当滑块的右侧x坐标=轨迹矩形的右侧x坐标，这里的变量设置可参照上边；以下为设置完的

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论