From 82399fcae1a309208cb32bfaae9ead002563ec6a Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 20:32:34 +0800
Subject: [PATCH] feat: scaleY-only squash with bottom anchor + animation
 cooldown + finer smooth steps

---
 src/pages/index/index.ux | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index 8c24e89..bcbdcc8 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -92,6 +92,7 @@ export default {
     bubbleText: '',
     bubbleIndex: 0,
     animStep: 0,
+    animLock: false,
     settings: {
       serverUrl: 'ws://127.0.0.1:8787',
       userId: '',
@@ -149,13 +150,22 @@ export default {
   },
 
   onTap() {
-    // Q 弹：压扁(s1) -> 回弹过冲(s2) -> 回正(s0)，类名驱动
+    // 冷却：动画进行中不重复触发
+    if (this.animLock) return
+    this.animLock = true
+
+    // Q 弹：底部不动，从上往下收缩，再回弹（scaleY 多帧平滑）
     const self = this
-    this.animStep = 1
-    setTimeout(() => { self.animStep = 2 }, 60)
-    setTimeout(() => { self.animStep = 0 }, 130)
+    this.animStep = 0
+    setTimeout(() => { self.animStep = 1 }, 0)   // scaleY 0.92
+    setTimeout(() => { self.animStep = 2 }, 40)  // scaleY 0.84
+    setTimeout(() => { self.animStep = 3 }, 85)  // scaleY 0.95
+    setTimeout(() => { self.animStep = 4 }, 135) // scaleY 1.05
+    setTimeout(() => { self.animStep = 0 }, 200) // scaleY 1.00
     // 回弹时播鸭叫
-    setTimeout(() => { playDuckSound() }, 130)
+    setTimeout(() => { playDuckSound() }, 150)
+    // 冷却结束
+    setTimeout(() => { self.animLock = false }, 360)
 
     // 轮播趣味/上轮消耗信息
     const idx = this.bubbleIndex % this.bubblePresets.length
@@ -262,19 +272,28 @@ export default {
 .mascot {
   width: 320px;
   height: 320px;
-  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform-origin: center bottom;
+  transition: transform 0.14s cubic-bezier(0.33, 1.12, 0.68, 1);
 }
 
 .step0 {
-  transform: scale(1, 1);
+  transform: scaleY(1);
 }
 
 .step1 {
-  transform: scale(1.06, 0.84);
+  transform: scaleY(0.92);
 }
 
 .step2 {
-  transform: scale(0.98, 1.06);
+  transform: scaleY(0.82);
+}
+
+.step3 {
+  transform: scaleY(0.95);
+}
+
+.step4 {
+  transform: scaleY(1.05);
 }
 
 .peak {