Axure：APP圖片動態切換場景

16 評論 11079 瀏覽 71 收藏 5 分鐘

本文主要介紹了APP中圖片動態切換的運用，一起來看看~

效果圖：

操作分析

  1. 鼠標向左/向右滑動，圖片動態切換至下一張/上一張，且當前圖片尺寸變大，清晰度由透明變不透明。
  2. 圖片上面人物簡介以上滑的形式切換。

關鍵要素

動態面板

準備階段

1、首先拖入一個矩形，設置其寬高為375*667，取消邊框，設置陰影（偏移x:0，y:0，模糊：20，顏色：默認灰色）作為APP背景。

2、然后拖入下圖所示的元件至指定位置，這里就不做詳細的介紹。（icon可到iconfont-阿里巴巴矢量圖標圖中去下載）

3、拖動兩個動態面板，放置在在下圖所示的位置。分別取名：人物簡介（上），人物圖片（下）。

4、在人物簡介動態面板中設置3個state，內容分別如下所示：

state 1

state 2

state 3

5、在人物圖片動態面板中拖入一個動態面板，取名為拖動，設置其寬高為727*332，位置為：x=-178,y=0。

6、在拖動動態面板中放置三張圖片，如下圖所示：（中間圖片尺寸：241*332，不透明度：100%，其余圖片尺寸：220*303，不透明度70%）

7、以上設置完畢后，效果如下圖所示：

交互設置

回到index頁面，選中人物圖片動態面板，設置如下所示交互：

拖動時：

向左拖動結束時：

向右拖動結束時：

交互設置完畢，預覽就ok了~

 

本文由 @?lily_wan 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
大力
5篇作品 57660總閱讀量
04-106567 瀏覽
iOS、安卓交互設計對比分析
05-304402 瀏覽
天涯倒在2023年
03-146775 瀏覽
抖音短劇，終于摸準了付費的脈？
10-311319 瀏覽
超5億人“上頭”，“抖快號”和“愛優騰”再戰微短劇
07-216478 瀏覽
大廠趕超ChatGPT
評論
評論請登錄

  1. 大大，能給三張圖片排序不？

    來自廣東 回復

  2. 鏈接：https://pan.baidu.com/s/1EBBhDW5gAbZjx2eOpquBEA
    提取碼：7hqw
    rp源文件地址，就不一一回復了~

    來自廣東 回復

  3. 可以解釋一下拖動邊界left>=【a.width-b.width】,left=<0嗎？.不太理解

    來自河北 回復

  4. 921526563qq@.com 求源文件 自己做了一遍 有點模糊 謝謝

    來自浙江 回復

  5. 按照你做的，我沒有實現功能，能否發個源文件，謝謝249476157@qq.com

    來自上海 回復

  6. 能否分享下源文件，謝謝！249476157@qq.com謝謝

    來自上海 回復

  7. 求文件~~~603873740@qq.com 有點琢磨不明白呢

    來自天津 回復

  8. 謝謝 學習到了~ 能否分享一下模版文件 想再理一下思路 有的地方比較混亂做不成功- – 18310987398@163.com 謝謝~

    來自河南 回復

  9. 765627710@qq.com求個rp文件，我的有點問題

    來自廣東 回復

    1. 發了喲~

      來自廣東 回復

  10. 拖動動態面板會多出來，這個怎么處理啊 ??

    來自上海 回復

    1. ？？？

      來自廣東 回復

  11. 很想學習下，能否分享下rp文件呢？

    來自北京 回復

    1. 郵箱~

      來自廣東 回復

  12. 感謝分享，去試試先

    回復