cocosCreator | 实例-制作抽奖池

[预览效果](https://saber2pr.github.io/MyWeb/build/RandPlat/build/web-mobile)

先看看层级结构

给guide节点添加3个动画clip

首先是rotationStart旋转开始

添加rotation属性

设置两个关键帧，rotation=45、rotation=405，

拖动红线到一个位置，改变节点rotation属性，即可设置关键帧。

下面，sample为帧数、speed为播放速度、WrapMode为播放模式，normal为正常、loop为循环等

然后设置缓动作

选择Ease In Sine

然后类似的做剩下的动画，

rotating、rotationFinish （其中rotating不需要缓动作但需要WrapMode为loop循环，rotationFinish需要Ease Out Sine）

random是这个抽奖池的根节点，给它挂上脚本组件

然后编写脚本RandPlat.js

先设置一些属性接口

cc.Class({extends: cc.Component,properties: {//奖品数组gifts: {//默认类型为数组default: [],//元素类型为cc.Sprite类型type: [cc.Sprite]},//guide旋转盘节点plat:cc.Node,//转盘上的点击抽奖字样LabelinforLabel:cc.Label,//旁边显示当前序号的LayoutresultLayout:cc.Node,},
})

拖入相应节点

然后在onload里初始化一些需要的值

cc.Class({extends: cc.Component,properties: {gifts: {default: [],type: [cc.Sprite]},plat:cc.Node,inforLabel:cc.Label,resultLayout:cc.Node,},//添加几个需要间接利用的属性originRota:null,animPlay:null,giftOrder:null,resultLabel:null,lastAngle:null,onLoad () {//记录转盘初始角度this.originRota = this.plat.rotation//记录转盘节点的动画组件this.animPlay = this.plat.getComponent(cc.Animation)//记录序号表节点上的序号Labelthis.resultLabel = this.resultLayout.getChildByName('result').getComponent(cc.Label)//初始化最后一次旋转角（下面会用到）this.lastAngle = this.originRota},
})

然后给转盘plat添加点击事件

cc.Class({extends: cc.Component,properties: {gifts: {default: [],type: [cc.Sprite]},plat:cc.Node,inforLabel:cc.Label,resultLayout:cc.Node,},originRota:null,animPlay:null,giftOrder:null,resultLabel:null,lastAngle:null,onLoad () {this.originRota = this.plat.rotationthis.animPlay = this.plat.getComponent(cc.Animation)this.resultLabel = this.resultLayout.getChildByName('result').getComponent(cc.Label)this.lastAngle = this.originRota},start () {//当点击时this.plat.on("touchstart", function(){cc.log('click')//开始播放旋转动画this.startPlay()}, this)},
})

然后我们实现startPlay方法

//开始抽奖startPlay(){ cc.log('startPlay')//取得播放信息       var stateStart = this.animPlay.play('rotationStart')//从播放信息得到旋转角度数组的[0]元素（开始角度），并设置值为lastAnglethis.getAngleClip(stateStart)[0] = this.lastAngle//转盘plat上面的label提示“等待结果”this.inforLabel.string = '等待\n结果'//设置定时器，“rotationStart”播放完播放“rotating”//stateStart.duration为“rotationStart”播放时长this.scheduleOnce(function(){this.processPlay()}, stateStart.duration)},

然后实现getAngleClip方法和processPlay方法

    //得到rotationClip的旋转值数组getAngleClip(state){return state.curves[0].values},

    //正在抽奖processPlay(){cc.log('stateProcess')var stateProcess = this.animPlay.play('rotating')this.scheduleOnce(function(){//计时结束播放“rotationFinish”动画this.finishPlay()}, stateProcess.duration)},

现在点击转盘可以旋转但是奖品还没有效果

在渲染函数update里添加渲染函数回调

update (dt) {//当前角度映射到序号this.giftOrder = this.inforRotation(this.plat.rotation-this.originRota)//高亮该序号奖品this.highLightGift(this.giftOrder)//刷新序号Layout上的显示this.getResult()
},

现在实现旋转角度和奖品的映射关系

//根据角度得到序号
inforRotation(rotation){//角度 = 角度 - 360 * 圈数var _rotation = rotation - 360 * this.getRounds(rotation)// “360 / this.gifts.length” 为步长return parseInt(_rotation / (360 / this.gifts.length) )
},

//得到圈数
getRounds(rotation){return parseInt(rotation / 360)
},

//高亮奖品
highLightGift(order){//刷新所有奖品颜色为初始颜色this.refreshColor()//设置该序号奖品节点高亮this.gifts[order].node.color = cc.Color.GREEN
},

//刷新
refreshColor(){//遍历奖品数组for(var _order = 0; _order < this.gifts.length; _order++){//设为白色this.gifts[_order].node.color = cc.Color.WHITE}
},

    //显示结果getResult(){//设置序号表label显示this.resultLabel.string = this.giftOrder + 1},

最后实现随机停止得出结果finishPlay方法

    //停止抽奖finishPlay(){cc.log('finishPlay')var stateFinish = this.animPlay.play('rotationFinish')//再次旋转时，从上次的位置开始this.getAngleClip(stateFinish)[1] = this.originRota + this.randAngle()this.scheduleOnce(function(){//plat转盘字样变为“再次抽奖”this.inforLabel.string = '再次\n抽奖'//记录停止的角度this.lastAngle = this.getAngleClip(stateFinish)[1]}, stateFinish.duration)},

实现随机角度

    //随机角度randAngle(){return parseInt(360 * cc.random0To1())},

最后代码应该是这样

/**************************************************# Author       :  AK-12# Last modified:  2018-09-14 15:51# Email        :  saber2pr@gmail.com# github       :  https://github.com/Saber2pr# Filename     :  RandPlat.js# Description  :
**************************************************/
cc.Class({extends: cc.Component,properties: {gifts: {default: [],type: [cc.Sprite]},plat:cc.Node,inforLabel:cc.Label,resultLayout:cc.Node,},originRota:null,animPlay:null,giftOrder:null,resultLabel:null,lastAngle:null,onLoad () {this.originRota = this.plat.rotationthis.animPlay = this.plat.getComponent(cc.Animation)this.resultLabel = this.resultLayout.getChildByName('result').getComponent(cc.Label)this.lastAngle = this.originRota},start () {this.plat.on("touchstart", function(){cc.log('click')this.startPlay()}, this)},update (dt) {this.giftOrder = this.inforRotation(this.plat.rotation-this.originRota)this.highLightGift(this.giftOrder)this.getResult()},//随机角度randAngle(){return parseInt(360 * cc.random0To1())},//开始抽奖startPlay(){ cc.log('startPlay')       var stateStart = this.animPlay.play('rotationStart')this.getAngleClip(stateStart)[0] = this.lastAnglethis.inforLabel.string = '等待\n结果'this.scheduleOnce(function(){this.processPlay()}, stateStart.duration)},//正在抽奖processPlay(){cc.log('stateProcess')var stateProcess = this.animPlay.play('rotating')this.scheduleOnce(function(){this.finishPlay()}, stateProcess.duration)},//得到rotationClip的旋转值数组getAngleClip(state){return state.curves[0].values},//停止抽奖finishPlay(){cc.log('finishPlay')var stateFinish = this.animPlay.play('rotationFinish')this.getAngleClip(stateFinish)[1] = this.originRota + this.randAngle()this.scheduleOnce(function(){this.inforLabel.string = '再次\n抽奖'this.lastAngle = this.getAngleClip(stateFinish)[1]}, stateFinish.duration)cc.log(stateFinish)},//得到圈数getRounds(rotation){return parseInt(rotation / 360)},//得到序号inforRotation(rotation){var _rotation = rotation - 360 * this.getRounds(rotation)return parseInt(_rotation / (360 / this.gifts.length) )},//刷新refreshColor(){for(var _order = 0; _order < this.gifts.length; _order++){this.gifts[_order].node.color = cc.Color.WHITE}},//高亮奖品highLightGift(order){this.refreshColor()this.gifts[order].node.color = cc.Color.GREEN},//停止结果getResult(){this.resultLabel.string = this.giftOrder + 1},});

github地址

https://github.com/Saber2pr/CocosCreatorExam

cocosCreator | 实例-制作抽奖池相关推荐

Cocos Creator实例-制作抽奖池
出现空白,请点击下方[] 转载地址:https://blog.csdn.net/u011607490/article/details/82701325 [预览效果](https://saber2pr. ...
android自定义抽奖,Android自定义view制作抽奖转盘
本文实例为大家分享了Android自定义view制作抽奖转盘的具体代码,供大家参考,具体内容如下效果图 TurntableActivity package com.bawei.myapplicati ...
python 制作抽奖_python制作抽奖程序代码详解
实现制作抽奖程序,需要认知到我们可以看到一般抽奖程序界面上是有很多按钮的,比如中奖区域,按键开始区域等等,所以我们先要设置界面,然后把这些按钮添加到界面中去,想必这对于学过tkinter的同学应该不难 ...
5、抽奖池抽奖线程管理实现
编程题目: 5.有一个抽奖池,该抽奖池中存放了奖励的金额,该抽奖池用一个数组: int[] arr = {10,5,20,50,100,200,500,800,2,80,300}; 创建两个抽奖箱(线 ...
rand()函数100000随机数_利用随机函数Rand、Randbetween制作抽奖器应用技巧解读
在Excel系统中,随机数函数有两个,分别为Rand和Randbetween,其作用也是不相同的,Rank函数的作用为生成0-1之间的随机数,而Randbetween函数的作用为生成指定范围内的随机数 ...
原神服务器维护后抽奖池会更新吗,原神：更新维护一小时，补偿60原石，玩家祈求多维护几天！...
10月21号,原神社区发布公告,游戏将会在10月22号7点至11点进行停服维护,所有玩家在这个时间段将无法进入游戏.而作为补偿,官方会赠送5级以上的玩家240原石(停服一小时送60原石).这是偷偷的更 ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
软件测试自学毛笔字纹身,ps纹身教程_photoshop给人物添加纹身效果实例制作教程...
摘要腾兴网为您分享:photoshop给人物添加纹身效果实例制作教程,智学网,找乐助手,有道英语,易推广等软件知识,以及安卓测试软件,星露谷物语,店宝宝软件,乐播投屏软件,光棍证,查查看,国家工作人 ...
python 制作抽奖箱_抽奖箱怎么做
举办活动需要有能够吸引人的地方,而抽奖是活动最常用的互动方式了.抽奖箱是活动必备的道具,那抽奖箱是怎么制作出来的呢?设计用电脑设计出抽奖箱的图片.抽奖. 找个硬的纸盒,在纸盒其中一面上挖个圆如何形的洞 ...

cocosCreator | 实例-制作抽奖池

cocosCreator | 实例-制作抽奖池相关推荐

最新文章

热门文章