优化hover效果

This commit is contained in:
2025-05-30 16:43:00 +08:00
parent 73342c1f77
commit 84d1ac4798
9 changed files with 132 additions and 65 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -0,0 +1,6 @@
{
"uuid": "d8b02de6-eee7-47ea-b227-d6dbffdadae3",
"importer": {
"textureType": 2
}
}

View File

@@ -104,6 +104,12 @@
"y": -12,
"width": 412,
"height": 120,
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
}
],
"_$child": [
{
"_$id": "he6hpns9",
@@ -159,6 +165,12 @@
"y": -12,
"width": 412,
"height": 120,
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
}
],
"_$child": [
{
"_$id": "bqp1fe7k",
@@ -213,9 +225,15 @@
"name": "toggle",
"x": 320,
"y": 424,
"width": 42,
"width": 330,
"height": 42,
"bottom": 54,
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
}
],
"_$child": [
{
"_$id": "74puwx15",
@@ -247,8 +265,7 @@
"name": "Image",
"width": 43,
"height": 42,
"centerX": 0,
"centerY": 0,
"mouseThrough": true,
"skin": "res://6f23a1ca-70f5-467a-afc3-5b178a851423",
"useSourceSize": true,
"color": "#ffffff"
@@ -261,9 +278,7 @@
"y": 2,
"width": 400,
"height": 42,
"left": 54,
"centerY": 2,
"text": "Don't ask me agin",
"text": "Don't ask me again",
"font": "res://7322bbf9-175b-4a25-a0d7-72d369894de2",
"fontSize": 30,
"color": "rgba(84, 89, 98, 1)",

View File

@@ -76,7 +76,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -110,7 +111,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
]
}
@@ -44315,7 +44317,6 @@
"width": 196,
"height": 192,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"label": "",
"labelSize": 20,
@@ -44324,7 +44325,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44369,7 +44371,6 @@
"width": 196,
"height": 192,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"label": "",
"labelSize": 20,
@@ -44378,7 +44379,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44424,7 +44426,6 @@
"width": 196,
"height": 192,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"label": "",
"labelSize": 20,
@@ -44433,7 +44434,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44535,7 +44537,6 @@
"width": 196,
"height": 192,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"label": "",
"labelSize": 20,
@@ -44544,7 +44545,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44735,7 +44737,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44833,7 +44836,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44931,7 +44935,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45040,7 +45045,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45138,7 +45144,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45236,7 +45243,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45345,7 +45353,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45443,7 +45452,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45541,7 +45551,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [

View File

@@ -44035,8 +44035,7 @@
"width": 220,
"height": 150,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"skin": "res://d8b02de6-eee7-47ea-b227-d6dbffdadae3",
"label": "",
"labelSize": 20,
"labelAlign": "center",
@@ -44044,7 +44043,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44089,8 +44089,7 @@
"width": 220,
"height": 150,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"skin": "res://d8b02de6-eee7-47ea-b227-d6dbffdadae3",
"label": "",
"labelSize": 20,
"labelAlign": "center",
@@ -44098,7 +44097,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44143,8 +44143,7 @@
"width": 220,
"height": 150,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"skin": "res://d8b02de6-eee7-47ea-b227-d6dbffdadae3",
"label": "",
"labelSize": 20,
"labelAlign": "center",
@@ -44152,7 +44151,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44254,8 +44254,7 @@
"width": 220,
"height": 150,
"_mouseState": 2,
"stateNum": 2,
"skin": "res://08a05164-eac8-4773-8e7d-749e477f1ee7",
"skin": "res://d8b02de6-eee7-47ea-b227-d6dbffdadae3",
"label": "",
"labelSize": 20,
"labelAlign": "center",
@@ -44263,7 +44262,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": false
}
],
"_$child": [
@@ -44454,7 +44454,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44545,7 +44546,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44636,7 +44638,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44739,7 +44742,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44830,7 +44834,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -44921,7 +44926,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45024,7 +45030,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45115,7 +45122,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45206,7 +45214,8 @@
},
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45299,7 +45308,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45361,7 +45371,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -45500,7 +45511,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
]
}

View File

@@ -247,8 +247,9 @@
"lb": 12,
"rb": 12,
"percent": true,
"lineWidth": 1,
"fillColor": "rgba(14, 42, 83, 1)"
"lineWidth": 5,
"lineColor": "rgba(14, 42, 83, 1)",
"fillColor": "rgba(245, 247, 251, 1)"
}
]
},
@@ -310,8 +311,9 @@
"lb": 12,
"rb": 12,
"percent": true,
"lineWidth": 1,
"fillColor": "rgba(14, 42, 83, 1)"
"lineWidth": 5,
"lineColor": "rgba(14, 42, 83, 1)",
"fillColor": "rgba(245, 247, 251, 1)"
}
]
},
@@ -373,8 +375,9 @@
"lb": 12,
"rb": 12,
"percent": true,
"lineWidth": 1,
"fillColor": "rgba(14, 42, 83, 1)"
"lineWidth": 5,
"lineColor": "rgba(14, 42, 83, 1)",
"fillColor": "rgba(245, 247, 251, 1)"
}
]
},
@@ -436,8 +439,9 @@
"lb": 12,
"rb": 12,
"percent": true,
"lineWidth": 1,
"fillColor": "rgba(14, 42, 83, 1)"
"lineWidth": 5,
"lineColor": "rgba(14, 42, 83, 1)",
"fillColor": "rgba(245, 247, 251, 1)"
}
]
},
@@ -499,8 +503,9 @@
"lb": 12,
"rb": 12,
"percent": true,
"lineWidth": 1,
"fillColor": "rgba(14, 42, 83, 1)"
"lineWidth": 5,
"lineColor": "rgba(14, 42, 83, 1)",
"fillColor": "rgba(245, 247, 251, 1)"
}
]
},

View File

@@ -36,7 +36,8 @@ export class TopBar extends Laya.Script {
@property(Laya.Box)
public obj_items: Laya.Box
private items: Map<string, Laya.Label> = new Map()
private item_sprites: Map<string, Laya.Sprite> = new Map()
private item_labels: Map<string, Laya.Label> = new Map()
onStart(): void {
// 如果是第一次以横屏启动游戏需要创建经典关卡
@@ -79,9 +80,11 @@ export class TopBar extends Laya.Script {
for (let i = 0; i < this.obj_items.numChildren; i++) {
const obj = this.obj_items.getChildAt(i)
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.items.set(value, label)
this.item_labels.set(value, label)
const common = obj.getComponent(CommonData)
common.strValue = value
obj.on(Laya.Event.CLICK, this, (evt: Laya.Event) => {
@@ -140,10 +143,18 @@ export class TopBar extends Laya.Script {
}
updateDifficulty(difficulty: string): void {
this.items.forEach((label: Laya.Label) => {
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.items.get(difficulty)
const label = this.item_labels.get(difficulty)
label.color = "#1d5cdc"
}
}

View File

@@ -4,15 +4,22 @@ const { regClass, property } = Laya;
export class CommonHover extends Laya.Script {
declare owner : Laya.Box;
@property(Boolean)
public hoverAlpha: boolean = true
onAwake(): void {
this.owner.on(Laya.Event.MOUSE_OVER, this, ()=>{
Laya.Render.canvas.style.cursor = "pointer"
if (this.hoverAlpha) {
this.owner.alpha = 0.7
}
})
this.owner.on(Laya.Event.MOUSE_OUT, this, ()=>{
Laya.Render.canvas.style.cursor = ""
if (this.hoverAlpha) {
this.owner.alpha = 1
}
})
}