feat: scaleY-only squash with bottom anchor + animation cooldown + finer smooth steps

This commit is contained in:
2026-09-01 20:32:34 +08:00
parent cfb218ba28
commit 82399fcae1
+28 -9
View File
@@ -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 {