今天小編就來和大家討論有關(guān)于：“如何不用代碼實(shí)現(xiàn)一個九宮格抽獎功能效果？”這個問題要怎么實(shí)現(xiàn)，下面是小編通過各種方式整理的有關(guān)于這個問題實(shí)現(xiàn)的方法和內(nèi)容！
前言
上次說過在看一些關(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è)計的內(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è)拓展組件選擇文本，賦值謝謝惠顧、各種獎項可以自己設(shè)置。當(dāng)然字體顏色也可自己隨意改動啊。
頁面做好之后可以準(zhǔn)備考慮啟動事件，我們可以通過按鈕這個啟動項讓頁面動起來，觸發(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)于：“如何不用代碼實(shí)現(xiàn)一個九宮格抽獎功能效果？”這個問題的相關(guān)內(nèi)容，更多有關(guān)于html5這個方面的內(nèi)容我們都就可以在W3Cschool中進(jìn)行學(xué)習(xí)！
