From 1033931d7a6ee44dfce3b4ec2c4ea387e3c67184 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Mon, 3 Aug 2026 16:26:02 +0800 Subject: [PATCH] =?UTF-8?q?style(fe):=20=E5=86=B7=E5=90=AF=E5=8A=A8?= =?UTF-8?q?=E7=88=AA=E5=8D=B0=E5=8A=A8=E7=94=BB=E5=8A=A0=E9=95=BF=E5=8A=A0?= =?UTF-8?q?=E9=87=8D=20=E2=80=94=20=E8=B5=B0=E5=AE=8C=E6=95=B4=E6=9D=A1?= =?UTF-8?q?=E8=B7=AF=E5=86=8D=E6=B7=A1=E5=85=A5=20logo=EF=BC=88=E7=BA=A6?= =?UTF-8?q?=201.9s=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 爪印改成一次性踩完并留屏（不再闪烁循环），步距 .26s、带 squash 过冲，更有踩感 - logo/文案等爪印快到顶再淡入，形成「走过来→到家」的收束 - 闪屏最短时长 900ms→1900ms，避免一闪而过 Co-Authored-By: Claude Opus 5 --- pets-fe/pages/onboarding/onboarding.js | 2 +- pets-fe/pages/onboarding/onboarding.wxss | 47 ++++++++++++++---------- 2 files changed, 28 insertions(+), 21 deletions(-) diff --git a/pets-fe/pages/onboarding/onboarding.js b/pets-fe/pages/onboarding/onboarding.js index 6ff27b4..6356ad5 100644 --- a/pets-fe/pages/onboarding/onboarding.js +++ b/pets-fe/pages/onboarding/onboarding.js @@ -82,7 +82,7 @@ Page({ // 冷启动闪屏收尾：先保证闪屏至少露够一小会（否则秒开会「闪一下」）， // 再加一层渐隐动画，最后才真正切到首页 / 建档向导，避免硬切 _leaveBoot(target) { - const MIN_MS = 900; // 至少显示这么久，让爪印踩几步走完 + const MIN_MS = 1900; // 至少显示这么久，让整条爪印走完 + logo 淡入，别一闪而过 const FADE_MS = 340; // 与 .boot--out 的 CSS 过渡时长一致 const wait = Math.max(0, MIN_MS - (Date.now() - (this._bootStart || 0))); setTimeout(() => { diff --git a/pets-fe/pages/onboarding/onboarding.wxss b/pets-fe/pages/onboarding/onboarding.wxss index 4d1a827..6a99f8a 100644 --- a/pets-fe/pages/onboarding/onboarding.wxss +++ b/pets-fe/pages/onboarding/onboarding.wxss @@ -21,29 +21,36 @@ /* 收尾渐隐：整屏淡出 + 轻微放大，像走进 App，而不是硬切 */ .boot--out{opacity:0;transform:scale(1.06);pointer-events:none} -/* 爪印小径：一串爪印从下往上、左右交替地一步步踩出来，走向 logo */ -.paw-trail{position:relative;width:320rpx;height:540rpx;margin:0 auto} -.paw-trail .pw{position:absolute;animation:paw-step 2.4s ease-in-out infinite both} +/* 爪印小径：一串爪印从下往上、左右交替地一步步「踩」出来，走向 logo。 + 一次性踩完并留在屏上（不闪烁循环），走完 logo 再淡入 */ +.paw-trail{position:relative;width:340rpx;height:560rpx;margin:0 auto} +.paw-trail .pw{position:absolute;animation:paw-stamp .56s cubic-bezier(.2,.85,.3,1) both} .paw-trail .paw{width:100rpx;height:92rpx} -.paw-trail .foot-l{transform:rotate(-13deg) scale(.6)} -.paw-trail .foot-r{transform:rotate(13deg) scale(-.6,.6)} /* 负 X 缩放 = 镜像成另一只脚 */ -/* 之字形落点（bottom 越大越靠上）+ 逐个延迟，形成「一步步走」 */ +.paw-trail .foot-l{transform:rotate(-13deg) scale(.68)} +.paw-trail .foot-r{transform:rotate(13deg) scale(-.68,.68)} /* 负 X 缩放 = 镜像成另一只脚 */ +/* 之字形落点（bottom 越大越靠上）+ 逐个延迟 .26s，节奏放慢一点，像一步一步走 */ .paw-trail .pw-0{left:96rpx;bottom:0;animation-delay:0s} -.paw-trail .pw-1{left:184rpx;bottom:96rpx;animation-delay:.2s} -.paw-trail .pw-2{left:96rpx;bottom:192rpx;animation-delay:.4s} -.paw-trail .pw-3{left:184rpx;bottom:288rpx;animation-delay:.6s} -.paw-trail .pw-4{left:96rpx;bottom:384rpx;animation-delay:.8s} -.paw-trail .pw-5{left:184rpx;bottom:480rpx;animation-delay:1s} +.paw-trail .pw-1{left:196rpx;bottom:104rpx;animation-delay:.26s} +.paw-trail .pw-2{left:96rpx;bottom:208rpx;animation-delay:.52s} +.paw-trail .pw-3{left:196rpx;bottom:312rpx;animation-delay:.78s} +.paw-trail .pw-4{left:96rpx;bottom:416rpx;animation-delay:1.04s} +.paw-trail .pw-5{left:196rpx;bottom:520rpx;animation-delay:1.3s} -.boot-name{margin-top:var(--sp-4);font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-1rpx} -.boot-tip{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-md)} -/* 每个爪印：从上方一点、缩着落下 → 踩实（轻微过冲）→ 停一下 → 淡出，循环 */ -@keyframes paw-step{ - 0%{opacity:0;transform:translateY(-14rpx) scale(.7)} - 10%{opacity:1;transform:translateY(0) scale(1.12)} - 20%{opacity:1;transform:translateY(0) scale(1)} - 68%{opacity:1;transform:translateY(0) scale(1)} - 86%,100%{opacity:0;transform:translateY(0) scale(1)} +/* logo 和文案等爪印快走到了再淡入，形成「走过来 → 到家」的收束感 */ +.boot-name{ + margin-top:var(--sp-4);font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-1rpx; + animation:fade .5s ease both;animation-delay:1.5s; +} +.boot-tip{ + margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-md); + animation:fade .5s ease both;animation-delay:1.66s; +} +/* 每个爪印：从上方一点、缩着落下 → 踩实（轻微过冲、squash）→ 稳住并留在屏上 */ +@keyframes paw-stamp{ + 0%{opacity:0;transform:translateY(-20rpx) scale(.5)} + 55%{opacity:1;transform:translateY(3rpx) scale(1.18)} + 74%{transform:translateY(0) scale(.95)} + 100%{opacity:1;transform:translateY(0) scale(1)} } .hero{text-align:center;padding:60rpx 0 var(--sp-5)}