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

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

前期準(zhǔn)備

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

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

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

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

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

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

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

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

向上彈回

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

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

向下彈回

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

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

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

總結(jié)

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