前往顾页

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

时候:2015-11-21 19:33来源:知行网www.zhixing123.cn 编辑:麦田守望者

静态面板是在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)

顶一下
(5)
100%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):Axure Axure静态面板
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣