Axure：APP圖片動態(tài)切換場景

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

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

效果圖：

操作分析

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

關(guān)鍵要素

動態(tài)面板

準(zhǔn)備階段

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

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

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

4、在人物簡介動態(tài)面板中設(shè)置3個state，內(nèi)容分別如下所示：

state 1

state 2

state 3

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

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

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

交互設(shè)置

回到index頁面，選中人物圖片動態(tài)面板，設(shè)置如下所示交互：

拖動時：

向左拖動結(jié)束時：

向右拖動結(jié)束時：

交互設(shè)置完畢，預(yù)覽就ok了~

 

本文由 @?lily_wan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
大力
5篇作品 58754總閱讀量
10-194180 瀏覽
門店庫存出庫邏輯詳解
03-156044 瀏覽
個性化推薦算法：提高客戶轉(zhuǎn)化率的有效工具
05-0132497 瀏覽
電商平臺：商品營銷之坑位管理
12-113581 瀏覽
XR教育中的觸覺反饋技術(shù)實現(xiàn)
03-164600 瀏覽
Axure高保真教程：段落文字搜索（高亮搜索）
評論
評論請登錄

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

    來自廣東 回復(fù)

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

    來自廣東 回復(fù)

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

    來自河北 回復(fù)

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

    來自浙江 回復(fù)

  5. 按照你做的，我沒有實現(xiàn)功能，能否發(fā)個源文件，謝謝249476157@qq.com

    來自上海 回復(fù)

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

    來自上海 回復(fù)

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

    來自天津 回復(fù)

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

    來自河南 回復(fù)

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

    來自廣東 回復(fù)

    1. 發(fā)了喲~

      來自廣東 回復(fù)

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

    來自上海 回復(fù)

    1. ？？？

      來自廣東 回復(fù)

  11. 很想學(xué)習(xí)下，能否分享下rp文件呢？

    來自北京 回復(fù)

    1. 郵箱~

      來自廣東 回復(fù)

  12. 感謝分享，去試試先

    回復(fù)