From 81d96f774c73b469a461981a38c2226f761f7b43 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Mon, 3 Aug 2026 16:20:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E5=86=B7=E5=90=AF=E5=8A=A8?= =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB=20=E2=80=94=20=E7=88=AA?= =?UTF-8?q?=E5=8D=B0=E4=B8=80=E6=AD=A5=E6=AD=A5=E8=B8=A9=E4=B8=8A=E5=B1=8F?= =?UTF-8?q?=E5=B9=95=20+=20=E6=94=B6=E5=B0=BE=E6=B8=90=E9=9A=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 启动登录已在 app.js onLaunch + store.ready 单例里最早触发，进首页不再等登录 - 闪屏把原来的单个 logo 换成左右交替的爪印小径，逐个延迟「踩」上屏走向 logo - 登录/拉宠物完成后：先保证闪屏至少 900ms 让爪印走几步，再整屏渐隐放大切走， 不再硬切到首页/建档向导 Co-Authored-By: Claude Opus 5 --- pets-fe/pages/onboarding/onboarding.js | 21 +++++++++++--- pets-fe/pages/onboarding/onboarding.wxml | 16 +++++----- pets-fe/pages/onboarding/onboarding.wxss | 37 +++++++++++++++++------- 3 files changed, 53 insertions(+), 21 deletions(-) diff --git a/pets-fe/pages/onboarding/onboarding.js b/pets-fe/pages/onboarding/onboarding.js index 593c988..6ff27b4 100644 --- a/pets-fe/pages/onboarding/onboarding.js +++ b/pets-fe/pages/onboarding/onboarding.js @@ -45,6 +45,7 @@ function ageFromBirthday(bdayStr) { Page({ data: { booting: true, // 冷启动先显示闪屏，静默登录 + 拉宠物期间不闪建档向导 + bootOut: false, // 闪屏淡出中：加一层渐隐动画再切走，避免硬切 step: 0, petType: '猫猫', petEmoji: '🐱', @@ -68,20 +69,32 @@ Page({ submitting: false, }, onLoad() { + this._bootStart = Date.now(); this.setData({ today: today(), arrivedAt: today() }); // 闪屏期间就把登录 + 宠物拉完，保证进首页时数据已经到位。 // 有宠物直接进首页；没有才落到建档向导。登录失败也别卡在闪屏， // 放用户进向导（提交时会再 store.ready 重试） store .ready() - .then(() => { - if (store.getPets().length > 0) { + .then(() => this._leaveBoot(store.getPets().length > 0 ? 'home' : 'wizard')) + .catch(() => this._leaveBoot('wizard')); + }, + // 冷启动闪屏收尾：先保证闪屏至少露够一小会（否则秒开会「闪一下」）， + // 再加一层渐隐动画，最后才真正切到首页 / 建档向导，避免硬切 + _leaveBoot(target) { + const MIN_MS = 900; // 至少显示这么久，让爪印踩几步走完 + const FADE_MS = 340; // 与 .boot--out 的 CSS 过渡时长一致 + const wait = Math.max(0, MIN_MS - (Date.now() - (this._bootStart || 0))); + setTimeout(() => { + this.setData({ bootOut: true }); + setTimeout(() => { + if (target === 'home') { wx.switchTab({ url: '/pages/home/home' }); } else { this.setData({ booting: false }); } - }) - .catch(() => this.setData({ booting: false })); + }, FADE_MS); + }, wait); }, nextStep() { this.setData({ step: Math.min(this.data.step + 1, 5) }); diff --git a/pets-fe/pages/onboarding/onboarding.wxml b/pets-fe/pages/onboarding/onboarding.wxml index d9e9f93..ae64752 100644 --- a/pets-fe/pages/onboarding/onboarding.wxml +++ b/pets-fe/pages/onboarding/onboarding.wxml @@ -1,10 +1,12 @@ - - - - - - - + + + + + + + + + 肉垫计划 diff --git a/pets-fe/pages/onboarding/onboarding.wxss b/pets-fe/pages/onboarding/onboarding.wxss index 907135d..4d1a827 100644 --- a/pets-fe/pages/onboarding/onboarding.wxss +++ b/pets-fe/pages/onboarding/onboarding.wxss @@ -16,18 +16,35 @@ background: radial-gradient(circle at 50% 32%, rgba(253,179,92,.28), transparent 55%), var(--bg); + transition:opacity .34s ease, transform .34s ease; } -.boot-badge{ - width:184rpx;height:184rpx;border-radius:44rpx; - background:linear-gradient(150deg,#FFB865,#F5943E); - display:flex;align-items:center;justify-content:center; - box-shadow:0 18rpx 42rpx rgba(214,138,52,.4); - animation:boot-pop .5s ease both, boot-breathe 2.4s ease-in-out .5s infinite; -} -.boot-name{margin-top:var(--sp-5);font-size:var(--fs-2xl);font-weight:var(--fw-b);letter-spacing:-1rpx} +/* 收尾渐隐：整屏淡出 + 轻微放大，像走进 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} +.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 .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} + +.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 boot-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}} -@keyframes boot-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10rpx)}} +/* 每个爪印：从上方一点、缩着落下 → 踩实（轻微过冲）→ 停一下 → 淡出，循环 */ +@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)} +} .hero{text-align:center;padding:60rpx 0 var(--sp-5)} .pet-logo{