本文以“人人都是產(chǎn)品經(jīng)理”手機(jī)app原型為例，講解輪播過(guò)程中的，側(cè)圖留框、主圖放大的功能，以及自動(dòng)輪播和手動(dòng)拖動(dòng)的實(shí)時(shí)切換。（末尾有彩蛋）

現(xiàn)在手機(jī)app中我們經(jīng)常能看到有放大，并且兩邊有前后圖片留框的輪播效果，同時(shí)支持手動(dòng)拖動(dòng)和自動(dòng)輪播兩種形式。我以“人人都是產(chǎn)品經(jīng)理”手機(jī)app為例，做了高保真原型。

具體GIF演示如下：

這里輪播形式是目前手機(jī)app開(kāi)窗慣用的形式，具體特點(diǎn)：

（1）主內(nèi)容圖片兩側(cè)有前后圖片的邊框。

（2）開(kāi)窗顯示的主圖片尺寸會(huì)自動(dòng)放大，在本原型中，主圖片的高度比前后圖片要增高。

（3）進(jìn)入頁(yè)面后自動(dòng)輪播，支持左右拖動(dòng)，拖動(dòng)結(jié)束后，若無(wú)繼續(xù)操作，將再次進(jìn)入自動(dòng)輪播狀態(tài)。

思路

（1）為何不能用動(dòng)態(tài)面板的輪播功能

因?yàn)閮蓚?cè)有前后圖片留框效果，如果只是簡(jiǎn)單的用動(dòng)態(tài)面板不同state之間的輪播是達(dá)不到此效果的。

（2）是否可以用動(dòng)態(tài)面板，移動(dòng)里面的圖片的同時(shí)，改變圖片坐標(biāo)，來(lái)達(dá)到輪播的效果

因?yàn)槔锩嬗小爸鲌D片自動(dòng)放大，次圖片自動(dòng)縮小”的特效，如果用上述方法會(huì)非常繁瑣。

（3）整體思路：

1. 兩側(cè)有前后圖片留框效果——用到動(dòng)態(tài)面板的遮罩功能；
2. 手動(dòng)、自動(dòng)輪播切換效果——用到動(dòng)態(tài)面板的“循環(huán)開(kāi)關(guān)”功能；
3. 圖片循環(huán)輪轉(zhuǎn)——中繼器實(shí)時(shí)排序功能；
4. 主圖片放大效果——尺寸改變交互功能。

操作步驟

（1）準(zhǔn)備動(dòng)態(tài)面板mask，在屬性中，取消選擇“自動(dòng)調(diào)整為內(nèi)容尺寸”選項(xiàng)。

（2）在mask的State1中放入五個(gè)圖片元件標(biāo)志，不要導(dǎo)入具體圖片，并命名為1、2、3、4、5。因?yàn)榇颂幹皇亲寛D片占位符確定位置，具體的圖片內(nèi)容靠后面講的中繼器賦值。

將五個(gè)圖片排成一排，中間略有隔開(kāi)，其中第二張圖片（命名2）調(diào)整為樣例中主圖片大?。ㄔ椭兄鲌D片尺寸為寬316×高159），其他四張圖片的高度比圖片2矮一些（原型中其他圖片尺寸為寬366×高144）。

然后編組組合為一體，擺放位置為正好第一張圖片在動(dòng)態(tài)面板左側(cè)外。

具體過(guò)程看gif：

（3）準(zhǔn)備中繼器

在頁(yè)面的空白處（注意不是在動(dòng)態(tài)面板里），拖入一個(gè)中繼器，將里面的矩形刪除，不用放入任何元件，只需在數(shù)據(jù)集中，建兩列，number列輸入12345共計(jì)5行，img列對(duì)應(yīng)導(dǎo)入我們需要展現(xiàn)的5張圖片。

具體過(guò)程看GIF，這步非常重要。

然后在中繼器中繼續(xù)操作，在中繼器“載入時(shí)”，加入交互，按“number列”進(jìn)行升序排列。

接下來(lái)的交互非常重要，是我們常規(guī)對(duì)于中繼器的反操作。之前我們大部分案例，是外部元件為中繼器賦值，現(xiàn)在是中繼器為外部元件賦值，具體如下：

以Case1 為例：

條件：if “[[Item.index]]” == “1”

解釋：index函數(shù)的用途：獲取數(shù)據(jù)行的索引編號(hào)，編號(hào)起始為1，由上至下每行遞增1。是系統(tǒng)自動(dòng)生成的，不隨行數(shù)劇變化而變化，就像Excel中的表格左側(cè)的行號(hào)。

交互：設(shè)置動(dòng)態(tài)面板mask里的圖片組合中的圖1（排在第一個(gè)的圖片）==中繼器中行號(hào)為1的img列里的片，即我們?cè)谥欣^器img導(dǎo)入的圖片，即動(dòng)態(tài)面板圖1的位置顯示的是中繼器中index==1的里的圖片內(nèi)容。

解釋：因?yàn)橹拔覀冎谱鞯膭?dòng)態(tài)面板里的圖片都是元件圖標(biāo)，沒(méi)有導(dǎo)入具體的圖片，現(xiàn)在將動(dòng)態(tài)面板中的5個(gè)圖片分別綁定為中繼器中的5個(gè)index里的圖片。后續(xù)會(huì)利用中繼器的排序功能為動(dòng)態(tài)面板實(shí)現(xiàn)循環(huán)效果。

以同樣的方法設(shè)置圖片2、3、4、5。

（4）為動(dòng)態(tài)面板mask添加交互

4.1 向左拖動(dòng)結(jié)束時(shí)

第一步：移動(dòng)動(dòng)態(tài)面板里的圖片組合向左側(cè)移動(dòng)X坐標(biāo)“相對(duì)”位置-322。這個(gè)數(shù)值自己去調(diào)整，在動(dòng)態(tài)面板中拖動(dòng)位置，自己計(jì)算起始位置到拖動(dòng)位置的差值即可。注意選擇的是相對(duì)位置即“經(jīng)過(guò)”，因?yàn)檫@樣的話不用設(shè)置y坐標(biāo)，加上線性動(dòng)畫500毫秒。

第二步：當(dāng)圖片組合向左挪動(dòng)一格后，挪出屏幕的是動(dòng)態(tài)面板圖2的位置并顯示的是中繼器index==2的圖片內(nèi)容，目前就是中繼器中的圖片2。同理顯示在主屏幕的應(yīng)該是動(dòng)態(tài)面板圖3的位置，并顯示的是中繼器index==3的圖片內(nèi)容，目前就是中繼器中的圖片3，所以設(shè)置原來(lái)是大圖的圖片2高度變小，原來(lái)是小圖的圖片3變大。

第三步：等待550毫秒，這里我要重點(diǎn)說(shuō)一下“等待”這個(gè)交互。因?yàn)槲覀兩厦鎺撞降慕换ブ卸加芯€性動(dòng)畫500毫秒的設(shè)置，如果在后續(xù)的動(dòng)作中，強(qiáng)調(diào)是“同步性”即在上述500毫秒的線性動(dòng)畫進(jìn)行的同時(shí)，去做其他動(dòng)作，這里可以不用加入“等待”交互。

如果強(qiáng)調(diào)“先后性”，即在500毫秒動(dòng)畫結(jié)束后，進(jìn)行接下來(lái)的動(dòng)作，那么必須在兩個(gè)動(dòng)作之間加入＞500毫秒的等待時(shí)長(zhǎng)。因?yàn)榻酉聛?lái)的第四步交互是要在上述動(dòng)作全部完結(jié)后再進(jìn)行，所以要加入550毫秒的等待。

第四步：燒腦時(shí)刻，我們要給中繼器重新排序，造輪播效果。

為中繼器更新行，更新條件為[[TargetItem.index==1]]即中繼器的第一行，注意上面所說(shuō)的index的含義。

更新列為：number列。

更新為：[[Item.number+TargetItem.Repeater.dataCount]]即第1行（TargetItem.index==1）的number列值為1，現(xiàn)在更新為1+5=6，這里的TargetItem.Repeater.dataCount是指該中繼器中數(shù)據(jù)的總行數(shù)，本中繼器一共5行數(shù)據(jù)，所以為1+5=6。

因?yàn)?，中繼器在載入時(shí)設(shè)置了以number數(shù)值為準(zhǔn)，做升序排列，所以作為這一步，原圖片順序的變化為：

上述順序，大家靜下心捋一捋就能明白，關(guān)鍵點(diǎn)：

• index數(shù)字是系統(tǒng)自帶行標(biāo)，不能改變的，就如同excel中左側(cè)的一列數(shù)字。
• number列的數(shù)字，是為了排序用。
• 動(dòng)態(tài)面板里的圖片占位符是為了確定位置。

到了這一步，我們看看效果gif：

第五步：大家會(huì)發(fā)現(xiàn)，當(dāng)我們拖動(dòng)動(dòng)態(tài)面板時(shí)，主窗口圖片由圖2變?yōu)閳D3并放大后，很快就切入下一輪播，即直接跳到圖片4，但是我們的原型是需要靠人為的主動(dòng)拖動(dòng)，將圖片進(jìn)行輪播。所以我們?cè)谕瓿晌恢弥嘏藕?，將提前播放的圖片4再拉回去。注意動(dòng)畫要選無(wú)。

第六步：重新排序后，被拉回主窗口的是動(dòng)態(tài)面板中圖片2的位置，所以將其改為大圖顯示，同理將被拉出櫥窗外的動(dòng)態(tài)面板中的圖3位置改為小圖，注意動(dòng)畫要選無(wú)。

到這步，向左滑動(dòng)交互全部完成，圖片的輪播順序變化總結(jié)如下：

4.2 同樣的方法為動(dòng)態(tài)面板添加交互——向右拖動(dòng)結(jié)束時(shí)

詳細(xì)步驟不再贅述，基于向左拖動(dòng)，向右拖動(dòng)很多數(shù)值和圖片位置的計(jì)算正好相反，簡(jiǎn)單的給大家劃一下重點(diǎn)：

下面這步條件為：[[TargetItem.index==TargetItem.Repeater.dataCount]]。

到這步，向右滑動(dòng)交互全部完成。

為輪播加入“自動(dòng)輪播”和“取消自動(dòng)輪播”以及“恢復(fù)自動(dòng)輪播功能”的交互

第一步：我們?cè)陧?yè)面新拖入一個(gè)動(dòng)態(tài)面板，命名auto，分別加入兩個(gè)狀態(tài)，state1和state2，每個(gè)狀態(tài)里沒(méi)有任何內(nèi)容。

第二步：在動(dòng)態(tài)面板auto載入時(shí)，加入自動(dòng)輪播的交互。

第三步：在動(dòng)態(tài)面板auto狀態(tài)改變時(shí)，加入“觸發(fā)”之前包含圖片的mask動(dòng)態(tài)面板向左拖動(dòng)結(jié)束時(shí)的交互，即狀態(tài)每改變一次，就向自動(dòng)左拖動(dòng)一次。

到這步就實(shí)現(xiàn)了動(dòng)態(tài)面板mask自動(dòng)輪播的效果，接下來(lái)，我們來(lái)實(shí)現(xiàn)解除和恢復(fù)自動(dòng)輪播的效果，即當(dāng)人工進(jìn)行拖動(dòng)時(shí)，自動(dòng)輪播停止，當(dāng)不再拖動(dòng)時(shí)，自動(dòng)輪播恢復(fù)。

第四步（接上面）：在動(dòng)態(tài)面板mask（含圖片組合的大動(dòng)態(tài)面板）“鼠標(biāo)按下”時(shí)，加入交互。

第五步：在動(dòng)態(tài)面板mask（含圖片組合的大動(dòng)態(tài)面板）“鼠標(biāo)移出”時(shí)，加入交互，即當(dāng)不再進(jìn)行操作時(shí)，重新觸發(fā)auto動(dòng)態(tài)面板載入時(shí)自動(dòng)輪播的交互。

至此，所有交互全部完成。

用上述方法可以制作很多網(wǎng)站流行的放大輪播效果。

本文由 @?bobowang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議