中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、概述

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

二、材料準備

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

三、交互邏輯

首先它的交互邏輯，由圖可以看出，并不是很復雜，當我們把光標移入的時候，需要根據光標的位置改變進度條和改變圖片，然后當我們把光標移出的時候，視頻需要回到最開始的狀態，進度條歸0.

四、實現步驟

1. 進度條設置

首先，哪個容易實現，我們先搞哪個。

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

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

2. 設置視頻預覽(圖片切換)

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

然后將屏幕，感應區域的位置如下圖放置，注意屏幕應該是處于最底層，然后感應區域處于最頂層，設置感應區域的交互事件，同樣地， 鼠標移動地時候，判斷光標地位置在哪？根據光標移入感應區域地位置設置相應的圖片。

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

比如設置感應區域的交互事件，當鼠標移動的時候判斷光標的位置，如果光標的X坐標->(230<=x<280),設置屏幕狀態為狀態1，同樣地如果(280<=x<330),那屏幕狀態就是狀態2，其他情形也是如此。

如下圖，另外別忘了設置當鼠標移出感應區域時，我們需要設置屏幕地狀態回到初始狀態。

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

這就是今天小魚給大家帶來的b站視頻預覽實現教程是不是很簡單呢？趕快動手試一下吧。

本文由 @Zia 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。