返回首页

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

时间:2015-11-21 19:33来源:betway必威官网www.etsupport.net 编辑:麦田守望者

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

案例一:图片缩放效果

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

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

161

(图161)

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

162

(图162)

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

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

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

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

163

(图163)

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

164

(图164)

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

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

165

图(165)

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

案例二:进度自动加载

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

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

166

(图166)

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

167

(图167)

顶一下
(4)
100%
踩一下
(0)
0%
标签(Tag):Axure Axure动态面板
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片