本篇文章將會教大家利用AxureRP8，實(shí)現(xiàn)跑馬燈+購物車的效果，enjoy~

前言

本案例是目前筆者唯一一個使用AxureRP8制作的教程，說來奇怪，可能是因?yàn)锳xureRP9處于測試版，還存在一定的bug，跑馬燈的效果怎么都做不出來，于是本案例就是用AxureRP8制作啦。

實(shí)現(xiàn)效果

• 實(shí)現(xiàn)跑馬燈，跑馬燈一般在游戲軟件或者PC端網(wǎng)站上常見，用于顯示提醒通知用戶查看熱點(diǎn)消息。
• 購物車是實(shí)現(xiàn)自動計(jì)算所選商品價格。
• （無法上傳動圖，請下載原型自行瀏覽）

實(shí)現(xiàn)原理

• 跑馬燈：跑馬燈是設(shè)定顯示區(qū)域，設(shè)定滾動文字，當(dāng)文字內(nèi)容移動到一定位置的時候自動歸位，重新移動，實(shí)現(xiàn)跑馬燈的循環(huán)效果。
• 購物車：利設(shè)定簡單的計(jì)算公式即可實(shí)現(xiàn)購物車價格自動計(jì)算。

操作步驟—跑馬燈

步驟一：準(zhǔn)備元件

準(zhǔn)備一個動態(tài)面板，作為元件顯示框，在動態(tài)面板內(nèi)加入一個文本框，輸入跑馬燈內(nèi)容，將跑馬燈內(nèi)容轉(zhuǎn)化為動態(tài)面板，放在第一個動態(tài)面板顯示范圍的右側(cè)。如下圖所示：

元件

第一個動態(tài)面板

擺放位置如圖

步驟二：設(shè)置交互

選中內(nèi)部跑馬燈內(nèi)容轉(zhuǎn)換的動態(tài)面板，設(shè)置交互，顯示時，動態(tài)面板向左移動（移動距離和移動時間取決于跑馬燈內(nèi)容的長度），當(dāng)移動結(jié)束后，將跑馬燈內(nèi)容歸為，并設(shè)置為隱藏。繼續(xù)對當(dāng)前元件設(shè)置交互，當(dāng)跑馬燈內(nèi)容的動態(tài)面板隱藏時，讓其顯示。這樣一來就能實(shí)現(xiàn)跑馬燈內(nèi)容的循環(huán)。

此時注意，跑馬燈內(nèi)容實(shí)現(xiàn)了循環(huán)，但是沒有開始，這時候我們依然選擇跑馬燈內(nèi)容的動態(tài)面板設(shè)置載入時，移動動態(tài)面板，移動結(jié)束后歸為并隱藏。此時就串聯(lián)起來了，用簡單的流程圖表達(dá)就是這樣的：

載入時→移動→移動結(jié)束歸為并隱藏→當(dāng)隱藏時顯示→當(dāng)顯示時重新移動→移動結(jié)束后歸為→再次隱藏…實(shí)現(xiàn)跑馬燈內(nèi)容的循環(huán)。

交互設(shè)置如下圖：

這樣，跑馬燈交互就設(shè)置完成啦。

操作步驟—購物車

步驟一：準(zhǔn)備元件

準(zhǔn)備如圖所示的元件：

步驟二：設(shè)置商品減一交互

選中減號，單擊時讓商品數(shù)量減一，需要注意需要用局部變量實(shí)現(xiàn)減法，局部變量在之前的教程中已經(jīng)多次提到，這里不做過多解釋，如有疑問，可以在公眾號留言：

步驟三：設(shè)置商品加一交互

加一交互同減一交互，不同在于一個是加一個是減，直接上圖：

這樣，在每次點(diǎn)擊加或者減的時候就可以實(shí)現(xiàn)自動計(jì)算處總價的交互啦。

結(jié)語

本案例使用AxureRP8制作，附上原型下載鏈接：

https://pan.baidu.com/s/1KEiaFqg3M2gY9IIvUHhKqQ

提取碼：stox

友情提示：如果預(yù)覽是看不到跑馬燈效果，請刷新重試。

作者：王得宇A(yù)IPM，公眾號：他們已經(jīng)在路上了

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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