大转盘(CocosCreator)

简介: 大转盘(CocosCreator)
推荐阅读:

1.在场景中搭建大转盘场景,假设
奖项有n项,对应的每项旋转角度如下:

第几项 需要旋转的角度
0 360/n/2
1 360/n+第0项角度
2 360/n+第1项角度
... ...

例如:奖项一共6项

第几项 需要旋转的角度
0 360/n/2=30
1 360/n+第一项角度 =30+60=90
2 90+60=150
3 210
4 270
5 330
... ...

2.代码控制大转盘的转动
大转盘的思想:预先给定一个本轮大转盘的奖项的下标,然后再随机一个该奖项的角度,核心代码:

var angle = app.random((idx + 1) * (-60) + 10 + 360, (idx + 0) * (-60) - 10 + 360, false) + 1800;

其中,60代表360/n,上面可以当成一个公式使用。
旋转函数代码:

    /// 转动大转盘,idx表示奖项的下标
    rollPanel(idx, call) {
        var self = this;
        self.uiRoot.close.active = false;
        self.uiRoot.begin.enabled = false;
        var angle = app.random((idx + 1) * (-60) + 10 + 360, (idx + 0) * (-60) - 10 + 360, false) + 1800;
        var rot1 = cc.rotateTo(5, angle).easing(cc.easeExponentialInOut(10.0));
        var call1 = app.callFunc(function (adt) { self.uiRoot.close.active = true; self.uiRoot.begin.enabled = true; if (call) { call(); } });
        this.uiRoot.panel.root.stopAllActions();
        this.uiRoot.panel.root.rotation %= 360;
        this.uiRoot.panel.root.runAction(cc.sequence(rot1, call1));
    },
相关文章
|
小程序
微信小程序项目实例——幸运大转盘
微信小程序项目实例——幸运大转盘
|
小程序 JavaScript 前端开发
微信小程序 |从零实现酷炫纸质翻页效果
微信小程序 |从零实现酷炫纸质翻页效果
2108 0
微信小程序 |从零实现酷炫纸质翻页效果
|
7月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
137 0
|
7月前
|
小程序
大转盘抽奖小程序源码
大转盘抽奖小程序源码,测试依旧可用,无BUG,跑马灯旋转效果,非常酷炫。
107 1
|
7月前
|
JSON 小程序 数据格式
【经验分享】支付宝小程序lottie动画尝鲜
【经验分享】支付宝小程序lottie动画尝鲜
208 6
|
开发工具
女朋友想要听歌,我反手用Flutter做了2个音乐播放器,给她拿捏了🎧
有很多小伙伴和我说,网上关于Flutter的音乐播放器资料太少了,我反手掉了10根头发给他们做了这样的音乐播放器,你就说得不得劲吧😎
女朋友想要听歌,我反手用Flutter做了2个音乐播放器,给她拿捏了🎧
|
小程序
微信小程序项目实例——双人五子棋
微信小程序项目实例——双人五子棋
|
小程序 JavaScript
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
287 0
|
JSON iOS开发 数据格式
iOS开发 - 关于启动页动画的杂谈
iOS开发 - 关于启动页动画的杂谈
263 0
iOS开发 - 关于启动页动画的杂谈
|
存储 数据处理
签到(CocosCreator)
签到(CocosCreator)
签到(CocosCreator)