編輯導(dǎo)讀：本文跟大家分享，如何用Axure實現(xiàn)移動光標(biāo)達(dá)到視頻預(yù)覽效果，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開了分析，并對過程中需要注意的問題進(jìn)行了介紹，希望對你有所啟發(fā)。

一、概述

今天小魚又來寫(shui)教程了，小魚認(rèn)為B站有一個非常好的交互設(shè)計那就是通過移動光標(biāo)的方式達(dá)到視頻預(yù)覽(雖然是ppt式地播放)如下圖所示，其實用AXURE實現(xiàn)起來的話并不是很困難，只是過程會有些繁瑣，下面就開始進(jìn)入正題吧。

二、材料準(zhǔn)備

• AXURE PR 9.0
• 圖片若干(小魚選取了靈籠片段的一部分總共10張圖片)

三、交互邏輯

首先它的交互邏輯，由圖可以看出，并不是很復(fù)雜，當(dāng)我們把光標(biāo)移入的時候，需要根據(jù)光標(biāo)的位置改變進(jìn)度條和改變圖片，然后當(dāng)我們把光標(biāo)移出的時候，視頻需要回到最開始的狀態(tài)，進(jìn)度條歸0.

四、實現(xiàn)步驟

1. 進(jìn)度條設(shè)置

首先，哪個容易實現(xiàn)，我們先搞哪個。

準(zhǔn)備兩個長寬一樣的矩形(w:500,h:10),然后填充不同的顏色，分別為白色和灰色，然后將它們兩個重合，并且把白色的矩形至于灰色矩形上層，在這里我們需要把白色的矩形條設(shè)為動態(tài)面板(右擊設(shè)置設(shè)為動態(tài)面板)，取名白色進(jìn)度條，然后將其寬度設(shè)為1，這樣白色矩形就會相當(dāng)于隱藏并且放置在灰色矩形條的最左側(cè)，如下圖.

然后設(shè)置一個(w:500,h:300)的熱區(qū)取名為感應(yīng)區(qū)域，放置位置如下圖(一定要至于頂層),設(shè)置感應(yīng)區(qū)域的交互事件為鼠標(biāo)移動時，交互動作為改變白色進(jìn)度條的尺寸(w: [[cursor.x-白色進(jìn)度條的x坐標(biāo)(小魚這里是230)]]),h:[[白色進(jìn)度條的固定高度]])，緊接著設(shè)置感應(yīng)區(qū)域的交互事件為鼠標(biāo)移出時，設(shè)置白色進(jìn)度條的尺寸寬度為1。第一個條件我們就做好啦。

2. 設(shè)置視頻預(yù)覽(圖片切換)

這里需要用到動態(tài)面板的知識，交互邏輯不難，但是很煩人。我們把準(zhǔn)備好的10張圖片，注意尺寸大小需要和感應(yīng)區(qū)域相同(w:500h:300),設(shè)置一個動態(tài)面板取名屏幕，尺寸也是一樣的，將10張圖片，按照視頻的播放順序，把圖片一張張存在狀態(tài)中，10張圖片10個狀態(tài)。如下圖

然后將屏幕，感應(yīng)區(qū)域的位置如下圖放置，注意屏幕應(yīng)該是處于最底層，然后感應(yīng)區(qū)域處于最頂層，設(shè)置感應(yīng)區(qū)域的交互事件，同樣地， 鼠標(biāo)移動地時候，判斷光標(biāo)地位置在哪？根據(jù)光標(biāo)移入感應(yīng)區(qū)域地位置設(shè)置相應(yīng)的圖片。

比如我們有10張圖片，屏幕寬500，那么也就是說我們可以分為10個區(qū)間，每個區(qū)間50個橫向單位。也就是說光標(biāo)在感應(yīng)區(qū)域中每移動50個單位就需要改變一張圖片。另外我們需要用到屏幕的坐標(biāo)，小魚這里是(230,173).

比如設(shè)置感應(yīng)區(qū)域的交互事件，當(dāng)鼠標(biāo)移動的時候判斷光標(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è)置屏幕地狀態(tài)回到初始狀態(tài)。

好的接下來就全部大功告成了，最終預(yù)覽鏈接：https://1cw59f.axshare.com

這就是今天小魚給大家?guī)淼腷站視頻預(yù)覽實現(xiàn)教程是不是很簡單呢？趕快動手試一下吧。

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

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