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

編輯導語：在日常使用軟件的過程中，視頻列表是一個十分常見的功能模塊，那么，你知道如何利用中繼器來設計出視頻播放列表嗎？本篇文章里，作者就如何利用Axure中繼器實現視頻播放列表一事做了總結，一起來看一下。

視頻列表是平臺、系統里面的常用功能，所以作者今天就教大家在Axure里面怎么用中繼器制作一個視頻列表的原型模板。

一、制作完成后應具備以下效果

1. 移入效果，移入對應的視頻，視頻封面圖片有一個亮燈效果以及放大縮小圖片的效果；
2. 播放視頻效果，點擊不同的視頻，可以播放不同的視頻；
3. 中繼器內容維護，在中繼器中導入視頻（本地地址或網絡地址）、圖片和視頻名稱，自動生成對應的高保真交互效果。

二、制作材料準備

制作材料包括中繼器元件、矩形元件、圖片元件、播放按鈕、文本標簽。

而中繼器是最重要的元件，后續的元件都是放在中繼器內部。

1. 中繼器內部材料擺放

如下圖所示，從上到下的元件擺放順序依次為：

1. 播放按鈕：可以用svg案例或者透明背景的圖片都可以，根據你能找到的素材。
2. 矩形元件（擋板）：起到一個半透明的擋板的作用，后續會增加鼠標移入的反饋交互。默認為灰色，透明度為50%。
3. 文字標題：用于記錄視頻文字，默認填充顏色為黑色，透明為50%，這樣設置是為了不擋住視頻的封面圖片。
4. 圖片元件：這里我們右鍵將圖片轉為動態面板，后續會做一個移入放大圖片的動態交互效果。轉為動態面板后，動態面板需要取消自適應內容的默認勾選。

最后我們將中繼器內部所有元件組合在一起，我們就完成材料的準備了。

2. 中繼器表格的設置

我們增加三列：

1）picture：視頻的封面圖片，如果是本地圖片的話，就右鍵導入圖片即可；如果是網絡圖片的話，就直接粘貼網址即可。

2）biaoti：文字標題，輸入視頻標題文字即可，也可以在excel里面編輯好，然后復制到中繼器表格里

3）url：視頻的地址，這里我們可以有3種填寫方法。

第一個是填寫視頻的網絡地址，這種是最方便的，本地預覽、本地發布、網絡共享都可以看到，建議大家使用這種方法。

第二個是填寫本地的視頻地址，例如C:\Users\52207\Downloads\xxx.mp4，這種地址的話就需要發布生成html文件才可查看，而且還要是在你本機，視頻位置、視頻名稱不發生改變時才能才看，所以不太方便。

第三種是直接填寫resources\文件名稱，例如resources\xxx.mp4xxx.mp4，然后發布生成html文件，生成html后將視頻復制到生成文件里面的resources文件夾，這樣我們將整個文件打包給其他人，別人也能順利查看，這種方法在不能連接到外網的情況下使用的比較多。

三、交互設置

1. 中繼器每項加載時交互

設置圖片：將中繼器中picture列保存的圖片設置到圖片元件里。

設置文本：將中繼器中biaoti列保存的文本文本設置到文字標題的元件里。

2. 鼠標移入中繼器內部組合時

鼠標移入時，我們把擋板和播放按鈕隱藏，這樣就有一個類似開燈的效果。

然后我們設置圖片尺寸，將圖片設置為他原來的1.1倍，錨點設置在中部，并且增加動畫。因為動態面板的尺寸是不變的，前面我們取消勾選了自適應，所以就有一個放大的效果。

3. 鼠標移出中繼器內部組合時

鼠標移出時，我們相當于做一個反向操作，其實就是恢復原狀。

所以我們把移入是隱藏的擋板和播放按鈕顯示，把移入時擴大了1.1倍的圖片縮小1.1倍，同樣這里也是錨點在中部并且要增加動畫效果，這樣會更加好看。

4. 鼠標單擊中繼器內部組合時

鼠標點擊視頻組合時，就是想看看這個視頻，所以我們用打開鏈接的交互，在彈窗中打來對應的視頻地址（url列所記錄的地址），就可以可以在新窗口中播放視頻了。

那以上就是中繼器版視頻列表模板的制作方法了，感興趣的同學們可以動手試試，謝謝您的閱讀。

我們下期見，88~

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

題圖來自Unsplash，基于CC0協議