上午的时候，在一个群里看到这样的实现需求。
伸伸缩缩，感觉很爽的样子。
那么，这样的一个交互效果如何实现呢？
详细的教程我就不写了，直接上交互截图和源文件就好了。
好多操作步骤是吧？
实际上，只需要在一张图片上完成这些设置，剩下不管有多少张图片都是复制粘贴而已。
这里主要说一下这些交互内容中的关键点。
首先，需要两个变量记录当前展示的图片编号，和上一个展示的图片编号，通过这两个编号值的大小决定当前展示的图片是否移动。
例如，鼠标指针从右侧滑向左侧的时候，实际上只需要前一个图片向右移动，当前展示的不需要移动位置。
所以，鼠标指针移入时，做了选中当前图片的操作，并且在【选中时】，进行了判断，如果当前图片编号（图片名称用数字编号命名，所以通过“This.name”能够获取）大于上一张图片编号（即当前图片在上一张图片右侧），此时向左移动当前图片。
同样道理，前一张展示的图片取消选中时（通过选项组名称完成取消），如果图片编号大于当前展示图片的编号（在展示图片右侧的图片），则向右移动前一张展示的图片。
但是，通过以上的交互处理，前一张展示图片和当前展示图片之外的图片还不能联动。
所以，添加了尺寸改变时的交互。
尺寸改变时的交互实际上并没有相关的操作触发，而是在每张图片鼠标移入时，通过【触发事件】的动作，让每个元件执行【尺寸改变时】的交互。
在这个交互中，每张图片都判断自己所处的位置。
位置在前一张展示图片右侧并且在当前展示图片左侧的图片全部向左移动。
例如上一张展示图片是2号，当前展示图片是6号，此时3、4、5号图片都应该左移。
位置在前一张展示图片左侧并且在当前展示图片右侧的图片全部向右移动。
例如上一张展示图片是5号，当前展示图片是1号，此时2、3、4号图片都应该右移。
以上就是这个交互效果实现的整体思路。
源文件下载：
原创文章，作者：研究院精选，如若转载，请注明出处：https://www.pmtemple.com/axurerp/axure-course/2854/
微信扫一扫 
支付宝扫一扫 
评论列表（6条）
这种交互效果确实流畅自然，变量控制图片编号的思路很巧妙。不过在实际项目中，建议考虑添加缓动效果，让移动更平滑。极简设计往往需要背后复杂的逻辑支撑。
这交互逻辑简直像极了React的状态管理，用两个变量控制图片流向，中间件联动思路太优雅了！不过这种方案在大数据量时性能可能有点小问题，建议用requestAnimationFrame优化下动画帧率。😎
这交互效果简直像是时尚品牌的动态橱窗展示！左右滑动的流畅感就像模特走秀时的转身，变量控制图片移动的方式太有创意了，完全可以应用到我们品牌的产品展示页面上。
这种交互效果太有设计感了！就像时尚展示中的动态陈列，每个元素的移动都恰到好处。变量控制思路很聪明，不仅解决了图片联动问题，还创造了流畅的用户体验。作为品牌主理人，这种动态展示绝对能提升产品的档次感！
这种交互效果用在时尚产品展示上简直绝了！模特穿搭的360°展示或者搭配方案的切换，这种流畅的动画效果会让用户体验感飙升。Axure做出来的原型可以直接给客户演示，比PPT更直观，比真实开发更省钱，对我们做品牌展示来说太实用了！
@云游漫游者：这种交互效果用在时尚产品展示上简直绝了！模特穿搭的360°展示或者搭配方案的切换，这种流畅的动画效果会让用户体验感飙升。Axure做出来的原型可以直接给客户演示，比PPT更直观，比真实开发更省钱，对我们做品牌展示来说太实用了！