feat: scaleY-only squash with bottom anchor + animation cooldown + finer smooth steps
This commit is contained in:
@@ -92,6 +92,7 @@ export default {
|
|||||||
bubbleText: '',
|
bubbleText: '',
|
||||||
bubbleIndex: 0,
|
bubbleIndex: 0,
|
||||||
animStep: 0,
|
animStep: 0,
|
||||||
|
animLock: false,
|
||||||
settings: {
|
settings: {
|
||||||
serverUrl: 'ws://127.0.0.1:8787',
|
serverUrl: 'ws://127.0.0.1:8787',
|
||||||
userId: '',
|
userId: '',
|
||||||
@@ -149,13 +150,22 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onTap() {
|
onTap() {
|
||||||
// Q 弹:压扁(s1) -> 回弹过冲(s2) -> 回正(s0),类名驱动
|
// 冷却:动画进行中不重复触发
|
||||||
|
if (this.animLock) return
|
||||||
|
this.animLock = true
|
||||||
|
|
||||||
|
// Q 弹:底部不动,从上往下收缩,再回弹(scaleY 多帧平滑)
|
||||||
const self = this
|
const self = this
|
||||||
this.animStep = 1
|
this.animStep = 0
|
||||||
setTimeout(() => { self.animStep = 2 }, 60)
|
setTimeout(() => { self.animStep = 1 }, 0) // scaleY 0.92
|
||||||
setTimeout(() => { self.animStep = 0 }, 130)
|
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
|
const idx = this.bubbleIndex % this.bubblePresets.length
|
||||||
@@ -262,19 +272,28 @@ export default {
|
|||||||
.mascot {
|
.mascot {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 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 {
|
.step0 {
|
||||||
transform: scale(1, 1);
|
transform: scaleY(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step1 {
|
.step1 {
|
||||||
transform: scale(1.06, 0.84);
|
transform: scaleY(0.92);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step2 {
|
.step2 {
|
||||||
transform: scale(0.98, 1.06);
|
transform: scaleY(0.82);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step3 {
|
||||||
|
transform: scaleY(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step4 {
|
||||||
|
transform: scaleY(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.peak {
|
.peak {
|
||||||
|
|||||||
Reference in New Issue
Block a user