前言

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

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

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

九宮格背景制作

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

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

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

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

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

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

九宮格跑馬燈效果制作

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

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

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

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

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

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

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

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

確定停止時間

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

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

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

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

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

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

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

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

到此這篇關(guān)于ivx平臺開發(fā)之不用代碼實(shí)現(xiàn)一個九宮格抽獎功能的文章就介紹到這了,更多相關(guān)ivx開發(fā)九宮格抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

到此這篇關(guān)于ivx平臺開發(fā)之不用代碼實(shí)現(xiàn)一個九宮格抽獎功能的文章就介紹到這了,更多相關(guān)ivx開發(fā)九宮格抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！