如何運用視覺差和動態(tài)看板狀態(tài)切換，制作banner立體切換效果。

如下圖所示：鼠標向左滑動切換下一張圖片，向右滑動顯示上一張圖片，動態(tài)效果為立體翻轉樣式。

思路：利用時間差、視覺差、動態(tài)面板狀態(tài)改變來完成。

步驟一：按如下動態(tài)面板結構放置圖片

整個內容放在動態(tài)面板“banner”里面，這樣可以方便應用到其他各個地方，復制或生成模板不用修改任何設置。

• “img”里面放圖片主體；
• “向左翻轉”里面放向左滑動翻轉時的內容。

這個狀態(tài)里面放了一個動態(tài)面板“左立體”，用來放置三個不同狀態(tài)1、2、3，這里是用來存放旋轉時呈現(xiàn)不同樣子的圖片，如下轉至1/3、2/3時的樣子。

• “向右翻轉”里面放向右滑動翻轉時的內（同“向左翻轉”）。

步驟二：banner動態(tài)面板上添加事件

開始立體翻轉：動態(tài)面板“banner”（或者this widget）的狀態(tài)設置為“向左翻轉”。

翻轉過程：設置其里面的動態(tài)面板狀態(tài)自動切換Next，間隔時間200ms。

這個過程是每滑動一張banner圖片就會執(zhí)行的，所以需要根據(jù)滑動的當前圖片不同，狀態(tài)圖片也是不同的。如下：所以這里需要判斷當前banner主圖是哪一張，根據(jù)圖片不同，狀態(tài)圖片不同。

所以除了以上的任何情況下的執(zhí)行操作外，還需要添加if動作，如下是當目標banner圖是第二張時的判斷。

如果是相同內容則不需要這種判斷，比如都是一個顏色的色塊。

翻轉完：3個狀態(tài)翻轉過程花了600ms，所以要等待600ms進行完成后的展示，600ms過去了，把主體圖片展示出來，并且設置為目標圖（這里是Next）。

翻轉完也展示出了目標圖片，還要還原負責翻轉面板的狀態(tài)為初始頁面，不然下一次就不能從頭翻轉了。

向右翻轉同上。

圖片來源：http://huaban.com/pins/1465767735/

–完–

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

題圖來自 Pixabay，基于 CC0 協(xié)議