AxureRP7.0从入门到精通(连载31)

Axure书籍 小楼一夜听春语 19109℃ 0评论

2.5.  缩放

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


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载31)

喜欢 (36)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(19)个小伙伴在吐槽
  1. 群里坑比管理 不分青红皂白踢人 操 祝早日黄摊子
    赵鑫祎2015-09-22 09:48 回复
    • 小楼一夜听春语
      http://files.iaxure.com/wp-content/uploads/2015/09/bb.png 这是你吧?知道为什么被踢了吧!
      小楼一夜听春语2015-09-23 09:06 回复
  2. 效果是出来了 没明白为什么是绝对位置x50 y50 而不是相对位置。。。绝对位置在axure里不是指的是绝对上面的XY坐标吗??
    无敌大元帅2015-09-29 18:58 回复
  3. 烦死了 每次我的提问回过头去找都找不到了,小楼老师你出个个人信息管理的系统啊。。提了问都不知道你有没有回答
    无敌大元帅2015-09-29 19:05 回复
  4. 您讲的先弄个动态面板,然后添加背景图片,我添加完背景图片整个页面都是背景图片,怎么回事?我已经完全学懵了
    楼哥快救我2015-10-12 17:55 回复
    • 先弄个小图片
      阿里2015-10-14 11:45 回复
    • 因为你添加的是页面背景图片, 你要双击动态面板那个元件, “面板状态”下不是有个自动命名的state1么?双击进去,再看中间下面的页面是不是“状态样式”了? 在状态样式里面设置背景就是动态面板的背景了哦。
      圆圆2015-11-03 17:49 回复
  5. 图片缩放的那个东西,鼠标进入移出反复多次后,当不把鼠标移入了会一直出现变大变小的效果
    菜鸟2015-11-12 17:52 回复
  6. 有个疑问,图片的移动坐标是以图片的左上角为中心移动的吗
    huge2015-11-13 15:26 回复
    • 我的也是以左上角进行放大或者缩小的,不知道小楼老师是否可以把原型页面页放在文章里面
      zxm_lost2015-12-25 11:02 回复
      • 一样,左上角缩放的,,,,,
        anway2015-12-30 11:24 回复
  7. 图片缩放的那个。鼠标移入移出多了图片会跟着鼠标飘走,不会回到原来的地方了 🙁
    小麦宝宝2016-03-11 17:33 回复
    • 被你发现了
      Ritchey2016-05-31 17:46 回复
  8. 为什么我一点击动态面板的调整大小以适合内容,动态面板就变的特别小,只有10*10,但导入的图片是很大的呀????求解答 急急……
    香农2016-07-12 11:25 回复
  9. Axure 8 已经在设置尺寸里添加了锚点功能,所以要实现这个效果移动和嵌套都没必要了
    亚比2016-09-27 18:50 回复
  10. 篇首第一句“动态面板是Axure里唯一能够调整尺寸的元件”这句话容易误导人,楼大大概是想表达唯一能在用例中设置尺寸的元件,这个在7里是(我没用过7,但我买的是7的书),书中图片显示用例中动态面板可添加的两个动作是设置面板状态和设置面板尺寸,元件可添加的动作没有和尺寸有关的,在8里,设置尺寸已经变成所有元件的可添加动作,所以这个效果可以直接将图片转换成动态面板然后设置尺寸时将锚点选为中心就OK了。
    亚比2016-09-27 19:19 回复
    • 小楼一夜听春语
      axure 7 只有动态面板可以改变尺寸
      小楼一夜听春语2016-09-28 11:34 回复
  11. 其实是动态面板也不需要了
    亚比2016-09-27 21:26 回复
  12. 为什么单击外层后,没有鼠标移入这个选项
    renxiaoqiang2017-03-26 00:18 回复