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,
//转盘上的点击抽奖字样Label
inforLabel:cc.Label,
//旁边显示当前序号的Layout
resultLayout: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)
//记录序号表节点上的序号Label
this.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.rotation
this.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]元素（开始角度），并设置值为lastAngle
this.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 : [email protected]
# 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.rotation
this.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.lastAngle
this.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