Axure9 卷簾對比效果

2 評論 1217 瀏覽 1 收藏 4 分鐘

今天同事問我卷簾對比效果原型怎么畫,我就認真研究了一下,分享給大家~

首先我們要兩張大小一致的圖片,疊放在一起,上面的圖片轉化為動態面板(這里我將該動態面板命名為”上層圖“,后文中的上層圖都是指該動態面板),我們設置的原理就是:通過拖動改變動態面板顯示區域的大小從而實現卷簾對比的效果;

初始狀態是兩張圖各占一半,那我們就把上層動態面板的大小調整為一半(注意:是調整動態面板的大小不是上層圖片的大小);

我們需要設置一個拖拽桿,選擇【水平線】拖拽到兩張圖分界處,長度調整和圖片一致,為了更加明顯,我調整了線段顏色和寬度;

因為動態面板才能設置拖動效果,所以我們將上層圖和線段組合成動態面板;

選擇我們剛剛組合的動態面板,設置交互效果:

1)拖動時–移動–水平線–跟隨垂直移動讓我們的拖動桿實現垂直拖動);

(2)設置尺寸–上層圖(動態面板)–設置高度和錨點(設置高度為拖動桿的y軸值,具體設置操作看圖);

最后不要忘了把我們剛剛組合的動態面板設置為【自適應內容】;

這樣就完成所有操作了,大家可以試一試~

本文由 @六元 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到了!想問最后一步“動態面板設置為【自適應內容】”是什么意思呢

    來自山西 回復
    1. 因為橫線拉桿是在動態面板里面的,如果不設置【自適應內容】就沒辦法實現上下移動拉桿的效果了

      來自安徽 回復