Axure动态面板：实现图片缩放和进度条加载效果

动态面板是在Axure中唯一一个能够调整尺寸的元件。结合动态面板的状态样式，我们可以实现图片缩放以及简单的进度条加载效果。

案例一：图片缩放效果

这个案例效果为鼠标移入图片时，图片按中心点放大；鼠标移出时，图片缩小为原尺寸。放大缩小有动态的效果。

首先，要完成这个效果我们需要先放入动态面板，命名为“zoomimage”，然后设置其背景图片，然后设置【重复】为“填充”或“适应”。这样能够保证动态面板改变尺寸大小时，背景图片能够跟随改变尺寸大小。（图161）



（图161）

然后，我们来分析一下在图片缩放的原理。图片（动态面板背景）放大前尺寸为200*200，放大后尺寸为300*300，因为是中心点缩放，放大前与放大后位置相对移动了x50、y50。（图162）



（图162）

根据分析，我们得出，除了要对动态面板进行放大缩小，还需要在放大缩小的同时移动动态面板到指定的位置上。但是，动态面板同时缩放与移动的时候，动画效果会互相影响，所以，如果需要有动态效果，就要把移动和缩放分开进行。解决这个问题的办法，就是在动态面板的外面再添加一个动态面板。外层动态面板负责移动，内层动态面板负责改变图片背景的尺寸。

具体实现步骤如下：（图163）

1、在之前做好的动态面板“zoomimage”上点击鼠标右键，选择“转为动态面板”完成嵌套，为新的外层面板命名为“moveimage”，然后再次点击鼠标右键设置外层动态面板“自动调整为内容尺寸”；

2、为外层动态面板“moveimage”添加【鼠标移入时】事件的用例动作为【移动】动态面板“moveimage”【到绝对位置】【x】“50”【y】“50”，并为其设置【动画】【线性】“500”毫秒。（图163）



（图163）

3、继续为上一步中的用例添加动作为【设置面板尺寸】动态面板“zoomimage”【宽】“300”【高】“300”，【动画】同样设置为【线性】“500”毫秒（图164）



（图164）

通过以上步骤，就完成了鼠标移入图片时中心点放大的效果。

参照图片放大这个原理，我们继续完成鼠标移出图片时按中心点缩小为原来尺寸的效果。我们设置【鼠标移出时】【移动】动态面板“moveimage”【到绝对位置】【x】“100”【y】“100”，同时【设置面板尺寸】动态面板“zoomimage”【宽】“200”，【高】“200”。不要忘记，以上两个动作都要添加【动画】【线性】“500”毫秒。图（165）



图（165）

备注：动态面板的【鼠标移入时】和【鼠标移出时】事件，一般都没有直接显示在列表中，而是要在【更多事件】中选择。

案例二：进度自动加载

相对于上个案例，这个案例更加简单。实现过程为：

1、放入一个矩形作为进度条外框，尺寸为500*5；然后，放入一个动态面板，为其设置状态样式的背景颜色为红色，并调整这个动态面板的高度为5，左侧与矩形边框对齐。（图166）



（图166）

2、点中动态面板，为其添加触发事件【载入时】的用例动作。先设置动作【设置面板尺寸】“当前元件”为【宽】“1“【高】“5”，让动态面板载入时进度条变为最小的状态。然后，设置动作【设置面板尺寸】“当前元件”为【宽】“500“【高】“5”，并设置【动画】为【线性】“3000“毫秒，这样就会有一个3秒钟从最小宽度到最大宽度的一个匀速增长的进度条效果。（图167）