一、元件(jian)準備此效果設計到四個元件(jian)：內(nei)容頁；背景圖(tu)片上；背景圖(tu)片下(xia)；拖動條。

1. 內容頁

內容頁動(dong)態面板長(chang)度(du)設(she)為1200，高度(du)設(she)為600。

然后在里面自(zi)上而下建(jian)立四個(ge)長(chang)方形，分(fen)別填寫內(nei)容(rong)，命名1、2、3、4。其中 1 號、 4 號長(chang)度(du)設為(wei)(wei)1200，高度(du)設為(wei)(wei)600。 2 號、 3 號長(chang)度(du)設為(wei)(wei)1200，高度(du)設為(wei)(wei)350。然后中間間隔距離為(wei)(wei) 300 一(yi)次(ci)排開(kai)，設為(wei)(wei)一(yi)組。

2. 背景圖片上/下(xia)

背景圖片頁動態面板長(chang)度設為1200，高度設為300，各添(tian)加 3 個切換頁面。按照上下(xia)位置緊貼著對其排列，同(tong)時在界面中分別放入三(san)張(zhang)長(chang)1200、高度 600 的圖片。

3. 拖動條

拖動條(tiao)畫成常規格(ge)式即(ji)可。

長度(du)根(gen)據需要計算，本仿真(zhen)滾(gun)(gun)動(dong)條(tiao)移動(dong)范(fan)圍為 0 至600，內容頁移動(dong)范(fan)圍為- 2200 至2800，所以我將其(qi)高度(du)設為160，使內容頁的移動(dong)距離(li)等于 5 倍的滾(gun)(gun)動(dong)條(tiao)移動(dong)距離(li)（后續公式(shi)中要使用）。

二、交互動作(zuo)完成元(yuan)件的(de)建(jian)立后(hou)，將內容頁完整的(de)蓋到背(bei)景圖(tu)片上/下，將滾動條上端對其放置在內容頁右(you)側及可以開(kai)始(shi)設計交互動作(zuo)。

1. 拖動條

首(shou)先在滾動(dong)(dong)(dong)(dong)條(tiao)上(shang)添加(jia)用例拖(tuo)(tuo)動(dong)(dong)(dong)(dong)時(shi)：先移(yi)動(dong)(dong)(dong)(dong)“拖(tuo)(tuo)動(dong)(dong)(dong)(dong)條(tiao)”為(wei)“垂直拖(tuo)(tuo)動(dong)(dong)(dong)(dong)”，設(she)(she)(she)置邊界(jie)為(wei) 0 至(zhi) 600 范圍內(nei)；然后設(she)(she)(she)置移(yi)動(dong)(dong)(dong)(dong)內(nei)容(rong)頁(ye)內(nei)的“1、2、3、 4 的組(zu)”為(wei)“相對位置”，x=0，y=[[(-DragY)*5]]（前面算過內(nei)容(rong)頁(ye)移(yi)動(dong)(dong)(dong)(dong)距離(li)是拖(tuo)(tuo)動(dong)(dong)(dong)(dong)條(tiao)移(yi)動(dong)(dong)(dong)(dong)距離(li)的 5 倍(bei)，拖(tuo)(tuo)動(dong)(dong)(dong)(dong)條(tiao)向下移(yi)動(dong)(dong)(dong)(dong)時(shi)，內(nei)容(rong)頁(ye)向上(shang)移(yi)動(dong)(dong)(dong)(dong)，所以(yi)為(wei)(-DragY)*5），設(she)(she)(she)置邊界(jie)為(wei)- 2200 至(zhi) 2800 范圍內(nei)。

2. 內容頁

因(yin)為我們要實(shi)現的(de)效(xiao)果是(shi)，當(dang)內容頁(ye)1、 2 之間(jian)的(de)縫隙經過時看(kan)到的(de)是(shi)背景(jing)圖(tu)(tu)片(pian)1；內容頁(ye)2、 3 之間(jian)的(de)縫隙經過時看(kan)到的(de)是(shi)背景(jing)圖(tu)(tu)片(pian)2，內容頁(ye)3、 4 之間(jian)的(de)縫隙經過時看(kan)到的(de)是(shi)背景(jing)圖(tu)(tu)片(pian)3。

同時我(wo)們(men)將(jiang)2、 3 的(de)高度(du)設置為(wei)350，背景圖片頁上/下(xia)高度(du)為(wei)300，所以在內(nei)容頁移(yi)動(dong)時，2、 3 可以完全覆蓋(gai)住背景圖片頁的(de)上或下(xia)，我(wo)們(men)將(jiang)在完全覆蓋(gai)的(de)時候進行(xing)背景頁的(de)切(qie)換，從而(er)實現我(wo)們(men)想(xiang)要的(de)效果。

我們將(jiang)內容頁(ye) 2 覆(fu)(fu)蓋背(bei)景(jing)圖片(pian)(pian)頁(ye)時，進行圖片(pian)(pian) 1 和圖片(pian)(pian) 2 的(de)切(qie)換，內容頁(ye) 3 覆(fu)(fu)蓋背(bei)景(jing)圖片(pian)(pian)頁(ye)時，進行圖片(pian)(pian) 2 和圖片(pian)(pian) 3 的(de)切(qie)換。

背(bei)景圖(tu)(tu)(tu)片(pian)上的坐(zuo)(zuo)標(biao)為(wei)（0,0），背(bei)景圖(tu)(tu)(tu)片(pian)下的坐(zuo)(zuo)標(biao)為(wei)（0,300），所以內容頁坐(zuo)(zuo)標(biao)在 250 至 300 時完全覆蓋背(bei)景圖(tu)(tu)(tu)片(pian)下，將(jiang)內容頁坐(zuo)(zuo)標(biao)y等于(yu) 250 至 275 時背(bei)景圖(tu)(tu)(tu)片(pian)下轉換為(wei)圖(tu)(tu)(tu)片(pian)2，坐(zuo)(zuo)標(biao)y等于(yu) 275 至 300 時背(bei)景圖(tu)(tu)(tu)片(pian)下轉換為(wei)圖(tu)(tu)(tu)片(pian)1。

同(tong)理(li)內容頁完全覆蓋背景圖(tu)片(pian)(pian)上(shang)的范圍為- 50 至(zhi)0，內容頁坐標y等于(yu)- 25 至(zhi)- 50 時背景圖(tu)片(pian)(pian)下轉換(huan)為圖(tu)片(pian)(pian)2，坐標y等于(yu)- 25 至(zhi) 0 時背景圖(tu)片(pian)(pian)下轉換(huan)為圖(tu)片(pian)(pian)1。

內容頁 2 設(she)置好后，內容頁 3 同樣的坐標范圍只是調整為圖(tu)片 2 與(yu)圖(tu)片 3 的切換即(ji)可。

然后(hou)運行一(yi)下程序就可以出來我(wo)們想要的(de)效果了。