1、 首先拉3个标题

2、 然后给它们ctrl+g组合一下

3、 给它向下复制7个

4、 然后给第一列标题改个顺序,方便等会看效果

5、 给它们每一个的y轴都距离30


6、 选中全部,然后转换成动态面板

7、 把自动调整为内容尺寸关了

8、 进入动态面板,再次查看自动调整为内容 尺寸是否关闭

9、查看它们的y轴是否都是加30



10、把它们全部选中,然后ctrl+g组合,给它们个组合名称:czlb1

11、给它向下复制一个,改名成czlb2

12、打开项目这里,选中全局变量

13、点击添加

14、变量名称为czlb,默认值设为0

15、再拉一个动态面板出来,给它调小

16、点击面板状态管理,再添加一个面板

17、双击载入时进去设置样式

18、点击设置面板状态,选中空白面板,选择状态为下一步,选中向后循环,选择动画为逐渐

19、双击进入状态改变时

20、选中移动,选中czlb1,给它个绝对定位,y轴设成-30,动画为缓慢进入时间为1000毫秒

21、再次选中移动,选中czlb2,选中绝对定位,y轴设置为210-30,动画设置为缓慢进入,时间为1000毫秒

22、拉一个文本标签,然后在空白面板上给它设置文本,然后点击fx,点击插入变量或函数,找到我们设置的变量值“czlb”


23、点击设置变量值,选中czlb,点击fx,依旧是在插入变量或函数里找到czlb,但是这次要在[[czlb]]里加1,如[[czlb+1]]


24、再次点击状态改变时,选择变量值、czlb、==、值、1,然后把刚刚设置的样式复制过来

25、在czlb1中y轴坐标再次-30,czlb2也是-30


26、总共复制出7个样式,然后在用例名称里依次修改为case0、case1、case2、case3……case6

27、从case0开始,czlb1的y轴为-30,czlb2的y轴为180,然后case1,czlb1的y轴为-30-30,czlb2的y轴为180-30,依此类推,效果完成。

这篇博客详细介绍了如何使用Axure RP创建动态面板,并通过设置变量和动画效果来实现内容的滚动切换。步骤包括组合标题、调整布局、设置Y轴距离、转换为动态面板、管理面板状态、设置动画以及利用全局变量控制面板状态的改变,最终达到平滑的滚动浏览体验。

被折叠的 条评论
为什么被折叠?



