AXURE教程：實(shí)現(xiàn)B站移動(dòng)光標(biāo)達(dá)到視頻預(yù)覽效果

AXURE教程：實(shí)現(xiàn)B站移動(dòng)光標(biāo)達(dá)到視頻預(yù)覽效果一、概述今天小魚又來寫(shui)教程了，小魚認(rèn)為B站有一個(gè)非常好的交互設(shè)計(jì)那就是通過移動(dòng)光標(biāo)的方式達(dá)到視頻預(yù)覽(雖然是ppt式地播放)如下圖所示，其實(shí)用AXURE實(shí)現(xiàn)起來的話并不是很困難，只是過程會(huì)有些繁瑣，下面就開始進(jìn)入正題吧。二、材料準(zhǔn)備AXUREPR9.0圖片若干(小魚選取了靈籠片段的一部分總共10張圖片)三、交互邏輯首先它的交互邏輯，由圖可以看出，并不是很復(fù)雜，當(dāng)我們把光標(biāo)移入的時(shí)候，需要根據(jù)光標(biāo)的位置改變進(jìn)度條和改變圖片，然后當(dāng)我們把光標(biāo)移出的時(shí)候，視頻需要回到最開始的狀態(tài)，進(jìn)度條歸0.四、實(shí)現(xiàn)步驟1.進(jìn)度條設(shè)置首先，哪個(gè)容易實(shí)現(xiàn)，我們先搞哪個(gè)。準(zhǔn)備兩個(gè)長(zhǎng)寬一樣的矩形(w:500,h:10),然后填充不同的顏色，分別為白色和灰色，然后將它們兩個(gè)重合，并且把白色的矩形至于灰色矩形上層，在這里我們需要把白色的矩形條設(shè)為動(dòng)態(tài)面板(右擊設(shè)置設(shè)為動(dòng)態(tài)面板)，取名白色進(jìn)度條，然后將其寬度設(shè)為1，這樣白色矩形就會(huì)相當(dāng)于隱藏并且放置在灰色矩形條的最左側(cè)，如下圖.然后設(shè)置一個(gè)(w:500,h:300)的熱區(qū)取名為感應(yīng)區(qū)域，放置位置如下圖(一定要至于頂層),設(shè)置感應(yīng)區(qū)域的交互事件為鼠標(biāo)移動(dòng)時(shí)，交互動(dòng)作為改變白色進(jìn)度條的尺寸(w:[[cursor.x-白色進(jìn)度條的x坐標(biāo)(小魚這里是230)]]),h:[[白色進(jìn)度條的固定高度]])，緊接著設(shè)置感應(yīng)區(qū)域的交互事件為鼠標(biāo)移出時(shí)，設(shè)置白色進(jìn)度條的尺寸寬度為1。第一個(gè)條件我們就做好啦。2.設(shè)置視頻預(yù)覽(圖片切換)這里需要用到動(dòng)態(tài)面板的知識(shí)，交互邏輯不難，但是很煩人。我們把準(zhǔn)備好的10張圖片，注意尺寸大小需要和感應(yīng)區(qū)域相同(w:500h:300),設(shè)置一個(gè)動(dòng)態(tài)面板取名屏幕，尺寸也是一樣的，將10張圖片，按照視頻的播放順序，把圖片一張張存在狀態(tài)中，10張圖片10個(gè)狀態(tài)。如下圖然后將屏幕，感應(yīng)區(qū)域的位置如下圖放置，注意屏幕應(yīng)該是處于最底層，然后感應(yīng)區(qū)域處于最頂層，設(shè)置感應(yīng)區(qū)域的交互事件，同樣地，鼠標(biāo)移動(dòng)地時(shí)候，判斷光標(biāo)地位置在哪？根據(jù)光標(biāo)移入感應(yīng)區(qū)域地位置設(shè)置相應(yīng)的圖片。比如我們有10張圖片，屏幕寬500，那么也就是說我們可以分為10個(gè)區(qū)間，每個(gè)區(qū)間50個(gè)橫向單位。也就是說光標(biāo)在感應(yīng)區(qū)域中每移動(dòng)50個(gè)單位就需要改變一張圖片。另外我們需要用到屏幕的坐標(biāo)，小魚這里是(230,173).比如設(shè)置感應(yīng)區(qū)域的交互事件，當(dāng)鼠標(biāo)移動(dòng)的時(shí)候判斷光標(biāo)的位置，如果光標(biāo)的X坐標(biāo)->(230<=x<280),設(shè)置屏幕狀態(tài)為狀態(tài)1，同樣地如果(280<=x<330),那屏幕狀態(tài)就是狀態(tài)2，其他情形也是如此。如下圖，另外別忘了設(shè)置當(dāng)鼠標(biāo)移出感應(yīng)區(qū)域時(shí)，我們需要設(shè)置屏幕地狀態(tài)回到初始狀態(tài)。好的接下來就全部大功告成了