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
- 閱讀 ( 732 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章