起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure：運(yùn)用視覺差和動(dòng)態(tài)看板狀態(tài)切換，制作banner立體切換效果
如何運(yùn)用視覺差和動(dòng)態(tài)看板狀態(tài)切換，制作banner立體切換效果。
如下圖所示：鼠標(biāo)向左滑動(dòng)切換下一張圖片，向右滑動(dòng)顯示上一張圖片，動(dòng)態(tài)效果為立體翻轉(zhuǎn)樣式。
思路：利用時(shí)間差、視覺差、動(dòng)態(tài)面板狀態(tài)改變來完成。
步驟一：按如下動(dòng)態(tài)面板結(jié)構(gòu)放置圖片
整個(gè)內(nèi)容放在動(dòng)態(tài)面板“banner”里面，這樣可以方便應(yīng)用到其他各個(gè)地方，復(fù)制或生成模板不用修改任何設(shè)置。
- “img”里面放圖片主體；
- “向左翻轉(zhuǎn)”里面放向左滑動(dòng)翻轉(zhuǎn)時(shí)的內(nèi)容。
這個(gè)狀態(tài)里面放了一個(gè)動(dòng)態(tài)面板“左立體”，用來放置三個(gè)不同狀態(tài)1、2、3，這里是用來存放旋轉(zhuǎn)時(shí)呈現(xiàn)不同樣子的圖片，如下轉(zhuǎn)至1/3、2/3時(shí)的樣子。
- “向右翻轉(zhuǎn)”里面放向右滑動(dòng)翻轉(zhuǎn)時(shí)的內(nèi)（同“向左翻轉(zhuǎn)”）。
步驟二：banner動(dòng)態(tài)面板上添加事件
開始立體翻轉(zhuǎn)：動(dòng)態(tài)面板“banner”（或者this widget）的狀態(tài)設(shè)置為“向左翻轉(zhuǎn)”。
翻轉(zhuǎn)過程：設(shè)置其里面的動(dòng)態(tài)面板狀態(tài)自動(dòng)切換Next，間隔時(shí)間200ms。
這個(gè)過程是每滑動(dòng)一張banner圖片就會執(zhí)行的，所以需要根據(jù)滑動(dòng)的當(dāng)前圖片不同，狀態(tài)圖片也是不同的。如下：所以這里需要判斷當(dāng)前banner主圖是哪一張，根據(jù)圖片不同，狀態(tài)圖片不同。
所以除了以上的任何情況下的執(zhí)行操作外，還需要添加if動(dòng)作，如下是當(dāng)目標(biāo)banner圖是第二張時(shí)的判斷。
如果是相同內(nèi)容則不需要這種判斷，比如都是一個(gè)顏色的色塊。
翻轉(zhuǎn)完：3個(gè)狀態(tài)翻轉(zhuǎn)過程花了600ms，所以要等待600ms進(jìn)行完成后的展示，600ms過去了，把主體圖片展示出來，并且設(shè)置為目標(biāo)圖（這里是Next）。
翻轉(zhuǎn)完也展示出了目標(biāo)圖片，還要還原負(fù)責(zé)翻轉(zhuǎn)面板的狀態(tài)為初始頁面，不然下一次就不能從頭翻轉(zhuǎn)了。
向右翻轉(zhuǎn)同上。
圖片來源：http://huaban.com/pins/1465767735/
–完–
本文由 @?X。， 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pixabay，基于 CC0 協(xié)議
貴司有點(diǎn)厲害哦，有啥是你們不做的么
還能這樣
哈哈
五天