大转盘(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 前端开发
微信小程序 |从零实现酷炫纸质翻页效果
微信小程序 |从零实现酷炫纸质翻页效果
2098 0
微信小程序 |从零实现酷炫纸质翻页效果
|
2月前
|
Rust 前端开发 iOS开发
打造《黑神话:悟空》壁纸软件:使用 Tauri 快速上手
本文首发于微信公众号“前端徐徐”。作者分享了如何仅用半天时间实现《黑神话:悟空》桌面壁纸软件的过程,并展示了实际效果。文中详细介绍了使用 Tauri 开发跨平台桌面应用的核心流程与关键技术,包括下载壁纸、更换壁纸以及前后端交互等细节。此外,还提供了源码和下载链接供读者体验。
28 0
打造《黑神话:悟空》壁纸软件:使用 Tauri 快速上手
|
4月前
|
前端开发
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
|
7月前
|
JavaScript
【UI】 欢快畅游的小鱼特效
【UI】 欢快畅游的小鱼特效
48 1
|
小程序
微信小程序项目实例——双人五子棋
微信小程序项目实例——双人五子棋
|
小程序
微信小程序项目实例——我有一支画笔(画画)
微信小程序项目实例——我有一支画笔(画画)
|
前端开发 程序员 atlas
818 3D 跑酷开发总结
818 3D 跑酷开发总结
125 0
|
存储 数据处理
签到(CocosCreator)
签到(CocosCreator)
签到(CocosCreator)