以下介紹幾個常用小教程，還是那句話——內(nèi)容簡單，適合菜鳥查閱，老鳥可飄過，順便幫忙點個贊哈

網(wǎng)頁圖片翻牌效果

例如：鼠標(biāo)移到圖片上時，該圖片顯現(xiàn)翻牌效果，顯示另外一張圖片。鼠標(biāo)移開，恢復(fù)原圖

1.拖動1個圖形元件，右鍵設(shè)置“轉(zhuǎn)換為動態(tài)面板“，雙擊動態(tài)模板，添加“State2”；

2.對State1，和State2導(dǎo)入圖片，圖片大小要一致；

3.添加鼠標(biāo)移入交互動作，并添加動作“設(shè)置面板狀態(tài)”→“當(dāng)前元件”→“Next”→{進入動畫}與{退出動畫}均為“向右翻轉(zhuǎn)”；

4.繼續(xù)添加鼠標(biāo)移出交互動作，并添加動作“設(shè)置面板狀態(tài)”→“當(dāng)前元件”→“Previous”→{進入動畫}與{退出動畫}均為“向右翻轉(zhuǎn)”；

5.最后把圖片動態(tài)面板，復(fù)制多幾個，一個個去修改它們的圖片。

網(wǎng)站常見幻燈片

例如：載入網(wǎng)頁，幻燈自動輪轉(zhuǎn)，點擊幻燈號數(shù)，直接跳入該號圖片

1.拖進一個動態(tài)面板元件，設(shè)置尺寸（根據(jù)自己愛好定義），我這里設(shè)置的為寬500，高200，雙擊進入面板狀態(tài)管理，設(shè)置面板名稱，面板狀態(tài)添加5個狀態(tài)；

2.針對面板內(nèi)的5個狀態(tài)，每個都拖入圖片，并設(shè)置好圖片的尺寸，尺寸與動態(tài)面板一致；

3.回到index頁，添加頁面加載時交互方式→添加動作設(shè)置面板狀態(tài)→選擇動態(tài)面板→選擇狀態(tài)Next→選擇向后循環(huán)、循環(huán)間隔2000毫秒、首個狀態(tài)延時2000毫秒后切換。設(shè)置完成后，可進入頁面測試，查看幻燈圖是否已自動輪轉(zhuǎn)；

4.添加矩形元件，設(shè)置序號、尺寸、樣式，復(fù)制到每張動態(tài)狀態(tài)上；

5.設(shè)置矩形的鼠標(biāo)點擊交互，添加設(shè)置面板狀態(tài)動作→選擇序號對應(yīng)的圖片名稱→添加等待動作→等待時間2000毫秒→添加設(shè)置面板狀態(tài)動作→設(shè)置選擇狀態(tài)Next→選擇循環(huán)間隔2000毫秒。

網(wǎng)頁常見走馬燈

例如：公司通告、股市數(shù)據(jù)、購物、博彩等都可使用到

1.拖進一個動態(tài)面板元件，設(shè)置尺寸和背景色；

2.雙擊動態(tài)面板進入面板狀態(tài)管理，添加面板名稱，新建一個面板狀態(tài)；

3.進入面板狀態(tài)state1內(nèi)，添加文字，文字設(shè)置為白色字體，再進入面板狀態(tài)state2內(nèi)，添加文字，文字設(shè)置為白色字體；

4.設(shè)置交互動作載入時→添加動作設(shè)置面板狀態(tài)→選擇動態(tài)面板→選擇狀態(tài)Next→選擇向后循環(huán)和循環(huán)間隔30000毫秒→進入動畫從左滑動，時間30000毫秒（建議不要設(shè)置太快，否則閃瞎眼）

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