添加弹窗动画

This commit is contained in:
2025-06-06 16:05:54 +08:00
parent 27f5716dcc
commit d6acd97396
11 changed files with 149 additions and 44 deletions

View File

@@ -54,10 +54,12 @@
"_$id": "r463so4u",
"_$type": "Box",
"name": "center",
"x": 480,
"y": 280,
"x": 960,
"y": 540,
"width": 960,
"height": 520,
"anchorX": 0.5,
"anchorY": 0.5,
"_mouseState": 2,
"centerX": 0,
"centerY": 0,
@@ -107,7 +109,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -168,7 +171,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [
@@ -231,7 +235,8 @@
"_$comp": [
{
"_$type": "a541bdfc-e8e1-4795-b68e-7138c5190f17",
"scriptPath": "../src/views/common/CommonHover.ts"
"scriptPath": "../src/views/common/CommonHover.ts",
"hoverAlpha": true
}
],
"_$child": [

View File

@@ -3,8 +3,8 @@
"_$id": "w805s9t9",
"_$type": "Box",
"name": "GameOver",
"width": 1080,
"height": 1920,
"width": 1920,
"height": 1080,
"_mouseState": 2,
"drawCallOptimize": true,
"left": 0,
@@ -34,8 +34,8 @@
"_$id": "unwnutvo",
"_$type": "Image",
"name": "Image",
"width": 1080,
"height": 1920,
"width": 1920,
"height": 1080,
"alpha": 0.6,
"left": 0,
"right": 0,
@@ -48,10 +48,12 @@
"_$id": "0a0ovv4z",
"_$type": "Box",
"name": "center",
"x": 96,
"y": 420,
"x": 960,
"y": 540,
"width": 888,
"height": 1080,
"anchorX": 0.5,
"anchorY": 0.5,
"_mouseState": 2,
"centerX": 0,
"centerY": 0,
@@ -332,8 +334,8 @@
"_$id": "jkqju6ok",
"_$type": "Label",
"name": "Label",
"x": 172,
"y": 521,
"x": 592,
"y": 101,
"width": 736,
"height": 100,
"centerX": 0,
@@ -351,8 +353,8 @@
"_$id": "39t7ygbe",
"_$type": "Label",
"name": "Label(1)",
"x": 186,
"y": 655,
"x": 606,
"y": 235,
"width": 709,
"height": 300,
"centerX": 0,

View File

@@ -48,10 +48,12 @@
"_$id": "ak02a9xq",
"_$type": "Box",
"name": "center",
"x": 480,
"y": 225,
"x": 960,
"y": 540,
"width": 960,
"height": 630,
"anchorX": 0.5,
"anchorY": 0.5,
"_mouseState": 2,
"centerX": 0,
"centerY": 0,

View File

@@ -48,10 +48,12 @@
"_$id": "cy0qcxu0",
"_$type": "Box",
"name": "center",
"x": 516,
"y": 87,
"x": 960,
"y": 540,
"width": 888,
"height": 906,
"anchorX": 0.5,
"anchorY": 0.5,
"_mouseState": 2,
"centerX": 0,
"centerY": 0,

View File

@@ -48,10 +48,12 @@
"_$id": "2oq6bad5",
"_$type": "Box",
"name": "center",
"x": 480,
"y": 279,
"x": 960,
"y": 540,
"width": 960,
"height": 522,
"anchorX": 0.5,
"anchorY": 0.5,
"_mouseState": 2,
"centerX": 0,
"centerY": 0,

View File

@@ -3,10 +3,11 @@
"_$id": "r3lhk79l",
"_$type": "Box",
"name": "ScoreAdd_H",
"x": 3,
"y": 3,
"x": 915,
"y": 495,
"width": 90,
"height": 90,
"drawCallOptimize": true,
"centerX": 0,
"centerY": 0,
"_$comp": [

View File

@@ -1,3 +1,4 @@
import BezierEasing from "bezier-easing"
import { config } from "../constants/config"
export function Utility_ConvertSecondToString(seconds: number) {
@@ -31,3 +32,15 @@ export function Utility_CalculateScore(difficulty: string, second: number): numb
// console.log("计算积分 >>>>>", difficulty, second, score)
return score
}
const bezier_ease_out = BezierEasing(0.2, 0.8, 0.5, 1)
export function Utility_EaseOut(t: number, b: number, c: number, d: number) {
const p = bezier_ease_out(t / d)
return c * p + b
}
const bezier_ease_out_2 = BezierEasing(0.25, 0.1, 0.3, 1)
export function Utility_EaseOut_2(t: number, b: number, c: number, d: number) {
const p = bezier_ease_out_2(t / d)
return c * p + b
}

View File

@@ -1,6 +1,8 @@
import { respath } from "../constants/respath"
import { ResourceManager } from "../models/ResourceManager"
import { UIManager } from "../models/UIManager"
import { Utility_EaseOut, Utility_EaseOut_2 } from "../utils/utility"
const { regClass, property } = Laya
@@ -36,6 +38,30 @@ export class CommonTips extends Laya.Script {
private isChecked = false
private mask: Laya.Image
private center: Laya.Box
onAwake(): void {
this.mask = this.owner.getChildByName("Image") as Laya.Image
this.mask.alpha = 0
Laya.Tween.to(this.mask, {alpha: 0.6}, 400, Utility_EaseOut)
this.center = this.owner.getChildByName("center") as Laya.Box
this.center.scaleX = 0.8
this.center.scaleY = 0.8
Laya.Tween.to(this.center, {scaleX: 1, scaleY: 1}, 400, Utility_EaseOut)
this.center.alpha = 0
Laya.Tween.to(this.center, {alpha: 1}, 400, Utility_EaseOut)
}
destroyUI(): void {
Laya.Tween.to(this.mask, {alpha: 0}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {scaleX: 0.8, scaleY: 0.8}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {alpha: 0}, 400, Utility_EaseOut_2, Laya.Handler.create(this, () => {
this.owner.destroy()
}))
}
public showCommonTips(title: string, content: string, showToggle: boolean, func: any): void {
this.label_title.text = title
this.label_content.text = content
@@ -50,13 +76,16 @@ export class CommonTips extends Laya.Script {
if (func) {
func(true, this.isChecked)
}
this.owner.destroy()
this.destroyUI()
})
this.btn_cancel.on(Laya.Event.CLICK, this, () => {
if (func) {
func(false, this.isChecked)
}
this.owner.destroy()
this.destroyUI()
})
this.mask.on(Laya.Event.CLICK, this, () => {
this.destroyUI()
})
}
}

View File

@@ -6,6 +6,7 @@ import { StorageManager } from "../models/StorageManager"
import { UIManager } from "../models/UIManager"
import { Difficulty } from "./Difficulty"
import { ResourceManager } from "../models/ResourceManager"
import { Utility_EaseOut, Utility_EaseOut_2 } from "../utils/utility"
const { regClass, property } = Laya
@@ -25,11 +26,36 @@ export class GameOver extends Laya.Script {
@property(Laya.Label)
public label_newOrClose: Laya.Label
private mask: Laya.Image
private center: Laya.Box
onAwake(): void {
this.mask = this.owner.getChildByName("Image") as Laya.Image
this.mask.alpha = 0
Laya.Tween.to(this.mask, {alpha: 0.6}, 400, Utility_EaseOut)
this.center = this.owner.getChildByName("center") as Laya.Box
this.center.scaleX = 0.8
this.center.scaleY = 0.8
Laya.Tween.to(this.center, {scaleX: 1, scaleY: 1}, 400, Utility_EaseOut)
this.center.alpha = 0
Laya.Tween.to(this.center, {alpha: 1}, 400, Utility_EaseOut)
}
destroyUI(): void {
Laya.Tween.to(this.mask, {alpha: 0}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {scaleX: 0.8, scaleY: 0.8}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {alpha: 0}, 400, Utility_EaseOut_2, Laya.Handler.create(this, () => {
this.owner.destroy()
}))
}
public onSetStageInfo(doStage: DOStage): void {
this.btn_second.on(Laya.Event.CLICK, this, () => {
doStage.set_mistake(doStage.get_mistake() - 1)
EventManager.getInstance().DispatchEvent(EVENT_TYPES.NOT_UPDATE_MISTAKE)
this.owner.destroy()
this.destroyUI()
})
this.btn_restart.on(Laya.Event.CLICK, this, () => {
@@ -38,7 +64,7 @@ export class GameOver extends Laya.Script {
const difficulty = doStage.get_difficulty()
StorageManager.getInstance().newStage(stageID, type, difficulty, difficulty)
UIManager.getInstance().loadStageUI(stageID)
this.owner.destroy()
this.destroyUI()
})
const type = doStage.get_stageType()
@@ -51,7 +77,7 @@ export class GameOver extends Laya.Script {
const difficulty = doStage.get_difficulty()
StorageManager.getInstance().newStage(config.DEFAULT_STAGE_ID, config.STAGE_TYPE.MAIN, difficulty, difficulty)
UIManager.getInstance().loadStageUI(config.DEFAULT_STAGE_ID)
this.owner.destroy()
this.destroyUI()
} else {
ResourceManager.getInstance().loadPrefab(respath.difficulty_ui_res, (go: any)=> {
const prefab = go.create()
@@ -60,7 +86,7 @@ export class GameOver extends Laya.Script {
console.log("选择难度", value)
StorageManager.getInstance().newStage(config.DEFAULT_STAGE_ID, config.STAGE_TYPE.MAIN, value, value)
UIManager.getInstance().loadStageUI(config.DEFAULT_STAGE_ID)
this.owner.destroy()
this.destroyUI()
})
})
}
@@ -70,7 +96,7 @@ export class GameOver extends Laya.Script {
this.btn_newOrClose.on(Laya.Event.CLICK, this, () => {
UIManager.getInstance().loadDCUI()
UIManager.getInstance().closeStageUI()
this.owner.destroy()
this.destroyUI()
})
}
}

View File

@@ -2,7 +2,7 @@ import type { DOStage } from "../models/DOStage"
import { EVENT_TYPES, EventManager } from "../models/EventManager"
import { StorageManager } from "../models/StorageManager"
import { UIManager } from "../models/UIManager"
import { Utility_ConvertSecondToString } from "../utils/utility"
import { Utility_ConvertSecondToString, Utility_EaseOut, Utility_EaseOut_2 } from "../utils/utility"
const { regClass, property } = Laya
@@ -22,19 +22,46 @@ export class GamePause extends Laya.Script {
@property(Laya.Box)
public btn_restart: Laya.Box
// 组件被激活后执行,此时所有节点和组件均已创建完毕,此方法只执行一次
onAwake(): void {
private mask: Laya.Image
private center: Laya.Box
onAwake(): void {
EventManager.getInstance().DispatchEvent(EVENT_TYPES.NOT_UPDATE_PAUSE, true)
this.mask = this.owner.getChildByName("Image") as Laya.Image
this.mask.alpha = 0
Laya.Tween.to(this.mask, {alpha: 0.6}, 400, Utility_EaseOut)
this.center = this.owner.getChildByName("center") as Laya.Box
this.center.scaleX = 0.8
this.center.scaleY = 0.8
Laya.Tween.to(this.center, {scaleX: 1, scaleY: 1}, 400, Utility_EaseOut)
this.center.alpha = 0
Laya.Tween.to(this.center, {alpha: 1}, 400, Utility_EaseOut)
}
onDestroy(): void {
EventManager.getInstance().DispatchEvent(EVENT_TYPES.NOT_UPDATE_PAUSE, false)
}
destroyUI(): void {
Laya.Tween.to(this.mask, {alpha: 0}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {scaleX: 0.8, scaleY: 0.8}, 400, Utility_EaseOut_2)
Laya.Tween.to(this.center, {alpha: 0}, 400, Utility_EaseOut_2, Laya.Handler.create(this, () => {
this.owner.destroy()
}))
}
public onSetStageInfo(doStage: DOStage): void {
this.label_time.text = Utility_ConvertSecondToString(doStage.get_duration())
this.label_diffucuty.text = doStage.get_difficulty()
this.mask.on(Laya.Event.CLICK, this, () => {
this.destroyUI()
})
EventManager.getInstance().DispatchEvent(EVENT_TYPES.NOT_UPDATE_PAUSE, true)
this.btn_continue.on(Laya.Event.CLICK, this, () => {
EventManager.getInstance().DispatchEvent(EVENT_TYPES.NOT_UPDATE_PAUSE, false)
this.owner.destroy()
this.destroyUI()
})
this.btn_restart.on(Laya.Event.CLICK, this, () => {
@@ -43,7 +70,7 @@ export class GamePause extends Laya.Script {
const difficulty = doStage.get_difficulty()
StorageManager.getInstance().newStage(stageID, type, difficulty, difficulty)
UIManager.getInstance().loadStageUI(stageID)
this.owner.destroy()
this.destroyUI()
})
}
}

View File

@@ -1,3 +1,4 @@
import { Utility_EaseOut } from "../utils/utility";
import { AutoDestroy } from "./common/AutoDestroy"
import BezierEasing from 'bezier-easing';
@@ -30,13 +31,8 @@ export class ScoreAdd extends Laya.Script {
}
Laya.Tween.to(this.label, { scaleX: 1, scaleY: 1 }, 300, bezierEaseLaya1, null, 0)
function bezierEaseOut(t: number, b: number, c: number, d: number) {
const bezier = BezierEasing(0, 0, 0.58, 1)
const p = bezier(t / d)
return c * p + b
}
Laya.Tween.to(this.label, { y: -102 }, 300, bezierEaseOut, null, 500)
Laya.Tween.to(this.label, { alpha: 0 }, 300, bezierEaseOut, null, 500)
Laya.Tween.to(this.label, { y: -102 }, 300, Utility_EaseOut, null, 500)
Laya.Tween.to(this.label, { alpha: 0 }, 300, Utility_EaseOut, null, 500)
// Laya.Tween.to(this.label, { scaleX: 1, scaleY: 1 }, 300, Laya.Ease.bounceIn, null, 0)
// Laya.Tween.to(this.label, { y: -102 }, 300, Laya.Ease.linearOut, null, 500)