topbar hover 效果

assets/Scene.ls

@@ -59,6 +59,7 @@
       "y": 1020,
       "width": 200,
       "height": 60,
+      "visible": false,
       "bottom": 0,
       "centerX": 0,
       "_$comp": [

assets/resources/TopBar.lh

@@ -61,7 +61,8 @@
           "_$comp": [
             {
               "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-              "scriptPath": "../src/views/common/CommonHover.ts"
+              "scriptPath": "../src/views/common/CommonHover.ts",
+              "hoverAlpha": true
             }
           ],
           "_$child": [
@@ -119,7 +120,8 @@
           "_$comp": [
             {
               "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-              "scriptPath": "../src/views/common/CommonHover.ts"
+              "scriptPath": "../src/views/common/CommonHover.ts",
+              "hoverAlpha": true
             }
           ],
           "_$child": [
@@ -221,10 +223,6 @@
                   "scriptPath": "../src/views/common/CommonData.ts",
                   "intValue": 0,
                   "strValue": ""
-                },
-                {
-                  "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-                  "scriptPath": "../src/views/common/CommonHover.ts"
                 }
               ],
               "_$child": [
@@ -248,7 +246,6 @@
                       "rb": 12,
                       "percent": true,
                       "lineWidth": 5,
-                      "lineColor": "rgba(14, 42, 83, 1)",
                       "fillColor": "rgba(245, 247, 251, 1)"
                     }
                   ]
@@ -285,10 +282,6 @@
                   "scriptPath": "../src/views/common/CommonData.ts",
                   "intValue": 0,
                   "strValue": ""
-                },
-                {
-                  "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-                  "scriptPath": "../src/views/common/CommonHover.ts"
                 }
               ],
               "_$child": [
@@ -312,7 +305,6 @@
                       "rb": 12,
                       "percent": true,
                       "lineWidth": 5,
-                      "lineColor": "rgba(14, 42, 83, 1)",
                       "fillColor": "rgba(245, 247, 251, 1)"
                     }
                   ]
@@ -349,10 +341,6 @@
                   "scriptPath": "../src/views/common/CommonData.ts",
                   "intValue": 0,
                   "strValue": ""
-                },
-                {
-                  "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-                  "scriptPath": "../src/views/common/CommonHover.ts"
                 }
               ],
               "_$child": [
@@ -376,7 +364,6 @@
                       "rb": 12,
                       "percent": true,
                       "lineWidth": 5,
-                      "lineColor": "rgba(14, 42, 83, 1)",
                       "fillColor": "rgba(245, 247, 251, 1)"
                     }
                   ]
@@ -413,10 +400,6 @@
                   "scriptPath": "../src/views/common/CommonData.ts",
                   "intValue": 0,
                   "strValue": ""
-                },
-                {
-                  "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-                  "scriptPath": "../src/views/common/CommonHover.ts"
                 }
               ],
               "_$child": [
@@ -440,7 +423,6 @@
                       "rb": 12,
                       "percent": true,
                       "lineWidth": 5,
-                      "lineColor": "rgba(14, 42, 83, 1)",
                       "fillColor": "rgba(245, 247, 251, 1)"
                     }
                   ]
@@ -477,10 +459,6 @@
                   "scriptPath": "../src/views/common/CommonData.ts",
                   "intValue": 0,
                   "strValue": ""
-                },
-                {
-                  "_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
-                  "scriptPath": "../src/views/common/CommonHover.ts"
                 }
               ],
               "_$child": [
@@ -504,7 +482,6 @@
                       "rb": 12,
                       "percent": true,
                       "lineWidth": 5,
-                      "lineColor": "rgba(14, 42, 83, 1)",
                       "fillColor": "rgba(245, 247, 251, 1)"
                     }
                   ]

src/views/TopBar.ts

@@ -36,7 +36,6 @@ export class TopBar extends Laya.Script {
   @property(Laya.Box)
   public obj_items: Laya.Box
 
-  private item_sprites: Map<string, Laya.Sprite> = new Map()
   private item_labels: Map<string, Laya.Label> = new Map()
 
   onStart(): void {
@@ -79,9 +78,9 @@ export class TopBar extends Laya.Script {
 
     for (let i = 0; i < this.obj_items.numChildren; i++) {
       const obj = this.obj_items.getChildAt(i)
+      obj.on(Laya.Event.MOUSE_OVER, this, this.onOver)
+      obj.on(Laya.Event.MOUSE_OUT, this, this.onOut)
       const value = config.DIFFICULTY_LIST[i]
-      const sprite = obj.getChildByName("Sprite") as Laya.Sprite
-      this.item_sprites.set(value, sprite)
       const label = obj.getChildByName("Label") as Laya.Label
       label.text = value
       this.item_labels.set(value, label)
@@ -143,18 +142,25 @@ export class TopBar extends Laya.Script {
   }
 
   updateDifficulty(difficulty: string): void {
-    this.item_sprites.forEach((sprite: Laya.Sprite) => {
-      sprite.graphics.clear()
-      sprite.graphics.drawRoundRect(0, 0, sprite.width, sprite.height, 12, 12, 12, 12, "#f5f7fb", "#0e2a53", 5)
-    })
-    const sprite = this.item_sprites.get(difficulty)
-    sprite.graphics.clear()
-    sprite.graphics.drawRoundRect(0, 0, sprite.width, sprite.height, 12, 12, 12, 12, "#f5f7fb", "#1d5cdc", 5)
-
     this.item_labels.forEach((label: Laya.Label) => {
       label.color = "#0e2a53"
     })
     const label = this.item_labels.get(difficulty)
     label.color = "#1d5cdc"
   }
+
+  onOver(evt: Laya.Event): void {
+    const Box = evt.target as Laya.Box
+    const sprite = Box.getChildByName("Sprite") as Laya.Sprite
+    sprite.graphics.clear()
+    sprite.graphics.drawRoundRect(0, 0, sprite.width, sprite.height, 12, 12, 12, 12, "#0e2a53")
+  }
+
+  onOut(evt: Laya.Event): void {
+    const Box = evt.target as Laya.Box
+    const sprite = Box.getChildByName("Sprite") as Laya.Sprite
+    sprite.graphics.clear()
+    sprite.graphics.drawRoundRect(0, 0, sprite.width, sprite.height, 12, 12, 12, 12, "#f5f7fb")
+  }
+
 }