Axure设计:模拟地图放大效果

 时间:2024-11-04 10:21:49

1、新建一张图,命名为pic,尺寸为600*375;(建议可导入一张高清大图,缩小尺寸后,使用)

Axure设计:模拟地图放大效果

2、点中此”图片:pic“,鼠标右键,选择“转换为动态面板”

Axure设计:模拟地图放大效果

3、命名为此动态面板为“display”,并勾选为“自动调整为内容尺寸”;

Axure设计:模拟地图放大效果

4、再次点中“动态面板:display”,鼠标右键,选择“转换为动态面板”,并命名新的动态面板为“area”;

5、新建3个矩形,分别命名为1X,2X,3X,尺寸为60*30;设置其填充色:#00FF00,不透明度:20%;设置矩形内容分别为1:1,1:2,1:3布局如下图所示:

Axure设计:模拟地图放大效果

6、到这里,基本布局就结束了,以下是图片放大的动态交互~

7、“矩形:1X”的“鼠标点击时”的动作:---设置“图片:pic”尺寸为600*375---其中,宽为600,高位375;锚点:中心;动画:无

Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果

8、“矩形:2X”的“鼠标点击时”的动作:---设置“图片:pic”尺寸为1200*750---其中,宽为1200,高位750;锚点:中心;动画:无

Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果

9、“矩形:3X”的“鼠标点击张虢咆噘时”的动作:---设置“图片:pic”尺寸为1800*1125---其中,宽为1800,高位1125;锚点:中心;动画:无

Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果

10、另还需要设置“动态面板:display”的“拖动时”的交互动作~主要是要限定拖动时的界限;

Axure设计:模拟地图放大效果

11、---移动“动态面板:display”---

Axure设计:模拟地图放大效果

12、其中,设置移动:拖动;动画:无

13、设置“图片:pic”为局部变量雉搽妤粲LVAR1;设置“动态面板:area”为局部变量LVAR2;所以界限为:底部小于等于[[LVAR1.height]];右侧小于等于[[LVAR1.width]];顶部大于等于[[(LVAR2.height-LVAR1.height)/2]];左侧大于等于[[(LVAR2.width-LVAR1.width)/2]];

Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果
Axure设计:模拟地图放大效果

14、ok~,简单设置好后,效果就出来了~是不是超级简单~哈哈

Axure设计:模拟地图放大效果

15、但是,看官别急!多操作几次后,就会发现,当缩小图片时,矣~图片不见了?所以,下一篇,我们要把消失的图片找回来!敬请期待~

16、觉得不错的话,请投个票,加个赞哦~

  • ppt2013中图片长宽不能同比例变化变形了
  • 如何在Excel中使用选择窗口
  • 如何使用outlook日历功能设置每周一次的会议?
  • 制作PPT常用的辅助软件有哪些
  • 怎么批量提取PPT文件名
  • 热门搜索
    六一儿童节的手抄报 二年级手抄报 劳动手抄报 中秋节的手抄报 保护眼睛手抄报 爱国手抄报简单又漂亮 关于交通安全的手抄报 读书手抄报图片 六一儿童节手抄报画 创建文明城市手抄报