AxureRP8中实现伸缩式的图片展示交互效果

AxureRP8.0教程 小楼一夜听春语 2337℃ 0评论

上午的时候,在一个群里看到这样的实现需求。

伸伸缩缩,感觉很爽的样子。

那么,这样的一个交互效果如何实现呢?

详细的教程我就不写了,直接上交互截图和源文件就好了。

好多操作步骤是吧?

实际上,只需要在一张图片上完成这些设置,剩下不管有多少张图片都是复制粘贴而已。

这里主要说一下这些交互内容中的关键点。

首先,需要两个变量记录当前展示的图片编号,和上一个展示的图片编号,通过这两个编号值的大小决定当前展示的图片是否移动。

例如,鼠标指针从右侧滑向左侧的时候,实际上只需要前一个图片向右移动,当前展示的不需要移动位置。

所以,鼠标指针移入时,做了选中当前图片的操作,并且在【选中时】,进行了判断,如果当前图片编号(图片名称用数字编号命名,所以通过“This.name”能够获取)大于上一张图片编号(即当前图片在上一张图片右侧),此时向左移动当前图片。

同样道理,前一张展示的图片取消选中时(通过选项组名称完成取消),如果图片编号大于当前展示图片的编号(在展示图片右侧的图片),则向右移动前一张展示的图片。

但是,通过以上的交互处理,前一张展示图片和当前展示图片之外的图片还不能联动。

所以,添加了尺寸改变时的交互。

尺寸改变时的交互实际上并没有相关的操作触发,而是在每张图片鼠标移入时,通过【触发事件】的动作,让每个元件执行【尺寸改变时】的交互。

在这个交互中,每张图片都判断自己所处的位置。

位置在前一张展示图片右侧并且在当前展示图片左侧的图片全部向左移动。

例如上一张展示图片是2号,当前展示图片是6号,此时3、4、5号图片都应该左移。

位置在前一张展示图片左侧并且在当前展示图片右侧的图片全部向右移动。

例如上一张展示图片是5号,当前展示图片是1号,此时2、3、4号图片都应该右移。

以上就是这个交互效果实现的整体思路。

源文件下载:http://downloads.iaxure.com/move_images.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8中实现伸缩式的图片展示交互效果

喜欢 (37)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 头像
    老师出个教程呗 不是很看的懂
    郑好2018-11-29 22:30 回复
  2. 头像
    没看懂
    多米2019-05-08 13:25 回复
  3. 头像
    小楼老师 留下群号 供学习者交流呗
    多米2019-05-08 13:25 回复
    • 小楼一夜听春语
      导航菜单
      小楼一夜听春语2019-05-08 22:31 回复
  4. 头像
    老师,现在就业还有机会吗?
    小屁屁2019-06-17 14:26 回复
  5. 头像
    试了以下,条件完全一样,但是效果就是有问题,找不着原因
    知否2019-10-17 16:46 回复
  6. 头像
    小楼老湿,琢磨了半天,觉得不好理解的在于第一个用例(鼠标移入时)设置值那里有点懵,其他都很好懂。我试着吧P值和C值用文本显示出来,初始移入鼠标时C值没有数据,P值等于this.name的值是咋回事啊?
    小楼FAN2019-10-22 17:26 回复