最近用Axure做高保真原型时接到一个图片轮盘式的交互需求。乍一听以为是普通的轮播图等到真正动手才发现这玩意儿和传统平移式轮播完全是两码事图片不是左右滑动而是像转盘一样围绕一个圆心旋转切换当前项在最前面放大显示两侧的卡片斜向排开视觉冲击力比普通banner强很多非常适合官网首屏、活动专题页、产品卖点展示这类场景。折腾了两天踩了不少坑今天把实现思路和完整步骤整理出来给同样被这个需求卡住的同学一个可以直接抄作业的参考。老实说Axure里做图片轮盘式原型没见过几个能一次做成的。核心原因不是操作复杂而是Axure的旋转交互和你脑子里想的旋转不是一回事。这篇文章会从需求拆解、原理分析、实操步骤到常见问题完整过一遍无论你之前有没有做过轮播按照这个思路走都能搭起来。1. 项目拆解轮盘式和普通轮播图到底差在哪1.1 交互形态的本质区别普通轮播图大家都很熟悉一组图片横向排列通过左右切换按钮或者自动播放让图片在可视区域内左右滑动每次只显示一张切换时是平行移动的效果。图片轮盘式完全不同。它要模拟的是一个物理转盘的效果若干张图片围绕中心点排列每次切换时整个组绕圆心旋转一定角度下一张转到正前方原本在正前方的图片转到侧面。真实产品里用户看到的往往是中间一张大图、两边各露出半张或一小条预览点右侧按钮时所有图片顺时针旋转点左侧按钮时逆时针旋转。这个交互形态的难点在于普通轮播只需要管理当前显示哪张图轮盘式需要管理的是每一张图片当前位于什么角度并且每次切换后所有图片的角度都要重新计算。这直接决定了实现方案和普通轮播完全不同。1.2 为什么非要用Axure做高保真原型有人会说这种效果直接写前端或者用现成插件不就行了吗原型阶段用Axure做核心诉求是验证交互逻辑和视觉表现不需要跑真实代码。轮盘式的关键交互点在于切换节奏、旋转方向、当前项的强调形式、侧边卡片的露出比例这些在高保真原型里能完整模拟业务方和开发人员一眼就能看懂产品意图。Axure的优势在于它是可视化的交互搭建工具不需要写CSS透视、transform这类前端属性。缺点是Angular、Vue这些框架里的复杂动画能力在Axure里要打折尤其是旋转这个动作用的好是神器用不好就是噩梦。这个后面会重点讲。2. 核心原理先搞懂Axure的旋转机制再动手2.1 旋转角度计算与圆心基准要实现图片轮盘式先得把一个关键概念搞明白Axure中旋转动作是围绕元件自身的中心点进行旋转还是可以指定圆心Axure RP 9和RP 10中选中一个元件在交互面板里选择旋转默认是让元件绕自身中心旋转。如果你想让多张卡片绕一个共同的圆心旋转简单的做法不是给每张卡片单独设旋转角度而是把这些卡片装进一个转台动态面板然后让整个转台绕自身中心旋转。但这里有个坑转台的中心和视觉上轮盘的中心要想办法重叠。如果转台面板本身是正方形中心好算如果转台是长方形的旋转中心就会偏移看起来就不像轮盘了。我最终采用的方案是所有卡片放在一个正方形动态面板转台中转台内卡片的具体位置用绝对坐标摆放成放射状转台旋转时所有卡片以转台中心为圆心同步旋转。这样只需要控制转台一个元件的旋转角度就能实现整组切换卡片数量再多也不需要逐个控制。2.2 角度驱动与循环逻辑的数学关系现在进入最关键的逻辑部分。假设轮盘上一共有6张图片编号0到5均匀分布在圆周上每张图片之间的夹角是60度。初始状态下图片0位于正前方0度基准图片1位于60度方向图片2位于120度方向以此类推。点击下一张时我希望图片1转到正前方也就是整个轮盘需要逆时针旋转60度点击上一张时轮盘需要顺时针旋转60度。这个很好理解。但问题在于循环。转到图片5之后再点击下一张应该回到图片0而不是继续往6、7走。用数学公式表示就是目标角度 当前索引 × (-60) 的循环模360。在代码里这是一个简单的取模运算可在Axure里没有取模函数旋转动作又不支持填写动态表达式所以只能把所有可能的角度分支列出来。6张图片对应6个状态每个状态都对应一个转台的旋转角度。我需要几个按钮、几个case把这些状态都覆盖到。这个穷举状态的思路是Axure做轮盘式的核心理解了这点后面不管多少张图都只是多列几个case的问题。3. 直接能抄的实操方案Axure图片轮盘式完整搭建步骤3.1 元件准备与初始状态摆放先说准备工作。以Axure RP 9为例新建页面后建议页面尺寸设为1440×900轮盘展示区域放在中央偏上位置。准备6张图片尺寸建议统一为480×270也就是16:9的横图3:2的也行但所有图片必须裁剪成同样尺寸否则旋转到侧面时视觉上会非常乱。操作步骤如下在页面中拖入一个动态面板命名为wheel宽高都设为800×800这个面板就是转台。动态面板初始状态下放一个空矩形占位即可后续把6张卡片都塞进这个面板里。打开wheel动态面板的State1在里面拖入6个动态面板分别命名为card_0、card_1、card_2、card_3、card_4、card_5。为什么每张卡片要用独立的动态面板包一层因为如果直接在转台里放6个矩形或6张图片后续如果想给卡片单独加选中态、悬停态或点击跳转就得逐个组建交互用动态面板统一包一层管理成本低得多。计算6张卡片的初始坐标。转台中心在面板的400400坐标处设旋转半径R为280px每张卡片的中心点坐标用公式x 400 R×cos(角度角的弧度)y 400 R×sin(角度角的弧度)。以图片0在正上方为例它坐标为400400-R图片1与图片0夹角60度坐标用三角公式算出后减去卡片自身宽度的一半。这里有个经验之谈不要试图在Axure里手动用公式计算坐标直接在外部用计算器或者Excel算好再把数字一个个填进去。6张卡片算起来很快但如果卡片数量超过8张建议先用纸笔画一下坐标分布避免排布重叠。3.2 旋转case的搭建与循环判断转台和卡片放好后接下来做切换按钮。在页面上放置两个按钮一个命名为btn_next下一张一个命名为btn_prev上一张并添加一个名称为curIndex的全局变量初始值为0表示当前位于正前方的卡片编号。选中btn_next添加单击时交互用例按以下逻辑配置用例1条件设置为curIndex为0。动作旋转wheel动态面板角度设为-60度负数表示逆时针旋转动画线性时间500ms然后设置变量curIndex为1。用例2条件设置为curIndex为1。动作旋转wheel角度-120度动画线性时间500ms设置curIndex为2。用例3条件为curIndex为2。角度-180度curIndex变为3。用例4条件为curIndex为3。角度-240度curIndex变为4。用例5条件为curIndex为4。角度-300度curIndex变为5。用例6条件为curIndex为5。角度-360度curIndex变为0。这里要注意一个细节每次旋转的角度是绝对值而不是增量值。也就是说如果当前curIndex是2轮盘直接旋转-180度而不是在现有角度上再旋转-60度。Axure的旋转动作没有相对上次角度再旋转的选项要么用绝对角度要么每次重置角度到0再叠加。实操下来直接用绝对角度最不容易乱。上一张按钮的逻辑与此对称只是旋转正数角度curIndex为1时角度60度curIndex为2时120度以此类推curIndex为0时则旋转360度回到最后一张。我这样写的第一个版本切换是成功了但有个很丑的问题当curIndex从4转到5时转台直接一下子旋转-300度也就是几乎整整转了一圈动画看起来非常漫长。原因在于绝对角度的累积差上一轮已经转到-300度这次要到-360度只差60度这个是对的但从初始状态0直接到-360度其实和直接旋转0度没有视觉差别但因为数值从0变成了-360动画会反向旋转一整圈。解决这个问题有两个办法。第一个是在每个case里先让转台旋转到0度且不带动画再立刻旋转到目标角度这样每次动画都只转60度观感恢复正常。第二个是接受整圈旋转的动画如果切换次数不多也还能忍。我后来采用第一个方案把每case拆成两个旋转动作第一个旋转设置动画为无第二个旋转设置动画为500ms出来的效果干净利落。3.3 自动播放、悬停暂停与点击卡片的完整接入纯手动点击切换只是及格水平产品经理拿过去一看多半会问一句能自动播放吗鼠标放上去能停吗所以把自动播放逻辑也做进去。自动播放的实现思路是用Axure的等待事件配合循环触发在页面空白处添加一个页面加载时交互用例等待3000ms然后触发btn_next的单击事件然后再等待3000ms再触发btn_next无限循环。这里有个细节Axure的等待和触发事件写在同一个用例里确实能实现循环但这会导致鼠标悬停暂停不好做。我采用的方案是加一个全局变量autoPlay默认值为true。在页面加载时的循环里每一轮等待结束后判断一下autoPlay的值如果为false就只等待不触发切换。鼠标悬停暂停的做法是选中整个轮盘区域wheel动态面板添加鼠标移入时交互用例设置autoPlay为false添加鼠标移出时交互用例设置autoPlay为true。点击卡片跳转则是把wheel里的每个卡片动态面板都加一个单击时用例根据需要设置跳转外部链接或切换到指定页面状态。这个属于业务功能按实际需求配置即可。4. 踩坑实录与排查清单4.1 旋转中心跑偏、角度复位的经典问题第一坑转台旋转时卡片不是绕整个轮盘中心转而是绕着转台面板自己的中心转。如果转台面板是正方形且尺寸不包含全部卡片视觉上就歪了。解决方法是把转台面板的尺寸设得足够大确保所有卡片都在面板范围内并且卡片的排列以面板中心为圆心。面板中心就是轮盘中心这个前后关系一定要一致。第二坑第一版做完后点击下一页发现图片切换方向反了。这是因为Axure的旋转正负方向和视觉判断容易搞混。Axure中正角度是顺时针旋转负角度是逆时针旋转。如果点击下一张时想让下一张从右侧进入中心具体是正还是负取决于你的卡片初始排布方向。我建议先在纸上画一个简单示意图标出正前方、图片0位置、点击后目标位置再换算角度方向不要靠感觉硬试。第三坑每次自动播放时轮盘会来回抖动。原因是prev和next逻辑里我最初用了增量角度叠加几次后数值越滚越大某次绝对角度和实际位置对不上就出现了抖动。统一改成绝对角度后问题消失。这个坑非常推荐各位重点避让。4.2 动效细节与体验优化补充轮盘式的视觉效果很大程度取决于动画曲线。Axure默认线性动画太生硬轮盘要表现得自然建议在旋转交互的动画选项里改成缓入缓出easeOut或者easeInOut时间设置在500ms到800ms之间。太快像抽搐太慢像卡顿500到700ms是多数人比较舒服的区间。还有一个小细节如果转台里卡片数量多旋转时离中心最远的卡片边缘会超出转台面板的边界出现被裁切的视觉问题。解决办法是把转台面板尺寸再次调大或者把超出的部分用置于底层的大矩形遮挡住。很多做高保真的同学在这里反复调半天其实直接放大转台面板是最省事的方式。性能方面如果卡片图片非常大比如1920原图旋转动画会掉帧。建议在原型里先统一压缩图片体积控制在200KB以内否则演示时在电脑上还好拿到会议室用普通笔记本演示就会明显卡顿。4.3 扩展玩法支持任意数量的卡片这套方案的case数量与卡片数量绑定6张图就要写6个case分支。如果产品方随时可能加图更推荐用中继器来管理图片和角度。具体思路是把图片数据放在中继器里中继器每行生成一个卡片动态面板用项目加载时的交互根据索引设置卡片的位置和初始旋转角度。切换时同样通过变量curIndex的绝对值映射到目标角度。中继器方案的优点是后续增删图片只需要改数据集不需要动交互逻辑缺点是配置复杂度高如果对Axure不熟悉反而容易卡住。我的建议是如果只是单个活动页演示用case穷举方案完全够用改起来心里有底如果是要做一套通用组件反复用再考虑中继器方案。做这个原型的时候还有个小发现不要试图把拖拽转动轮盘做到Axure原型里Axure对拖拽旋转的支持非常弱要么用拖动事件模拟但手感很差要么就得绕很远的逻辑去做。业务方要验证拖拽效果直接建议他们看开发出来的前端Demo更靠谱原型阶段用按钮和自动播放把交互逻辑讲清楚就够了。根据我个人经验图片轮盘式原型的复杂度不在做出来而在调好看。逻辑清楚了顶多半天搭建完剩下的时间都花在角度方向、动画曲线、卡片露出比例这些视觉细节上。动手之前先把圆心、初始朝向、正负角度这三件事在纸上理清楚基本就成功了一半。如果你正被这个需求卡着照着上面的步骤走一遍有问题可以在评论区把现象发出来我看到会逐一回复。