中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文以“人人都是產品經理”手機app原型為例，講解輪播過程中的，側圖留框、主圖放大的功能，以及自動輪播和手動拖動的實時切換。（末尾有彩蛋）

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

具體GIF演示如下：

這里輪播形式是目前手機app開窗慣用的形式，具體特點：

（1）主內容圖片兩側有前后圖片的邊框。

（2）開窗顯示的主圖片尺寸會自動放大，在本原型中，主圖片的高度比前后圖片要增高。

（3）進入頁面后自動輪播，支持左右拖動，拖動結束后，若無繼續操作，將再次進入自動輪播狀態。

思路

（1）為何不能用動態面板的輪播功能

因為兩側有前后圖片留框效果，如果只是簡單的用動態面板不同state之間的輪播是達不到此效果的。

（2）是否可以用動態面板，移動里面的圖片的同時，改變圖片坐標，來達到輪播的效果

因為里面有“主圖片自動放大，次圖片自動縮小”的特效，如果用上述方法會非常繁瑣。

（3）整體思路：

1. 兩側有前后圖片留框效果——用到動態面板的遮罩功能；
2. 手動、自動輪播切換效果——用到動態面板的“循環開關”功能；
3. 圖片循環輪轉——中繼器實時排序功能；
4. 主圖片放大效果——尺寸改變交互功能。

操作步驟

（1）準備動態面板mask，在屬性中，取消選擇“自動調整為內容尺寸”選項。

（2）在mask的State1中放入五個圖片元件標志，不要導入具體圖片，并命名為1、2、3、4、5。因為此處只是讓圖片占位符確定位置，具體的圖片內容靠后面講的中繼器賦值。

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

然后編組組合為一體，擺放位置為正好第一張圖片在動態面板左側外。

具體過程看gif：

（3）準備中繼器

在頁面的空白處（注意不是在動態面板里），拖入一個中繼器，將里面的矩形刪除，不用放入任何元件，只需在數據集中，建兩列，number列輸入12345共計5行，img列對應導入我們需要展現的5張圖片。

具體過程看GIF，這步非常重要。

然后在中繼器中繼續操作，在中繼器“載入時”，加入交互，按“number列”進行升序排列。

接下來的交互非常重要，是我們常規對于中繼器的反操作。之前我們大部分案例，是外部元件為中繼器賦值，現在是中繼器為外部元件賦值，具體如下：

以Case1 為例：

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

解釋：index函數的用途：獲取數據行的索引編號，編號起始為1，由上至下每行遞增1。是系統自動生成的，不隨行數劇變化而變化，就像Excel中的表格左側的行號。

交互：設置動態面板mask里的圖片組合中的圖1（排在第一個的圖片）==中繼器中行號為1的img列里的片，即我們在中繼器img導入的圖片，即動態面板圖1的位置顯示的是中繼器中index==1的里的圖片內容。

解釋：因為之前我們制作的動態面板里的圖片都是元件圖標，沒有導入具體的圖片，現在將動態面板中的5個圖片分別綁定為中繼器中的5個index里的圖片。后續會利用中繼器的排序功能為動態面板實現循環效果。

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

（4）為動態面板mask添加交互

4.1 向左拖動結束時

第一步：移動動態面板里的圖片組合向左側移動X坐標“相對”位置-322。這個數值自己去調整，在動態面板中拖動位置，自己計算起始位置到拖動位置的差值即可。注意選擇的是相對位置即“經過”，因為這樣的話不用設置y坐標，加上線性動畫500毫秒。

第二步：當圖片組合向左挪動一格后，挪出屏幕的是動態面板圖2的位置并顯示的是中繼器index==2的圖片內容，目前就是中繼器中的圖片2。同理顯示在主屏幕的應該是動態面板圖3的位置，并顯示的是中繼器index==3的圖片內容，目前就是中繼器中的圖片3，所以設置原來是大圖的圖片2高度變小，原來是小圖的圖片3變大。

第三步：等待550毫秒，這里我要重點說一下“等待”這個交互。因為我們上面幾步的交互中都有線性動畫500毫秒的設置，如果在后續的動作中，強調是“同步性”即在上述500毫秒的線性動畫進行的同時，去做其他動作，這里可以不用加入“等待”交互。

如果強調“先后性”，即在500毫秒動畫結束后，進行接下來的動作，那么必須在兩個動作之間加入＞500毫秒的等待時長。因為接下來的第四步交互是要在上述動作全部完結后再進行，所以要加入550毫秒的等待。

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

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

更新列為：number列。

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

因為，中繼器在載入時設置了以number數值為準，做升序排列，所以作為這一步，原圖片順序的變化為：

上述順序，大家靜下心捋一捋就能明白，關鍵點：

• index數字是系統自帶行標，不能改變的，就如同excel中左側的一列數字。
• number列的數字，是為了排序用。
• 動態面板里的圖片占位符是為了確定位置。

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

第五步：大家會發現，當我們拖動動態面板時，主窗口圖片由圖2變為圖3并放大后，很快就切入下一輪播，即直接跳到圖片4，但是我們的原型是需要靠人為的主動拖動，將圖片進行輪播。所以我們在完成位置重排后，將提前播放的圖片4再拉回去。注意動畫要選無。

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

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

4.2 同樣的方法為動態面板添加交互——向右拖動結束時

詳細步驟不再贅述，基于向左拖動，向右拖動很多數值和圖片位置的計算正好相反，簡單的給大家劃一下重點：

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

到這步，向右滑動交互全部完成。

為輪播加入“自動輪播”和“取消自動輪播”以及“恢復自動輪播功能”的交互

第一步：我們在頁面新拖入一個動態面板，命名auto，分別加入兩個狀態，state1和state2，每個狀態里沒有任何內容。

第二步：在動態面板auto載入時，加入自動輪播的交互。

第三步：在動態面板auto狀態改變時，加入“觸發”之前包含圖片的mask動態面板向左拖動結束時的交互，即狀態每改變一次，就向自動左拖動一次。

到這步就實現了動態面板mask自動輪播的效果，接下來，我們來實現解除和恢復自動輪播的效果，即當人工進行拖動時，自動輪播停止，當不再拖動時，自動輪播恢復。

第四步（接上面）：在動態面板mask（含圖片組合的大動態面板）“鼠標按下”時，加入交互。

第五步：在動態面板mask（含圖片組合的大動態面板）“鼠標移出”時，加入交互，即當不再進行操作時，重新觸發auto動態面板載入時自動輪播的交互。

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

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

本文由 @?bobowang 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議