今天小編就來和大家討論有關(guān)于：“如何不用代碼實(shí)現(xiàn)一個(gè)九宮格抽獎(jiǎng)功能效果？”這個(gè)問題要怎么實(shí)現(xiàn)，下面是小編通過各種方式整理的有關(guān)于這個(gè)問題實(shí)現(xiàn)的方法和內(nèi)容！
前言
上次說過在看一些關(guān)于0代碼開發(fā)平臺(tái)ivx，前一段時(shí)間忙完考試最近跟著教程0代碼實(shí)現(xiàn)一個(gè)九宮格抽獎(jiǎng)，哈哈哈感覺還是蠻強(qiáng)大的，懂點(diǎn)的人都知道可視化這個(gè)東西我們正常都是用一些包或者庫來實(shí)現(xiàn)數(shù)據(jù)可視化。而可視化編程我們可能還停留在Dreamweaver和安卓xml編程上。如果寫過GUI或者之類就知道任何一個(gè)可視化操作的任務(wù)量是非常巨大的，所以內(nèi)心還是很欽佩出這么一個(gè)東西。并且這個(gè)可視化不錯(cuò)的(上手需要一點(diǎn)時(shí)間)。
對(duì)于九宮格抽獎(jiǎng)問題，要清楚并不是真正的前端界面去抽獎(jiǎng)，而是后端生成一個(gè)數(shù)據(jù)前端九宮格根據(jù)這個(gè)數(shù)據(jù)去跑成一個(gè)這么結(jié)果的效果。下面就把個(gè)人實(shí)現(xiàn)的一個(gè)抽獎(jiǎng)小程序?qū)崿F(xiàn)過程記錄一下，大家也可以嘗試一下，因?yàn)椴簧婕按a可能截圖更多。當(dāng)然，由于這部分如果完整實(shí)現(xiàn)設(shè)計(jì)的內(nèi)容太多可能使讀者失去興趣，我將一些簡(jiǎn)單的步驟先截圖描述大家可以跟著做，后面更完善的功能可以看這個(gè)教學(xué)視頻。
試了一下可能剛開始了解稍微復(fù)雜一點(diǎn)各個(gè)按鈕不熟悉，跟著教程一步步來慢慢會(huì)熟悉一點(diǎn)。后續(xù)也可能會(huì)使用ivx平臺(tái)實(shí)現(xiàn)一些后臺(tái)管理或者一些簡(jiǎn)單的小程序。
九宮格背景制作
首先登錄ivx平臺(tái)，進(jìn)入控制臺(tái)，新建一個(gè)WebApp、小程序。
創(chuàng)建完畢之后在前臺(tái)創(chuàng)建一個(gè)頁面(點(diǎn)擊一下頁面圖標(biāo)即可)，然后在右側(cè)可以雙擊改名為抽獎(jiǎng)頁。
由于九宮格抽獎(jiǎng)效果在畫布上的效果更好，可以點(diǎn)擊抽獎(jiǎng)頁，然后在左側(cè)拓展組件中(下滑)找到畫布，點(diǎn)擊然后在中間畫一個(gè)差不多大小的矩形。
然后點(diǎn)擊畫布，設(shè)置一個(gè)背景顏色更醒目一點(diǎn)。當(dāng)然，為了美觀你也可以將畫布的寬高x,y設(shè)置一下。
接著可以在畫布中添加一個(gè)九宮格的背景圖(需要提前制作)。點(diǎn)擊畫布然后在組件列表選擇圖片，畫一個(gè)框加入之前準(zhǔn)備好的圖片，調(diào)整大小坐標(biāo)使其大概覆蓋畫布。
這樣背景就搞好啦，下面需要添加一些動(dòng)作能讓他跑起來！
九宮格跑馬燈效果制作
如何實(shí)現(xiàn)一個(gè)跑 的效果呢？
跑的效果其實(shí)是一個(gè)九宮格其中之一大小格子旋轉(zhuǎn)移動(dòng)的效果，所以事先思路也是先添加對(duì)應(yīng)矩形，然后對(duì)矩形添加移動(dòng)事件即可。
我們首先在畫布下添加一個(gè)矩形，后將矩形坐標(biāo)大小可以調(diào)(這里為了演示就不搞那么精準(zhǔn)啦)。
然后點(diǎn)擊矩形，將背景顏色清空，然后適當(dāng)修改矩形邊框的大小。這樣，初始位置的矩形就設(shè)置好了，下面就需要添加一些軌跡動(dòng)作。
接下來在畫布下添加一個(gè)時(shí)間軸，然后將我們剛剛跳動(dòng)的矩形放到時(shí)間軸內(nèi)(右側(cè)對(duì)象樹可直接拖動(dòng))。
然后點(diǎn)擊右側(cè)對(duì)象樹的矩形，在左側(cè)的事件中添加軌跡 。然后點(diǎn)擊右側(cè)對(duì)象樹的時(shí)間軸將事件設(shè)置成8的整數(shù)倍數(shù)(因?yàn)檫@里要跳動(dòng)8下)，方便設(shè)置每個(gè)跳動(dòng)時(shí)間。點(diǎn)擊右側(cè)對(duì)象樹的軌跡，將軌跡類別設(shè)為逐幀 (因?yàn)榫艑m格抽獎(jiǎng)都是跳的而不是連續(xù)的)，然后在時(shí)間軸上添加幀點(diǎn)。
關(guān)鍵幀設(shè)置完畢之后，我們需要在每個(gè)關(guān)鍵幀確定方塊移動(dòng)到達(dá)的位置。按照順時(shí)針的順序在每個(gè)關(guān)鍵幀將矩形移動(dòng)到應(yīng)該展示的位置。可設(shè)置對(duì)應(yīng)時(shí)刻具體的x和y。
這樣設(shè)置完畢之后，點(diǎn)擊啟動(dòng)，是可以啟動(dòng)的，但是跑起來的速度太慢了，我們需要加大倍速，點(diǎn)擊時(shí)間軸設(shè)置循環(huán)播放然后將播放倍數(shù)擴(kuò)大到20倍，點(diǎn)擊開始這個(gè)動(dòng)畫就能跑起來了！
確定停止時(shí)間
在上面我們?cè)敿?xì)講解了如何讓馬燈跑起來，現(xiàn)在就需要再優(yōu)化一下界面，并且使它能夠停下來。我們首先優(yōu)化一下抽獎(jiǎng)頁面，在畫布上添加一些文本到各個(gè)方格中，點(diǎn)擊畫布，然后在左側(cè)拓展組件選擇文本，賦值謝謝惠顧、各種獎(jiǎng)項(xiàng)可以自己設(shè)置。當(dāng)然字體顏色也可自己隨意改動(dòng)啊。
頁面做好之后可以準(zhǔn)備考慮啟動(dòng)事件，我們可以通過按鈕這個(gè)啟動(dòng)項(xiàng)讓頁面動(dòng)起來，觸發(fā)一系列抽獎(jiǎng)邏輯，點(diǎn)擊右側(cè)對(duì)象樹的抽獎(jiǎng)頁，在左側(cè)拓展組件選擇按鈕，大小差不多覆蓋網(wǎng)格最中間的部分，然后在對(duì)象樹點(diǎn)擊這個(gè)按鈕，再點(diǎn)擊右側(cè)最上的事件，將按鈕觸發(fā)一個(gè)點(diǎn)擊事件，點(diǎn)擊與事件軸關(guān)聯(lián)播放、暫停。
這樣預(yù)覽的時(shí)候點(diǎn)擊按鈕就可以跑起來了，但是我們?cè)趺醋屗谀硞€(gè)時(shí)刻停下來呢？這里就需要時(shí)間軸的好幫手—時(shí)間標(biāo)記。我們可以在時(shí)間軸下添加一個(gè)時(shí)間標(biāo)記，可以在任意一個(gè)時(shí)刻停下來。在這里我就讓它停在三等獎(jiǎng)的時(shí)間范圍內(nèi)，并且將這個(gè)時(shí)間標(biāo)記改名為三等獎(jiǎng)。同時(shí)將左側(cè)默認(rèn)的暫停點(diǎn)取消。
然后我們需要在按鈕上繼續(xù)添加關(guān)聯(lián)，點(diǎn)擊按鈕的關(guān)聯(lián)事件，然后新添時(shí)間軸關(guān)聯(lián)，事件選擇播放某段時(shí)間段，結(jié)束時(shí)間就選擇對(duì)象樹種咱們剛剛選擇的記錄點(diǎn)(三等獎(jiǎng))，播放方向?yàn)檎颉?/p>
這樣完成之后編譯點(diǎn)擊抽獎(jiǎng)會(huì)發(fā)現(xiàn)跑馬燈能跑起來了！但是這個(gè)跑馬燈只能跑一圈到三等獎(jiǎng)就停下來了，我們?cè)鯓硬拍茏屗嗯軒兹?，?shí)現(xiàn)一個(gè)真正跑馬燈抽獎(jiǎng)的效果呢？答案也很簡(jiǎn)單，我們依舊借助時(shí)間標(biāo)記，我們?cè)跁r(shí)間軸下再添加一個(gè)時(shí)間標(biāo)記，并且將其暫停點(diǎn)也關(guān)掉、出發(fā)方向也改為正向，同時(shí)將它命名為記錄點(diǎn) (將它時(shí)間挪到1-2s之間)。后面的事情就讓這個(gè)記錄點(diǎn)來幫我們完成。
然后我們準(zhǔn)備給這個(gè)記錄點(diǎn)添加一個(gè)事件之前，在畫布下添加一個(gè)數(shù)值變量圈數(shù)。然后點(diǎn)擊記錄點(diǎn)再點(diǎn)擊事件，可以選擇事件播放到標(biāo)記 。關(guān)聯(lián)的對(duì)象就是圈數(shù)讓每經(jīng)過這個(gè)點(diǎn)圈數(shù)+1。
同時(shí)還要將播放按鈕的事件播放到某時(shí)間段先注釋掉，讓它可以跑下去。我們將注釋的這個(gè)部分復(fù)制下來，添加到記錄點(diǎn)的條件中，這個(gè)條件就是停止的條件，我們讓圈數(shù)為6的時(shí)候執(zhí)行前面停下來的動(dòng)作。
這樣編譯運(yùn)行就能在我們想要的三等獎(jiǎng)下停下來啦! 今天先分享到這里，大家也可以一起研究一下！
那么以上的話就是今天小編和大家分享有關(guān)于：“如何不用代碼實(shí)現(xiàn)一個(gè)九宮格抽獎(jiǎng)功能效果？”這個(gè)問題的相關(guān)內(nèi)容，更多有關(guān)于html5這個(gè)方面的內(nèi)容我們都就可以在W3Cschool中進(jìn)行學(xué)習(xí)！
