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

Axure RP 9.0 中實(shí)現(xiàn)上下滑動及彈回效果

前期準(zhǔn)備

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

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

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

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

實(shí)現(xiàn)上下滑動效果

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

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

實(shí)現(xiàn)彈回效果

向上彈回

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

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

向下彈回

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

2. 目標(biāo)選擇"neirong",移動選擇"到達(dá)"坐標(biāo)(0,fx函數(shù)),動畫選擇"彈性"。

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

總結(jié)

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