添加弹窗动画

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

@@ -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)