添加弹窗动画

assets/resources/CommonTips.lh

@@ -54,10 +54,12 @@
       "_$id": "r463so4u",
       "_$type": "Box",
       "name": "center",
-      "x": 480,
+      "x": 960,
-      "y": 280,
+      "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": [

assets/resources/GameOver.lh

@@ -3,8 +3,8 @@
   "_$id": "w805s9t9",
   "_$type": "Box",
   "name": "GameOver",
-  "width": 1080,
+  "width": 1920,
-  "height": 1920,
+  "height": 1080,
   "_mouseState": 2,
   "drawCallOptimize": true,
   "left": 0,
@@ -34,8 +34,8 @@
       "_$id": "unwnutvo",
       "_$type": "Image",
       "name": "Image",
-      "width": 1080,
+      "width": 1920,
-      "height": 1920,
+      "height": 1080,
       "alpha": 0.6,
       "left": 0,
       "right": 0,
@@ -48,10 +48,12 @@
       "_$id": "0a0ovv4z",
       "_$type": "Box",
       "name": "center",
-      "x": 96,
+      "x": 960,
-      "y": 420,
+      "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,
+      "x": 592,
-      "y": 521,
+      "y": 101,
       "width": 736,
       "height": 100,
       "centerX": 0,
@@ -351,8 +353,8 @@
       "_$id": "39t7ygbe",
       "_$type": "Label",
       "name": "Label(1)",
-      "x": 186,
+      "x": 606,
-      "y": 655,
+      "y": 235,
       "width": 709,
       "height": 300,
       "centerX": 0,

assets/resources/GameOver_H.lh

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

assets/resources/GamePause.lh

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

assets/resources/GamePause_H.lh

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

assets/resources/ScoreAdd_H.lh

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

src/utils/utility.ts

@@ -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
+}

src/views/CommonTips.ts

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

src/views/GameOver.ts

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

src/views/GamePause.ts

@@ -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
 
-  // 组件被激活后执行，此时所有节点和组件均已创建完毕，此方法只执行一次
+  private mask: Laya.Image
-  onAwake(): void {
+  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.destroyUI()
-      this.owner.destroy()
     })
 
     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()
     })
   }
 }

src/views/ScoreAdd.ts

@@ -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) {
+    Laya.Tween.to(this.label, { y: -102 }, 300, Utility_EaseOut, null, 500)
-      const bezier = BezierEasing(0, 0, 0.58, 1)
+    Laya.Tween.to(this.label, { alpha: 0 }, 300, Utility_EaseOut, null, 500)
-      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, { scaleX: 1, scaleY: 1 }, 300, Laya.Ease.bounceIn, null, 0)
     // Laya.Tween.to(this.label, { y: -102 }, 300, Laya.Ease.linearOut, null, 500)