Axure设计：优化“图片局部放大”
上一篇，介绍了，利用拖动体例，预览图片局部细节~具体可参考以下链接；
今天，优化下此结果表示体例，即当鼠标移动到图片上时，展示放年夜的图片细节，具体结果如下图所示~
0设计简单的图片细节局部放年夜
东西/原料
- Axure RP 8
方式/步调
- 1
上一篇，介绍图片局部放年夜，利用了拖动体例，和本篇优化稍有收支~
0设计简单的图片细节局部放年夜
- 2
新建一图片，导入喜好的图，定名为pic，尺寸为400*250；
（图片尺寸可自界说，展示受限百度限制）
- 3
新建一”矩形“，定名为board，尺寸为200*125；
并设心猿意马填充颜色为#00FF00，不透明：20%；
设置为“埋没”；
置于”图片：pic”上方；
如下图所示：
- 4
选择“矩形：board”，“图片：pic”，组合，定名为area
- 5
另新建一“动态面板”，定名为display，尺寸为400*250；
插入一张新图，定名为bigpic，尺寸为800*500；
设置“动态面板：display“为”埋没“；
- 6
结构如下图所示：
- 7
以下别离设置”组合：area“的”鼠标移动时“和”鼠标移出时“的交互的动作~
- 8
先是简单的”鼠标移出时“的交互动作：
---
埋没”动态面板：display“；
埋没”矩形：board“；
---
- 9
”鼠标移动时“的交互动作：
- 10
动作1:
---
显示”动态面板：display“；
显示”矩形：board“；
---
- 11
动作2：
---
1.移动”矩形：board“；
2.设置移动的边界；
---
- 12
此中，移动设置为“达到”；
- 13
设置X值为[[Cursor.x-Target.width/2]]，Y值为[[Cursor.y-Target.height/2]]；
如下图所示：
- 14
边界以“图片：pic”上下摆布为界，并设置“图片：pic”为局部变量LVAR1；
所以，
顶部年夜于[[LVAR1.top]]；
底部小于[[LVAR1.bottom]]；
右侧小于[[LVAR1.right]]；
左侧年夜于[[LVAR1.left]]；
- 15
动作3：
---
1.移动”图形：bigpic“；
2.设置移动的边界；
---
- 16
此中，移动设置为“达到”；
- 17
设置“动态面板：board”为局部变量LVAR1，“图片：pic”为局部变量LVAR2；
所以，X值为[[(LVAR2.x-LVAR1.x)*2]]，Y值为[[(LVAR2.y-LVAR1.y)*2]]；
如下图所示：
- 18
设置“动态面板：display”为局部变量LVAR1，“图片：bigpic”为局部变量LVAR2；
所以移动的边界，
顶部年夜于[[LVAR1.height-LVAR2.height]]；
左侧年夜于[[LVAR1.width-LVAR2.width]]；
- 19
恩，别看设置交互动作不多~但也挺搞脑子的~
来看看最后的结果吧~
- 20
比拟，我更喜好下面这个结果，不知看官，能实现吗？（很简单的哦~）
- 21
感觉不错的话，请投个票，加个赞哦~
- 发表于 2018-12-06 00:00
- 阅读 ( 700 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章