zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善地图交互、动画与罗盘调试

Browse Source
This commit is contained in:
zhangyan
2026-03-26 16:58:53 +08:00
parent d695308a55
commit 5fc996dea1
18 changed files with 1566 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
miniprogram/pages/map/map.wxss
View File

@@ -85,6 +85,10 @@
animation: stage-fx-finish 0.76s ease-out 1;
}
.map-stage__stage-fx--control {
animation: stage-fx-control 0.52s ease-out 1;
}
.map-stage__overlay {
position: absolute;
inset: 0;
@@ -834,6 +838,10 @@
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.2);
}
.race-panel__timer--fx-tick {
animation: race-panel-timer-tick 0.32s cubic-bezier(0.24, 0.86, 0.3, 1) 1;
}
.race-panel__mileage {
max-width: 100%;
box-sizing: border-box;
@@ -851,6 +859,10 @@
transform: translateX(-16rpx);
}
.race-panel__mileage-wrap--fx-update {
animation: race-panel-mileage-update 0.36s cubic-bezier(0.22, 0.88, 0.34, 1) 1;
}
.race-panel__metric-group {
max-width: 100%;
box-sizing: border-box;
@@ -864,11 +876,23 @@
transform: translateX(16rpx);
}
.race-panel__metric-group--fx-distance-success {
animation: race-panel-distance-success 0.56s cubic-bezier(0.22, 0.88, 0.34, 1) 1;
}
.race-panel__metric-group--right {
justify-content: center;
transform: translateX(-16rpx);
}
.race-panel__metric-group--fx-speed-update {
animation: race-panel-speed-update 0.36s cubic-bezier(0.22, 0.88, 0.34, 1) 1;
}
.race-panel__metric-group--fx-heart-rate-update {
animation: race-panel-heart-rate-update 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) 1;
}
.race-panel__metric-value {
line-height: 1;
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.16);
@@ -924,6 +948,38 @@
text-shadow: 0 2rpx 0 rgba(255, 255, 255, 0.16);
}
.race-panel__progress--fx-success {
animation: race-panel-progress-success 0.56s cubic-bezier(0.2, 0.88, 0.32, 1) 1;
}
.race-panel__progress--fx-finish {
animation: race-panel-progress-finish 0.68s cubic-bezier(0.18, 0.92, 0.28, 1) 1;
}
@keyframes race-panel-timer-tick {
0% { transform: translateY(0) scale(1); opacity: 0.94; }
35% { transform: translateY(-2rpx) scale(1.04); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes race-panel-mileage-update {
0% { transform: translateX(-16rpx) scale(1); opacity: 0.94; }
40% { transform: translateX(-16rpx) scale(1.05); opacity: 1; }
100% { transform: translateX(-16rpx) scale(1); opacity: 1; }
}
@keyframes race-panel-speed-update {
0% { transform: translateX(-16rpx) scale(1); opacity: 0.94; }
40% { transform: translateX(-16rpx) scale(1.06); opacity: 1; }
100% { transform: translateX(-16rpx) scale(1); opacity: 1; }
}
@keyframes race-panel-heart-rate-update {
0% { transform: translateX(16rpx) scale(1); opacity: 0.94; }
38% { transform: translateX(16rpx) scale(1.05); opacity: 1; }
100% { transform: translateX(16rpx) scale(1); opacity: 1; }
}
.race-panel__zone {
display: flex;
flex-direction: column;
@@ -982,6 +1038,72 @@
right: 0;
bottom: 0;
}
@keyframes race-panel-distance-success {
0% {
transform: translateX(16rpx) scale(1);
opacity: 1;
}
28% {
transform: translateX(16rpx) scale(1.09);
opacity: 1;
}
62% {
transform: translateX(16rpx) scale(0.98);
opacity: 0.96;
}
100% {
transform: translateX(16rpx) scale(1);
opacity: 1;
}
}
@keyframes race-panel-progress-success {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
24% {
transform: scale(1.16) translateY(-4rpx);
opacity: 1;
}
60% {
transform: scale(0.98) translateY(0);
opacity: 0.96;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@keyframes race-panel-progress-finish {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.2) translateY(-6rpx);
opacity: 1;
}
46% {
transform: scale(1.08) translateY(-2rpx);
opacity: 1;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.map-punch-button {
position: absolute;
right: 24rpx;
@@ -1593,7 +1715,7 @@
font-size: 24rpx;
line-height: 1.2;
text-align: left;
z-index: 16;
z-index: 40;
pointer-events: auto;
}
@@ -1603,9 +1725,9 @@
}
.game-punch-hint__close {
width: 40rpx;
height: 40rpx;
flex: 0 0 40rpx;
width: 56rpx;
height: 56rpx;
flex: 0 0 56rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
@@ -1939,3 +2061,21 @@
backdrop-filter: brightness(1);
}
}
@keyframes stage-fx-control {
0% {
opacity: 0;
background: radial-gradient(circle at 50% 50%, rgba(138, 255, 235, 0.16) 0%, rgba(138, 255, 235, 0.06) 26%, rgba(255, 255, 255, 0) 60%);
backdrop-filter: brightness(1);
}
36% {
opacity: 1;
background: radial-gradient(circle at 50% 50%, rgba(138, 255, 235, 0.24) 0%, rgba(138, 255, 235, 0.1) 32%, rgba(255, 255, 255, 0.03) 72%);
backdrop-filter: brightness(1.03);
}
100% {
opacity: 0;
background: radial-gradient(circle at 50% 50%, rgba(138, 255, 235, 0) 0%, rgba(138, 255, 235, 0) 100%);
backdrop-filter: brightness(1);
}
}