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{