实现图片缩放和进度条加载效果

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

　　案例一：图片缩放效果

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

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

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

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

　　具体实现步骤如下：(图163)

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

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

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

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

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

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

　　案例二：进度自动加载

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

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

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

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。