Axure怎么制作模拟地图放大效果?
我要评论使用"百度地图"时，会使用到放大缩小功能，并能拖动地图浏览，既然前些天有介绍过图片“放大”预览的功能，利用其实现方式，今天我们就来看看使用Axure来模拟做下“地图”控件的教程，请看下文详细介绍。
1、新建一张图，命名为pic，尺寸为600*375；（建议可导入一张高清大图，缩小尺寸后，使用）
2、点中此”图片：pic“，鼠标右键，选择“转换为动态面板”
3、命名为此动态面板为“display”，并勾选为“自动调整为内容尺寸”；
4、再次点中“动态面板：display”，鼠标右键，选择“转换为动态面板”，并命名新的动态面板为“area”；
5、新建3个矩形，分别命名为1X，2X，3X，尺寸为60*30；设置其填充色：#00FF00，不透明度：20%；设置矩形内容分别为1:1，1:2，1:3,布局如下图所示：
6、到这里，基本布局就结束了，以下是图片放大的动态交互~
7、“矩形：1X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为600*375
其中，宽为600，高位375；锚点：中心；动画：无
8、“矩形：2X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为1200*750其中，宽为1200，高位750；锚点：中心；动画：无
9、“矩形：3X”的“鼠标点击时”的动作：
设置“图片：pic”尺寸为1800*1125，其中，宽为1800，高位1125；锚点：中心；动画：无
10、另还需要设置“动态面板：display”的“拖动时”的交互动作.主要是要限定拖动时的界限；
11、移动“动态面板：display”
12、其中，设置移动：拖动；动画：无
13、设置“图片：pic”为局部变量LVAR1；设置“动态面板：area”为局部变量LVAR2；所以界限为：
底部小于等于[[LVAR1.height]]；
右侧小于等于[[LVAR1.width]]；
顶部大于等于[[(LVAR2.height-LVAR1.height)/2]]；
左侧大于等于[[(LVAR2.width-LVAR1.width)/2]]；
14、ok~，简单设置好后，效果就出来了，是不是超级简单~哈哈
15、但是，看官别急！多操作几次后，就会发现，当缩小图片时图片不见了。
以上就是Axure模拟地图放大效果的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
相关文章
Axure怎么设计点赞的百分比进度条？网页中经常有点赞投票的，想要显示点赞投票的数据百分比进度条，该怎么设计恩？下面我们就来看看详细的教程，需要的朋友可以参考下2018-08-16
Axure怎么制作百分比的进度条动画？Axure中想要制作百分比的进度条，该怎么制作进度条并添加动画效果恩？下面我们就来看看详细的教程，需要的朋友可以参考下2018-08-15
axure简单的流程图怎么绘制？axure设计网页原型很方便，想要设计流程图该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-27
Axure怎么设计网页强密码验证效果？现在网页的密码越来越复杂，想要制作一个密码验证，该怎么制作这个网页圆形呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-17
axure怎么设计QQ登录界面交互效果？axure中设计网页原型很简单，该怎么设计qq登陆的页面呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-17
Axure网页怎么添加树状控件？Axure中想要直走树状的折叠菜单，该怎么制作呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下2018-07-06
Axure怎么创建母版和使用？Axure中母版是经常会用的，该怎么创建母版呢？下面我们就来看看axure创建母版的教程，需要的朋友可以参考下2018-07-04
Axure怎么制作控件随鼠标移动的效果？Axure中创建的方框和热区想要制作跟随鼠标移动的效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-04
axure下拉框光标闪动效果怎么制作？很多网页下拉输入框中光标都是闪烁的，等待输入的效果，该怎么制作这个效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-06-28
Axure RP怎么制作弹出菜单的效果？Axure中制作网页原型很简单，想要制作一个弹出式的菜单，该怎么弄制作这个效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-06-26
最新评论