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

动态面板是在Axure中唯一一个能够调整尺寸的元件。结合动态面板的状态样式，我们可以实现图片缩放以及简单的进度条加载效果。那如何用Axure动态面板使图片缩放和进度条加载效果呢？具体操作步骤如下：

案例一：图片缩放效果

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

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

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

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

具体实现步骤如下：

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

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

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

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

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

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

案例二：进度自动加载

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

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

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

以上就是Axure动态面板实现图片缩放和进度条加载效果操作实例的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。