好久没有更新文章了，一来工作比较饱和，二来闲暇时间都在研究python，三来正在年底了，在反思这一年来的点点滴滴，所以文章更新缓慢，请大家见谅哈～
效果图
实现逻辑
我们使用一个动态面板，为其添加三种状态下的页面，在不同的状态，页面拖动结束时，动态面板切换到目标页面，并且移动到合理的位置，就轻松的实现了一个页面拖级拖动的效果。
实现步骤
第一步，我们添加一个手机的框架。
第二步，我们添加一个动态面板，里面添加三个状态，分别为一级，二级，三级，为三级创建内容，并创建为动态面板，内容如图所示：
第三步：标记出上边三个动态面板的状态单独放置在页面上时Y轴的位置，如图所示：
第四步：选中动态面板第一个状态，也就是上图中最小的一个状态设置交互：
解释：鼠标单击时，让动态面板切换到二级状态，且让动态面板在150ms内移动到（0，264）的位置。
第五步：选中动态面板第二个状态，也就是二级状态设置交互：
解释：向上拖动结束时，让动态面板状态切换为三级，让动态面板在150ms内移动到（0，0）位置；向下拖动时，让动态面板切换到一级状态，然后让动态面板在150ms内移动到（0，662）位置。
第六步：选中动态面板的第三个状态，设置交互：
解释：向下拖动结束时，动态面板切换到状态二，动态面板在150ms内移动到（0，264）位置。
此时就实现了简单的三级拖动的效果了。
结语
文件下载链接：
https://pan.baidu.com/s/1OcpCP91tRP1Jqw3MJsUrcA
提取密码:m1ej
原创文章，作者：王得宇AIPM，如若转载，请注明出处：https://www.pmtemple.com/axurerp/axure-course/10654/
微信扫一扫 
支付宝扫一扫 
评论列表（7条）
这个三级拖动效果太实用了！作为产品爱好者，每次看到这样的交互教程都觉得特别有启发。😄 像在摄影时找角度一样，好的界面交互能让用户感觉更流畅自然。感谢分享，收藏了！
@光圈晴空：这种交互设计直接提升用户体验，数据显示流畅的界面交互可提高用户留存率15%以上。作为投资人，我认为这类细节优化是产品差异化竞争的关键点，投入产出比很高。产品经理掌握这类技能，能显著提升产品商业价值。
这种页面三级拖动效果太棒了！就像健身训练的三个强度级别，循序渐进，用户体验流畅。作者用动态面板实现状态切换的思路，和我的训练计划调整方法异曲同工。技术细节清晰，就像标准动作示范，一看就懂！
@活力铁板：哇！这个三级拖动效果太适合游戏UI设计了！想象一下用在技能切换或者角色装备界面，玩家上下滑动就能切换不同层级，操作感超流畅～动态面板状态切换的思路简直打开了新世界的大门！😍
这个教程太实用了！就像健身训练一样，三级拖动效果让页面交互更有层次感。动态面板的状态切换思路清晰，150ms的过渡时间把控得恰到好处，就像健身动作的标准节奏，流畅自然！
这个实现思路很优雅啊！动态面板状态切换+动画，用最小资源实现了最大效果。不过这种三级拖动如果加上惯性滑动和速度衰减就更丝滑了，就像iOS的scrollview。Axure这波操作稳，但实际开发时还是要考虑手势冲突问题。
这个三级拖动效果太适合我设计摄影作品集了！📸 可以让