Axure RP 9.0 中實現上下滑動及彈回效果 前期準備為了實現更加生動有趣的交互效果,我們先在Axure RP 9.0中制作兩個簡單的頁面原型。1. 雙擊 Page1 中的"內聯(lián)框架",選擇

Axure RP 9.0 中實現上下滑動及彈回效果

前期準備

為了實現更加生動有趣的交互效果,我們先在Axure RP 9.0中制作兩個簡單的頁面原型。

1. 雙擊 Page1 中的"內聯(lián)框架",選擇 Page2,與 Page1 建立鏈接,點擊確定。

2. 進入 Page2 編輯頁面,選中需要進行滑動的內容,右鍵"轉化為動態(tài)面板",命名為"pingmu"。

3. 調整"pingmu"動態(tài)面板的尺寸,與 Page1 內容區(qū)域保持一致。

實現上下滑動效果

1. 再次進入"pingmu"動態(tài)面板,選中需要滑動的內容,右鍵"轉化為動態(tài)面板",命名為"neirong"。

2. 選中"pingmu"動態(tài)面板,在交互面板中新建"拖動時-移動"交互,目標選擇"neirong",移動選擇"跟隨垂直拖動"。

實現彈回效果

向上彈回

1. 選中"pingmu"動態(tài)面板,在交互面板中新建"向下拖動結束時-移動"交互。

2. 目標選擇"neirong",移動選擇"到達"坐標(0,0),動畫選擇"彈性"。

向下彈回

1. 選中"pingmu"動態(tài)面板,在交互面板中新建"向上拖動結束時-移動"交互。

2. 目標選擇"neirong",移動選擇"到達"坐標(0,fx函數),動畫選擇"彈性"。

3. 添加條件判斷,"neirong"元件的Y坐標小于等于"pingmu"元件高度減"neirong"元件高度。

總結

通過以上步驟,我們成功在Axure RP 9.0中實現了上下滑動及彈回的交互效果。這種交互設計不僅增強了頁面的視覺體驗,也為用戶提供了更加豐富的操作體驗。希望本文對您有所幫助,祝coding愉快!