作者分享了自己制作京東官網滾動界面原型的具體操作過程，希望大家可以從中受到些啟發。

先上京東官網原圖（也可以自己搜素京東官網查看）

先分析一下這個界面，幾張圖片的滾動，中心位置偏下一個滾動條，由幾個橢圓和一個圓角矩形構成。

圖片滾動和橢圓顔色變化相對應，點擊圖片鍊接至對應活動網頁。

1、滾動界面動畫

我們先導入一張圖片到工作區，鼠标右鍵選擇“轉化為創建動态面闆”。

然後在頁面面闆也就是右下角面闆會有一個動态面闆的分欄，鼠标移動點擊時會出現一個加号，也就是添加狀态。

雙擊創建兩個新的狀态，在每個狀态下添加一張圖片，我這裡就以3個狀态為例。

單擊動态面闆在面闆狀态找到交互分欄裡面的“載入時”事件，雙擊添加。

會彈出一個設置窗口，在原件欄中找到“設置面闆狀态”，雙擊添加參數設置如下：

點擊确定按F5預覽就會有一個簡單的滾動效果。

2、制作畫面中的3個白色橢圓與畫面綁定

點擊index（或者home）右下角頁面那裡主要是為了不在動态面闆中建立橢圓。

然後在原件庫找到橢圓形移動到工作欄調整合适的大小複制3個調整到合适的位置，順手設置下圓形的邊框改成無邊框。

接下來就是重點了，我先講一下原理。

我們要做的是讓切換畫面順序跟3個橢圓的切換對應，對比京東官網可以看到切換到對應的圖片，對應的按鈕會變紅。

首先來制作按鈕變紅事件，點擊第一個按鈕右鍵選擇交互樣式。

在彈出的交互設置中選擇“選中”欄，勾選填充顔色選擇紅色

其他兩個橢圓的設置與第一個一緻。

加下來就是讓第一張圖與橢圓1綁定，也就是說切換到第一張圖的同時橢圓1被選中變成紅色。

選中動态面闆，在屬性中找到“狀态改變時”的事件，雙擊添加，在設置中選擇編輯條件選擇state1

點擊确定。

之後在元件動作分欄找到“選中“動作雙擊添加，參數設置如下：

橢圓1設置“true“是表示當切換到圖片1時橢圓1被選中，前面我們已經設置了橢圓被選中時變成紅色，所以這裡橢圓1變成紅色。接下來就是一樣的設置，當然了case2把state換成state2，橢圓1和3的值等于”false“橢圓2的值為”true“。橢圓3也是一樣的道理我就不上圖了。

最難的部分已經結束了下面來制作鼠标移入圖片時停止滾動的動作。

還是點擊動态面闆，在屬性欄找到“鼠标移入時”事件雙擊添加事件在彈出的設置框添加動作“設置面闆狀态”在選擇狀态中下拉選擇停止循環。

然後就是鼠标移出時圖片繼續滾動的事件，一樣的找到“鼠标移出時”的事件（動态面闆上添加）雙擊添加，參數與之前設置的滾動參數一緻。

如果你按F5預覽下畫面可以看到我們已經很接近成品了。

接下來，我們要讓鼠标移入橢圓1時畫面切換到圖片1。

這個事件應該添加在橢圓1上，單擊橢圓1，在屬性中找到“鼠标移入時”事件雙擊添加，在彈出的設置窗口選擇“設置面闆狀态”，選擇狀态選擇“state1”。

因為鼠标移入時畫面停止滾動所以隻需要選擇state1（也就是圖片1）即可。同樣的橢圓2，橢圓3對應添加事件，選擇狀态為state2，state3即可。

3、為圖片設置超鍊接

雙擊圖片1在屬性中找到“鼠标單擊時”事件，雙擊添加，選擇“鍊接”分欄找到“當前窗口”單擊添加，設置如下：

在超鍊接中輸入你想轉到的網址，圖片2、3操作與1一緻，隻是網址不同罷了。

最後就是添加一個圓角矩形在3個橢圓的下面作為底色，調整透明度以及圓角。個人認為加了這個圓角矩形之後感覺順暢多了，下面是成品圖，個人第一次寫教程不喜輕噴。

附：源文件百度雲鍊接：http:///s/1gfIeyzD 密碼：o2o4

本文由 @紅匏白臉 原創發布于人人都是産品經理。未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部