如何不用代碼實現(xiàn)一個九宮格抽獎功能效果？使用ivx平臺開發(fā)案例分享！

今天小編就來和大家討論有關(guān)于：“如何不用代碼實現(xiàn)一個九宮格抽獎功能效果？”這個問題要怎么實現(xiàn)，下面是小編通過各種方式整理的有關(guān)于這個問題實現(xiàn)的方法和內(nèi)容！ 

前言

上次說過在看一些關(guān)于0代碼開發(fā)平臺ivx，前一段時間忙完考試最近跟著教程0代碼實現(xiàn)一個九宮格抽獎，哈哈哈感覺還是蠻強大的，懂點的人都知道可視化這個東西我們正常都是用一些包或者庫來實現(xiàn)數(shù)據(jù)可視化。而可視化編程我們可能還停留在Dreamweaver和安卓xml編程上。如果寫過GUI或者之類就知道任何一個可視化操作的任務(wù)量是非常巨大的，所以內(nèi)心還是很欽佩出這么一個東西。并且這個可視化不錯的(上手需要一點時間)。

對于九宮格抽獎問題，要清楚并不是真正的前端界面去抽獎，而是后端生成一個數(shù)據(jù)前端九宮格根據(jù)這個數(shù)據(jù)去跑成一個這么結(jié)果的效果。下面就把個人實現(xiàn)的一個抽獎小程序?qū)崿F(xiàn)過程記錄一下，大家也可以嘗試一下，因為不涉及代碼可能截圖更多。當(dāng)然，由于這部分如果完整實現(xiàn)設(shè)計的內(nèi)容太多可能使讀者失去興趣，我將一些簡單的步驟先截圖描述大家可以跟著做，后面更完善的功能可以看這個教學(xué)視頻。

試了一下可能剛開始了解稍微復(fù)雜一點各個按鈕不熟悉，跟著教程一步步來慢慢會熟悉一點。后續(xù)也可能會使用ivx平臺實現(xiàn)一些后臺管理或者一些簡單的小程序。

九宮格背景制作

首先登錄ivx平臺，進入控制臺，新建一個WebApp、小程序。

創(chuàng)建完畢之后在前臺創(chuàng)建一個頁面(點擊一下頁面圖標(biāo)即可)，然后在右側(cè)可以雙擊改名為抽獎頁。

由于九宮格抽獎效果在畫布上的效果更好，可以點擊抽獎頁，然后在左側(cè)拓展組件中(下滑)找到畫布，點擊然后在中間畫一個差不多大小的矩形。

然后點擊畫布，設(shè)置一個背景顏色更醒目一點。當(dāng)然，為了美觀你也可以將畫布的寬高x,y設(shè)置一下。

接著可以在畫布中添加一個九宮格的背景圖(需要提前制作)。點擊畫布然后在組件列表選擇圖片，畫一個框加入之前準(zhǔn)備好的圖片，調(diào)整大小坐標(biāo)使其大概覆蓋畫布。

這樣背景就搞好啦，下面需要添加一些動作能讓他跑起來！

九宮格跑馬燈效果制作

如何實現(xiàn)一個跑 的效果呢？

跑的效果其實是一個九宮格其中之一大小格子旋轉(zhuǎn)移動的效果，所以事先思路也是先添加對應(yīng)矩形，然后對矩形添加移動事件即可。

我們首先在畫布下添加一個矩形，后將矩形坐標(biāo)大小可以調(diào)(這里為了演示就不搞那么精準(zhǔn)啦)。

然后點擊矩形，將背景顏色清空，然后適當(dāng)修改矩形邊框的大小。這樣，初始位置的矩形就設(shè)置好了，下面就需要添加一些軌跡動作。

接下來在畫布下添加一個時間軸，然后將我們剛剛跳動的矩形放到時間軸內(nèi)(右側(cè)對象樹可直接拖動)。

然后點擊右側(cè)對象樹的矩形，在左側(cè)的事件中添加軌跡 。然后點擊右側(cè)對象樹的時間軸將事件設(shè)置成8的整數(shù)倍數(shù)(因為這里要跳動8下)，方便設(shè)置每個跳動時間。點擊右側(cè)對象樹的軌跡，將軌跡類別設(shè)為逐幀 (因為九宮格抽獎都是跳的而不是連續(xù)的)，然后在時間軸上添加幀點。

關(guān)鍵幀設(shè)置完畢之后，我們需要在每個關(guān)鍵幀確定方塊移動到達的位置。按照順時針的順序在每個關(guān)鍵幀將矩形移動到應(yīng)該展示的位置?？稍O(shè)置對應(yīng)時刻具體的x和y。

這樣設(shè)置完畢之后，點擊啟動，是可以啟動的，但是跑起來的速度太慢了，我們需要加大倍速，點擊時間軸設(shè)置循環(huán)播放然后將播放倍數(shù)擴大到20倍，點擊開始這個動畫就能跑起來了！

確定停止時間

在上面我們詳細(xì)講解了如何讓馬燈跑起來，現(xiàn)在就需要再優(yōu)化一下界面，并且使它能夠停下來。我們首先優(yōu)化一下抽獎頁面，在畫布上添加一些文本到各個方格中，點擊畫布，然后在左側(cè)拓展組件選擇文本，賦值謝謝惠顧、各種獎項可以自己設(shè)置。當(dāng)然字體顏色也可自己隨意改動啊。

頁面做好之后可以準(zhǔn)備考慮啟動事件，我們可以通過按鈕這個啟動項讓頁面動起來，觸發(fā)一系列抽獎邏輯，點擊右側(cè)對象樹的抽獎頁，在左側(cè)拓展組件選擇按鈕，大小差不多覆蓋網(wǎng)格最中間的部分，然后在對象樹點擊這個按鈕，再點擊右側(cè)最上的事件，將按鈕觸發(fā)一個點擊事件，點擊與事件軸關(guān)聯(lián)播放、暫停。

這樣預(yù)覽的時候點擊按鈕就可以跑起來了，但是我們怎么讓它在某個時刻停下來呢？這里就需要時間軸的好幫手—時間標(biāo)記。我們可以在時間軸下添加一個時間標(biāo)記，可以在任意一個時刻停下來。在這里我就讓它停在三等獎的時間范圍內(nèi)，并且將這個時間標(biāo)記改名為三等獎。同時將左側(cè)默認(rèn)的暫停點取消。

然后我們需要在按鈕上繼續(xù)添加關(guān)聯(lián)，點擊按鈕的關(guān)聯(lián)事件，然后新添時間軸關(guān)聯(lián)，事件選擇播放某段時間段，結(jié)束時間就選擇對象樹種咱們剛剛選擇的記錄點(三等獎)，播放方向為正向。

這樣完成之后編譯點擊抽獎會發(fā)現(xiàn)跑馬燈能跑起來了！但是這個跑馬燈只能跑一圈到三等獎就停下來了，我們怎樣才能讓它多跑幾圈，實現(xiàn)一個真正跑馬燈抽獎的效果呢？答案也很簡單，我們依舊借助時間標(biāo)記，我們在時間軸下再添加一個時間標(biāo)記，并且將其暫停點也關(guān)掉、出發(fā)方向也改為正向，同時將它命名為記錄點 (將它時間挪到1-2s之間)。后面的事情就讓這個記錄點來幫我們完成。

然后我們準(zhǔn)備給這個記錄點添加一個事件之前，在畫布下添加一個數(shù)值變量圈數(shù)。然后點擊記錄點再點擊事件，可以選擇事件播放到標(biāo)記 。關(guān)聯(lián)的對象就是圈數(shù)讓每經(jīng)過這個點圈數(shù)+1。

同時還要將播放按鈕的事件播放到某時間段先注釋掉，讓它可以跑下去。我們將注釋的這個部分復(fù)制下來，添加到記錄點的條件中，這個條件就是停止的條件，我們讓圈數(shù)為6的時候執(zhí)行前面停下來的動作。

這樣編譯運行就能在我們想要的三等獎下停下來啦! 今天先分享到這里，大家也可以一起研究一下！

那么以上的話就是今天小編和大家分享有關(guān)于：“如何不用代碼實現(xiàn)一個九宮格抽獎功能效果？”這個問題的相關(guān)內(nèi)容，更多有關(guān)于html5這個方面的內(nèi)容我們都就可以在W3Cschool中進行學(xué)習(xí)！