ButtonManager.ts 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import { _decorator, Component, Node, Button, Tween, tween, Vec3 } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. @ccclass('ButtonManager')
  4. export class ButtonManager extends Component {
  5. private static _instance: ButtonManager = null;
  6. @property({ type: [Button], displayName: "按钮数组" })
  7. public buttons: Button[] = [];
  8. // 动画参数
  9. private readonly SCALE_DOWN = 0.85; // 缩小到原来的0.85倍(相当于缩小1.5倍的倒数)
  10. private readonly ANIMATION_DURATION = 0.1; // 动画持续时间
  11. public static get instance(): ButtonManager {
  12. return ButtonManager._instance;
  13. }
  14. onLoad() {
  15. // 设置单例
  16. if (ButtonManager._instance === null) {
  17. ButtonManager._instance = this;
  18. } else {
  19. this.destroy();
  20. return;
  21. }
  22. // 初始化按钮事件
  23. this.initButtonEvents();
  24. }
  25. onDestroy() {
  26. if (ButtonManager._instance === this) {
  27. ButtonManager._instance = null;
  28. }
  29. }
  30. private initButtonEvents() {
  31. this.buttons.forEach((button, index) => {
  32. if (button && button.node) {
  33. // 添加点击事件监听
  34. button.node.on(Button.EventType.CLICK, () => {
  35. this.playClickAnimation(button.node);
  36. }, this);
  37. // 确保按钮初始缩放为1
  38. button.node.setScale(Vec3.ONE);
  39. }
  40. });
  41. }
  42. /**
  43. * 播放按钮点击动画
  44. * @param buttonNode 按钮节点
  45. */
  46. private playClickAnimation(buttonNode: Node) {
  47. if (!buttonNode) return;
  48. // 停止之前的动画
  49. Tween.stopAllByTarget(buttonNode);
  50. // 创建缩放动画:先缩小到0.85倍,然后回到原来大小
  51. tween(buttonNode)
  52. .to(this.ANIMATION_DURATION, { scale: new Vec3(this.SCALE_DOWN, this.SCALE_DOWN, 1) })
  53. .to(this.ANIMATION_DURATION, { scale: Vec3.ONE })
  54. .start();
  55. }
  56. /**
  57. * 手动添加按钮到管理器
  58. * @param button 要添加的按钮
  59. */
  60. public addButton(button: Button) {
  61. if (button && this.buttons.indexOf(button) === -1) {
  62. this.buttons.push(button);
  63. // 为新添加的按钮设置事件
  64. if (button.node) {
  65. button.node.on(Button.EventType.CLICK, () => {
  66. this.playClickAnimation(button.node);
  67. }, this);
  68. button.node.setScale(Vec3.ONE);
  69. }
  70. }
  71. }
  72. /**
  73. * 从管理器中移除按钮
  74. * @param button 要移除的按钮
  75. */
  76. public removeButton(button: Button) {
  77. const index = this.buttons.indexOf(button);
  78. if (index !== -1) {
  79. // 移除事件监听
  80. if (button.node) {
  81. button.node.off(Button.EventType.CLICK, this.playClickAnimation, this);
  82. }
  83. this.buttons.splice(index, 1);
  84. }
  85. }
  86. /**
  87. * 清空所有按钮
  88. */
  89. public clearAllButtons() {
  90. this.buttons.forEach(button => {
  91. if (button && button.node) {
  92. button.node.off(Button.EventType.CLICK, this.playClickAnimation, this);
  93. }
  94. });
  95. this.buttons = [];
  96. }
  97. }