style(首页): 头图柔光与柔和水波、宝宝不再形变;胎动踢出明显褶皱、加快连踢 (v26100410)
- 光束画在 1/6 小画布再放大,宽而柔;水波改为低分辨率正弦大片光影,去掉白色网状焦散 - 去掉孕囊 SVG 位移滤镜;孕囊中心区域水波/光束/微粒避开,宝宝脸不受影响 - 胎动:鼓包外放射状褶皱(左上亮右下暗、三层虚边),每一拍重新踢出、更深 - 连踢加「噔噔噔」快节奏(.22~.26s),26~33 周出现概率 40%→50% Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<title>兜爸心选 · 孕育陪伴</title>
|
<title>兜爸心选 · 孕育陪伴</title>
|
||||||
<!-- V:26100409 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
<!-- V:26100410 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||||
<link rel="stylesheet" href="mama-box.css">
|
<link rel="stylesheet" href="mama-box.css">
|
||||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||||
var VER = '26100409';
|
var VER = '26100410';
|
||||||
const $ = (s, c) => (c || document).querySelector(s);
|
const $ = (s, c) => (c || document).querySelector(s);
|
||||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||||
|
|
||||||
|
|||||||
56
js/bump.js
56
js/bump.js
@@ -81,11 +81,12 @@
|
|||||||
const STAGES = {
|
const STAGES = {
|
||||||
// drum:原地带节奏连踢的概率;chain:踢完不歇、旁边紧接着再踢的概率,最多连 chainMax 下(2026-10-04 用户:「有时会带点节奏、可以连续踢」)
|
// drum:原地带节奏连踢的概率;chain:踢完不歇、旁边紧接着再踢的概率,最多连 chainMax 下(2026-10-04 用户:「有时会带点节奏、可以连续踢」)
|
||||||
flutter: { order: ['flick', 'flick', 'tap', 'flick'], gap: [10, 18], kick: false, again: 0, double: .45, follow: false, drum: 0, chain: 0 },
|
flutter: { order: ['flick', 'flick', 'tap', 'flick'], gap: [10, 18], kick: false, again: 0, double: .45, follow: false, drum: 0, chain: 0 },
|
||||||
active: { order: ORDER, gap: [4, 8], kick: true, again: .34, double: 0, follow: true, drum: .4, chain: .3, chainMax: 3 },
|
active: { order: ORDER, gap: [4, 8], kick: true, again: .34, double: 0, follow: true, drum: .5, chain: .3, chainMax: 3 },
|
||||||
late: { order: ['roll', 'butt', 'foot', 'roll', 'knee'], gap: [7, 12], kick: false, again: .15, double: 0, follow: true, slow: true, drum: .22, chain: .15, chainMax: 2 }
|
late: { order: ['roll', 'butt', 'foot', 'roll', 'knee'], gap: [7, 12], kick: false, again: .15, double: 0, follow: true, slow: true, drum: .22, chain: .15, chainMax: 2 }
|
||||||
};
|
};
|
||||||
// 原地连踢的节奏型(每拍间隔,秒):匀速「哒哒哒」、「哒哒—哒」、「哒—哒哒」、两下一组
|
// 原地连踢的节奏型(每拍间隔,秒):匀速「哒哒哒」、「哒哒—哒」、「哒—哒哒」、两下一组
|
||||||
const RHYTHMS = [[.42, .42, .42], [.3, .3, .75, .3], [.6, .28, .28], [.32, .9, .32], [.38, .38, .38, .38]];
|
// 2026-10-04 加了「噔噔噔」快连踢(.22~.26 秒一下),出现机会最大
|
||||||
|
const RHYTHMS = [[.24, .24, .24], [.22, .22, .22, .22], [.26, .26, .26], [.42, .42, .42], [.3, .3, .75, .3], [.6, .28, .28], [.38, .38, .38, .38]];
|
||||||
const dbgWeek = (location.href.match(/bumpweek=(\d+)/) || [])[1];
|
const dbgWeek = (location.href.match(/bumpweek=(\d+)/) || [])[1];
|
||||||
let week = dbgWeek ? +dbgWeek : (window.__mbPreg ? window.__mbPreg.week : null);
|
let week = dbgWeek ? +dbgWeek : (window.__mbPreg ? window.__mbPreg.week : null);
|
||||||
const stageOf = w => w == null || w < 20 ? null : w < 26 ? STAGES.flutter : w < 34 ? STAGES.active : STAGES.late;
|
const stageOf = w => w == null || w < 20 ? null : w < 26 ? STAGES.flutter : w < 34 ? STAGES.active : STAGES.late;
|
||||||
@@ -224,7 +225,7 @@
|
|||||||
const inChain = ft.chained || ft.chainLeft > 0;
|
const inChain = ft.chained || ft.chainLeft > 0;
|
||||||
if (inChain && !P.roll) ft.dur = (1.1 + Math.random() * .6) * (stage && stage.slow ? 1.3 : 1);
|
if (inChain && !P.roll) ft.dur = (1.1 + Math.random() * .6) * (stage && stage.slow ? 1.3 : 1);
|
||||||
// 原地连踢:脚丫 / 拳头 / 膝盖才有;晚期节奏放慢 1.4 倍。拍子排在第一下顶起来之后,整段时长跟着拉长
|
// 原地连踢:脚丫 / 拳头 / 膝盖才有;晚期节奏放慢 1.4 倍。拍子排在第一下顶起来之后,整段时长跟着拉长
|
||||||
ft.beats = null; ft.beat = 0; ft.pop = 0;
|
ft.beats = null; ft.beat = 0; ft.pop = 0; ft.wp = 0; ft.wseed = Math.random() * 1000;
|
||||||
if (!inChain && stage && stage.drum && !P.roll && !P.soft && P !== PARTS.kick && Math.random() < stage.drum) {
|
if (!inChain && stage && stage.drum && !P.roll && !P.soft && P !== PARTS.kick && Math.random() < stage.drum) {
|
||||||
const r = RHYTHMS[Math.random() * RHYTHMS.length | 0], m = stage.slow ? 1.4 : 1;
|
const r = RHYTHMS[Math.random() * RHYTHMS.length | 0], m = stage.slow ? 1.4 : 1;
|
||||||
let t = .7; ft.beats = r.map(d => (t += d * m));
|
let t = .7; ft.beats = r.map(d => (t += d * m));
|
||||||
@@ -329,6 +330,7 @@
|
|||||||
|
|
||||||
/* ---------- 物理 ---------- */
|
/* ---------- 物理 ---------- */
|
||||||
function step(dt) {
|
function step(dt) {
|
||||||
|
if (ft.wp > 0) ft.wp = Math.max(0, ft.wp - dt * 1.4);
|
||||||
if (mode === 'wait') {
|
if (mode === 'wait') {
|
||||||
if (active() && idle()) { wait -= dt; if (wait <= 0) appear(); }
|
if (active() && idle()) { wait -= dt; if (wait <= 0) appear(); }
|
||||||
} else if (mode === 'show') {
|
} else if (mode === 'show') {
|
||||||
@@ -338,14 +340,15 @@
|
|||||||
const k = Math.min(u / ft.dur, 1);
|
const k = Math.min(u / ft.dur, 1);
|
||||||
ft.ox = ft.rollDir * (P.slide || 30) * k; ft.oy = -6 * Math.sin(k * Math.PI); ft.wob = Math.sin(u * 1.2) * .08;
|
ft.ox = ft.rollDir * (P.slide || 30) * k; ft.oy = -6 * Math.sin(k * Math.PI); ft.wob = Math.sin(u * 1.2) * .08;
|
||||||
} else {
|
} else {
|
||||||
|
if (u < .5 && ft.wp < .9) ft.wp = Math.max(ft.wp, u * 2); // 第一下顶起来时褶皱一起出
|
||||||
ft.wob = Math.sin(u * 2.1) * .12;
|
ft.wob = Math.sin(u * 2.1) * .12;
|
||||||
if (u > ft.dur * .4 && !ft.kicked && P !== PARTS.kick && !P.soft && stage && stage.kick) { ft.kicked = true; ft.h.vel += 70; } // 中途再顶一下
|
if (u > ft.dur * .4 && !ft.kicked && P !== PARTS.kick && !P.soft && stage && stage.kick) { ft.kicked = true; ft.h.vel += 70; ft.wp = 1; } // 中途再顶一下
|
||||||
// 一拍:先往回缩一下(鼓包塌一点),0.12 秒后再顶上来,位置跟着微微挪(脚尖 / 脚跟轮流使劲)
|
// 一拍:先往回缩一下(鼓包塌一点),0.12 秒后再顶上来,位置跟着微微挪(脚尖 / 脚跟轮流使劲)
|
||||||
if (ft.beats && ft.beat < ft.beats.length && u >= ft.beats[ft.beat]) {
|
if (ft.beats && ft.beat < ft.beats.length && u >= ft.beats[ft.beat]) {
|
||||||
ft.beat++; ft.h.vel -= 85; ft.pop = .12;
|
ft.beat++; ft.h.vel -= 85; ft.pop = .12;
|
||||||
ft.ox += (Math.random() - .5) * 10; ft.oy += (Math.random() - .5) * 10;
|
ft.ox += (Math.random() - .5) * 10; ft.oy += (Math.random() - .5) * 10;
|
||||||
}
|
}
|
||||||
if (ft.pop > 0 && (ft.pop -= dt) <= 0) ft.h.vel += stage && stage.slow ? 95 : 150;
|
if (ft.pop > 0 && (ft.pop -= dt) <= 0) { ft.h.vel += stage && stage.slow ? 95 : 150; ft.wp = 1; ft.wseed += 7.3; } // 每一拍褶皱重新被踢出来
|
||||||
}
|
}
|
||||||
if (u > ft.dur) {
|
if (u > ft.dur) {
|
||||||
// 连续踢:这一下收得快一点,旁边紧接着再来,不等下一个间隔
|
// 连续踢:这一下收得快一点,旁边紧接着再来,不等下一个间隔
|
||||||
@@ -453,6 +456,47 @@
|
|||||||
}
|
}
|
||||||
blob(x, y, rx, ry, ang, dark.concat(lite));
|
blob(x, y, rx, ry, ang, dark.concat(lite));
|
||||||
}
|
}
|
||||||
|
// 褶皱:像从背面顶一层绷紧的膜 —— 从鼓包边缘向外放射出几道弯弯的褶,每道 = 一条暗线 + 旁边错开一点的亮线,
|
||||||
|
// 越往外越细越淡。k = 鼓得多高,pulse = 刚被踢那一下(连踢时每一拍都重新踢出来、更深一点)
|
||||||
|
function rnd(n) { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }
|
||||||
|
function wrinkles(x, y, rx, ry, ang, k, pulse, seed) {
|
||||||
|
if (k < .08) return;
|
||||||
|
const n = 8, R0 = Math.max(rx, ry);
|
||||||
|
cx.save(); cx.translate(x, y); cx.rotate(ang); cx.lineCap = 'round';
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
const a = (i + rnd(seed + i) * .6) / n * Math.PI * 2;
|
||||||
|
const len = (.5 + rnd(seed + i * 3.1) * .6) * (1 + pulse * .35);
|
||||||
|
const bend = (rnd(seed + i * 5.7) - .5) * .5;
|
||||||
|
const ca = Math.cos(a), sa = Math.sin(a);
|
||||||
|
// 起点贴着鼓包椭圆边,往外走
|
||||||
|
const sx0 = ca * rx * .7, sy0 = sa * ry * .7;
|
||||||
|
const ex = ca * (rx * .7 + R0 * len), ey = sa * (ry * .7 + R0 * len);
|
||||||
|
const mx = (sx0 + ex) / 2 - sa * R0 * bend * len, my = (sy0 + ey) / 2 + ca * R0 * bend * len;
|
||||||
|
const al = Math.min(1, k) * (.55 + .45 * pulse) * (.7 + .3 * rnd(seed + i * 9.2));
|
||||||
|
// 垂直于褶的方向;统一让「朝左上」的那一侧亮(光从左上来,和鼓包的高光一致),褶棱才立得起来
|
||||||
|
let nx = -sa, ny = ca;
|
||||||
|
{ const wa = ang, wx = nx * Math.cos(wa) - ny * Math.sin(wa), wy = nx * Math.sin(wa) + ny * Math.cos(wa); if (wx + wy > 0) { nx = -nx; ny = -ny; } }
|
||||||
|
// 每道褶 = 暗面 + 亮面两条宽软带,各用三层由宽到窄叠出虚边(canvas 的 filter:blur 在老 iOS 上不支持)
|
||||||
|
for (const [col, a1, off] of [['60,48,42', .16, -2.4], ['255,255,255', .36, 2.4]]) {
|
||||||
|
for (const [wm, am] of [[9, .45], [5.5, .7], [2.6, 1]]) {
|
||||||
|
const g = cx.createLinearGradient(sx0, sy0, ex, ey);
|
||||||
|
g.addColorStop(0, 'rgba(' + col + ',0)');
|
||||||
|
g.addColorStop(.15, 'rgba(' + col + ',' + (a1 * am * al).toFixed(3) + ')');
|
||||||
|
g.addColorStop(.6, 'rgba(' + col + ',' + (a1 * am * al * .5).toFixed(3) + ')');
|
||||||
|
g.addColorStop(1, 'rgba(' + col + ',0)');
|
||||||
|
cx.strokeStyle = g; cx.lineWidth = wm * (1 + pulse * .3);
|
||||||
|
const ox = nx * off, oy = ny * off;
|
||||||
|
cx.beginPath(); cx.moveTo(sx0 + ox, sy0 + oy); cx.quadraticCurveTo(mx + ox, my + oy, ex + ox, ey + oy); cx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 鼓包一圈绷紧的边:一道很淡的暗环,让「膜被撑开」更明显
|
||||||
|
cx.scale(rx, ry);
|
||||||
|
const g = cx.createRadialGradient(0, 0, .7, 0, 0, 1.15);
|
||||||
|
g.addColorStop(0, 'rgba(70,58,52,0)'); g.addColorStop(.5, 'rgba(70,58,52,' + (.12 * Math.min(1, k)).toFixed(3) + ')'); g.addColorStop(1, 'rgba(70,58,52,0)');
|
||||||
|
cx.fillStyle = g; cx.beginPath(); cx.arc(0, 0, 1.15, 0, 7); cx.fill();
|
||||||
|
cx.restore();
|
||||||
|
}
|
||||||
function paint() {
|
function paint() {
|
||||||
cx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
cx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
cx.clearRect(0, 0, cv.width, cv.height);
|
cx.clearRect(0, 0, cv.width, cv.height);
|
||||||
@@ -460,6 +504,8 @@
|
|||||||
const H = ft.h.v;
|
const H = ft.h.v;
|
||||||
if (H > .1) {
|
if (H > .1) {
|
||||||
const P = ft.part, sp = ft.spread.v, k = Math.min(H / 9, 1.3) / sp;
|
const P = ft.part, sp = ft.spread.v, k = Math.min(H / 9, 1.3) / sp;
|
||||||
|
// 2026-10-04 用户:「踢屏幕时前面要有比较明显的褶皱;连续踢就连续被踢出褶」—— 小鱼泡泡(早期)不出褶
|
||||||
|
if (!P.soft) wrinkles(ft.x + ft.ox + ox, ft.y + ft.oy + oy, P.rx * sp, P.ry * sp, ft.ang + (mode === 'show' ? ft.wob : 0), Math.min(H / P.amp, 1.2), ft.wp || 0, ft.wseed || 0);
|
||||||
blob(ft.x + ft.ox + ox, ft.y + ft.oy + oy, P.rx * sp, P.ry * sp, ft.ang + (mode === 'show' ? ft.wob : 0), [
|
blob(ft.x + ft.ox + ox, ft.y + ft.oy + oy, P.rx * sp, P.ry * sp, ft.ang + (mode === 'show' ? ft.wob : 0), [
|
||||||
// 2026-10-04 用户:「凸起就行,不要变颜色(之前踢完泛浅红)」—— 只留中性灰的背光阴影 + 白高光,不带任何暖色
|
// 2026-10-04 用户:「凸起就行,不要变颜色(之前踢完泛浅红)」—— 只留中性灰的背光阴影 + 白高光,不带任何暖色
|
||||||
[.16, .22, 1.02, 'rgba(70,62,58,' + (.1 * k).toFixed(3) + ')'],
|
[.16, .22, 1.02, 'rgba(70,62,58,' + (.1 * k).toFixed(3) + ')'],
|
||||||
|
|||||||
168
js/hero-fx.js
168
js/hero-fx.js
@@ -7,7 +7,7 @@
|
|||||||
孕囊大小 = .hero-baby 的 --k(相对原 25 周囊的倍数),CSS 里围绕同一圆心缩放、带过渡。
|
孕囊大小 = .hero-baby 的 --k(相对原 25 周囊的倍数),CSS 里围绕同一圆心缩放、带过渡。
|
||||||
调试:URL 带 kidweek=12 强制按 12 周显示。
|
调试:URL 带 kidweek=12 强制按 12 周显示。
|
||||||
② 阳光水波:#heroFx 一张画布,screen 混合叠在宝宝上、文字下。
|
② 阳光水波:#heroFx 一张画布,screen 混合叠在宝宝上、文字下。
|
||||||
光束从顶上打进来 + 水底焦散 + 悬浮微粒;羊水囊整体挂 SVG 位移滤镜做液体折射(详见下面那段)。
|
柔光束 + 柔和水波光影 + 悬浮微粒,宝宝区域避开(详见下面那段)。
|
||||||
不在首页 / 页面隐藏 / 头图滚出视口时停画;系统「减少动态效果」下整块不画(CSS 也隐藏)。 */
|
不在首页 / 页面隐藏 / 头图滚出视口时停画;系统「减少动态效果」下整块不画(CSS 也隐藏)。 */
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
@@ -60,138 +60,104 @@
|
|||||||
else setTimeout(() => { if (cur < 0) show(DEFAULT); }, 2500);
|
else setTimeout(() => { if (cur < 0) show(DEFAULT); }, 2500);
|
||||||
|
|
||||||
/* ---------------- 阳光 + 水波 ----------------
|
/* ---------------- 阳光 + 水波 ----------------
|
||||||
2026-10-04 二版(用户:「水波纹上面要有光束打进来,水波纹要模拟真实羊水的感觉」):
|
2026-10-04 三版(用户:「光束太硬,要柔柔地射进来;水波纹可以有,但宝宝的脸不能变;不要白色网状水波纹」):
|
||||||
· 折射:.hero-baby(羊水囊 + 宝宝)挂一个 SVG 位移滤镜,噪声图慢慢变形 → 隔着一层液体看的那种轻微晃动
|
· 光束:画在 1/6 分辨率的小画布上再放大,边缘天然糊开 → 柔光;宽、淡、慢慢摆、忽明忽暗
|
||||||
· 焦散:水底那种不规则、不停变形的细亮网(游动点的细胞边界 + 正弦扭曲),低分辨率算完放大,囊附近更亮
|
· 水波:极低分辨率算几层正弦叠出的大片明暗,放大后是柔和的、缓缓流动的光影(不是网)
|
||||||
· 光束:从顶上斜着打进来,三层叠出软边,各自慢慢摆、忽明忽暗,越往下越散
|
· 宝宝区域(孕囊中心 70% 半径内)水波压到很淡、光束减半;不再给孕囊挂任何形变滤镜,宝宝的脸一像素都不动
|
||||||
· 悬浮微粒:羊水里的小颗粒,慢慢漂、闪一下,经过光束时更亮 */
|
· 悬浮微粒:羊水里的小颗粒,慢慢漂、闪一下 */
|
||||||
const cv = document.getElementById('heroFx');
|
const cv = document.getElementById('heroFx');
|
||||||
if (!cv || reduce) return;
|
if (!cv || reduce) return;
|
||||||
const hero = cv.parentNode, home = document.getElementById('screen-home');
|
const hero = cv.parentNode, home = document.getElementById('screen-home');
|
||||||
const ctx = cv.getContext('2d');
|
const ctx = cv.getContext('2d');
|
||||||
|
const RS = 6; // 光束小画布缩小倍数
|
||||||
// 折射滤镜:baseFrequency 在 16 秒里来回变 → 噪声缓缓「流动」;位移 5px,看得出是液体,又不至于把宝宝扭坏
|
const rc = document.createElement('canvas'), rx = rc.getContext('2d');
|
||||||
const NS = 'http://www.w3.org/2000/svg';
|
const CW = 32; // 水波低分辨率宽(越低越柔)
|
||||||
const svg = document.createElementNS(NS, 'svg');
|
|
||||||
svg.setAttribute('width', '0'); svg.setAttribute('height', '0');
|
|
||||||
svg.setAttribute('aria-hidden', 'true'); svg.style.position = 'absolute';
|
|
||||||
svg.innerHTML = '<filter id="mbFluid" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB">' +
|
|
||||||
'<feTurbulence type="fractalNoise" baseFrequency="0.011 0.016" numOctaves="2" seed="7" result="n">' +
|
|
||||||
'<animate attributeName="baseFrequency" dur="16s" values="0.011 0.016;0.016 0.011;0.013 0.018;0.011 0.016" repeatCount="indefinite"/>' +
|
|
||||||
'</feTurbulence><feDisplacementMap in="SourceGraphic" in2="n" scale="5" xChannelSelector="R" yChannelSelector="G"/></filter>';
|
|
||||||
document.body.appendChild(svg);
|
|
||||||
box.classList.add('is-fluid');
|
|
||||||
|
|
||||||
const CW = 96; // 焦散低分辨率宽(太低会糊成团,看不出是光网)
|
|
||||||
const off = document.createElement('canvas'), oc = off.getContext('2d');
|
const off = document.createElement('canvas'), oc = off.getContext('2d');
|
||||||
let tick = 0, W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0, prev = 0;
|
let tick = 0, W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0, prev = 0;
|
||||||
let SX = 0, SY = 0, SR = 1; // 羊水囊圆心/半径(CSS px),焦散在囊附近更亮
|
let SX = 0, SY = 0, SR = 1; // 孕囊圆心/半径(CSS px)
|
||||||
function size() {
|
function size() {
|
||||||
const r = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
|
const r = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
|
||||||
dpr = Math.min(devicePixelRatio || 1, 2);
|
dpr = Math.min(devicePixelRatio || 1, 2);
|
||||||
W = r.width; H = r.height;
|
W = r.width; H = r.height;
|
||||||
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
|
||||||
|
rc.width = Math.max(8, Math.round(W / RS)); rc.height = Math.max(8, Math.round(H / RS));
|
||||||
ch = Math.max(8, Math.round(CW * H / W));
|
ch = Math.max(8, Math.round(CW * H / W));
|
||||||
off.width = CW; off.height = ch; img = oc.createImageData(CW, ch);
|
off.width = CW; off.height = ch; img = oc.createImageData(CW, ch);
|
||||||
SX = b.left - r.left + b.width / 2; SY = b.top - r.top + b.height / 2; SR = Math.max(b.width, 60) / 2;
|
SX = b.left - r.left + b.width / 2; SY = b.top - r.top + b.height / 2; SR = Math.max(b.width, 60) / 2;
|
||||||
}
|
}
|
||||||
// 焦散:真实水底那种不规则细亮网 = 一群慢慢游动的点的「细胞边界」(到最近两点距离差 ≈ 0 的地方最亮),
|
// 宝宝保护:孕囊中心附近 → 0,囊边 → 1
|
||||||
// 坐标再加一点正弦扭曲让边线弯起来;大小两层叠加,一层快一层慢,网格才会像水一样不停变形
|
function guard(x, y) {
|
||||||
function mkLayer(n, cell, seed) {
|
const d = Math.hypot(x - SX, y - SY) / SR;
|
||||||
let r = seed;
|
return d < .45 ? 0 : d > .95 ? 1 : (d - .45) / .5;
|
||||||
const rnd = () => ((r = (r * 16807) % 2147483647) / 2147483647);
|
|
||||||
return { cell, pts: Array.from({ length: n }, () => [rnd(), rnd(), rnd() * 6.28, .35 + rnd() * .5]) };
|
|
||||||
}
|
}
|
||||||
const LAYERS = [[mkLayer(26, 22, 11), .8, 1], [mkLayer(14, 32, 29), .5, .8]];
|
// 水波:四层不同方向、不同速度的长波叠加,取正半部分 → 一片片柔和的亮斑缓缓流过
|
||||||
const PX = new Float32Array(40), PY = new Float32Array(40);
|
function water(t) {
|
||||||
function caustics(t) {
|
const d = img.data, T = t * .45;
|
||||||
const d = img.data, sx = SX / W * CW, sy = SY / H * ch, sr = SR / W * CW;
|
|
||||||
const acc = caustics.acc && caustics.acc.length === CW * ch ? caustics.acc : (caustics.acc = new Float32Array(CW * ch));
|
|
||||||
acc.fill(0);
|
|
||||||
const k = CW / 120;
|
|
||||||
for (const [L, gain, speed] of LAYERS) {
|
|
||||||
const tt = t * speed, cell = L.cell * k, sg = 1 / (2 * (cell * .06) ** 2), n = L.pts.length;
|
|
||||||
for (let i = 0; i < n; i++) {
|
|
||||||
const [bx, by, ph, sp] = L.pts[i];
|
|
||||||
PX[i] = bx * CW + Math.cos(tt * sp + ph) * cell * .35;
|
|
||||||
PY[i] = by * ch + Math.sin(tt * sp * 1.3 + ph) * cell * .35;
|
|
||||||
}
|
|
||||||
for (let y = 0; y < ch; y++) {
|
|
||||||
const ox = Math.sin(y * .11 / k + tt * .7) * 2.2 * k;
|
|
||||||
for (let x = 0; x < CW; x++) {
|
|
||||||
const wx = x + ox, wy = y + Math.sin(x * .09 / k - tt * .6) * 2.2 * k;
|
|
||||||
let m1 = 1e9, m2 = 1e9;
|
|
||||||
for (let i = 0; i < n; i++) {
|
|
||||||
const dx = wx - PX[i], dy = wy - PY[i], q = dx * dx + dy * dy;
|
|
||||||
if (q < m1) { m2 = m1; m1 = q; } else if (q < m2) m2 = q;
|
|
||||||
}
|
|
||||||
const e = Math.sqrt(m2) - Math.sqrt(m1);
|
|
||||||
acc[y * CW + x] += Math.exp(-e * e * sg) * gain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let y = 0; y < ch; y++) {
|
for (let y = 0; y < ch; y++) {
|
||||||
for (let x = 0; x < CW; x++) {
|
for (let x = 0; x < CW; x++) {
|
||||||
let v = acc[y * CW + x]; v = v >= 1 ? 1 : Math.pow(v, 1.3);
|
const u = x / CW * 6, v = y / CW * 6;
|
||||||
// 囊里亮、囊外淡,上半部比下半部亮(光从上面来)
|
let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .4) + Math.sin((u - v) * .9 + T * .6) + Math.sin(Math.hypot(u - 4.5, v - 1) * 1.6 - T * 1.1);
|
||||||
const dd = Math.hypot(x - sx, y - sy) / sr;
|
w = w / 4; w = w > 0 ? w * w : 0; // 只留亮的那半,平方让过渡更软
|
||||||
const w = (.3 + .7 * Math.max(0, 1 - Math.max(0, dd - .6) * 1.8)) * (1 - y / ch * .45);
|
const X = x / CW * W, Y = y / ch * H;
|
||||||
|
const g = .15 + .85 * guard(X, Y);
|
||||||
const o = (y * CW + x) * 4;
|
const o = (y * CW + x) * 4;
|
||||||
d[o] = 255; d[o + 1] = 240; d[o + 2] = 220; d[o + 3] = v * 255 * w;
|
d[o] = 255; d[o + 1] = 238; d[o + 2] = 214; d[o + 3] = w * 200 * g * (1 - y / ch * .35);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
oc.putImageData(img, 0, 0);
|
oc.putImageData(img, 0, 0);
|
||||||
}
|
}
|
||||||
function drawCaustics() {
|
function drawWater() {
|
||||||
ctx.globalCompositeOperation = 'lighter';
|
ctx.globalCompositeOperation = 'lighter';
|
||||||
ctx.imageSmoothingEnabled = true;
|
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
|
||||||
ctx.globalAlpha = 1;
|
ctx.globalAlpha = .55;
|
||||||
ctx.drawImage(off, 0, 0, W, H);
|
ctx.drawImage(off, 0, 0, W, H);
|
||||||
ctx.globalAlpha = 1;
|
ctx.globalAlpha = 1;
|
||||||
}
|
}
|
||||||
// 光束:光源在头图上方偏右的画外,斜着往左下打;每道画三层(宽/中/窄)叠出软边
|
// 柔光束:光源在头图上方偏右画外;每道是一条很宽的渐变扇形,画在小画布上再放大
|
||||||
const RAYS = [[-.16, .030, .7], [-.07, .018, .9], [.01, .040, .6], [.09, .022, 1], [.17, .032, .7], [.26, .02, .55]];
|
const RAYS = [[-.12, .07, .8], [0, .05, .7], [.11, .08, 1], [.23, .06, .7]];
|
||||||
let rayA = [];
|
|
||||||
function rays(t) {
|
function rays(t) {
|
||||||
const ox = W * .78, oy = -H * .9, L = H * 2.6;
|
const w = rc.width, h = rc.height, ox = w * .8, oy = -h * .9, L = h * 2.8;
|
||||||
ctx.globalCompositeOperation = 'lighter';
|
rx.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
rayA = [];
|
rx.clearRect(0, 0, w, h);
|
||||||
RAYS.forEach(([a0, w, al], i) => {
|
rx.globalCompositeOperation = 'lighter';
|
||||||
const a = Math.PI * .58 + a0 + Math.sin(t * .11 + i * 1.9) * .025;
|
RAYS.forEach(([a0, ww, al], i) => {
|
||||||
const k = al * (.55 + .45 * Math.sin(t * .29 + i * 2.1)) * (.85 + .15 * Math.sin(t * 1.3 + i * 3.7));
|
const a = Math.PI * .6 + a0 + Math.sin(t * .09 + i * 1.9) * .03;
|
||||||
rayA.push([a, w, k]);
|
const k = al * (.6 + .4 * Math.sin(t * .23 + i * 2.1));
|
||||||
[[2.2, .25], [1.3, .5], [.6, 1]].forEach(([wm, am]) => {
|
const wv = ww * (1 + .2 * Math.sin(t * .17 + i));
|
||||||
const ww = w * wm;
|
const gr = rx.createLinearGradient(ox, oy, ox + Math.cos(a) * L * .8, oy + Math.sin(a) * L * .8);
|
||||||
const gr = ctx.createLinearGradient(ox, oy, ox + Math.cos(a) * L * .75, oy + Math.sin(a) * L * .75);
|
gr.addColorStop(0, 'rgba(255,248,228,0)');
|
||||||
gr.addColorStop(0, 'rgba(255,250,230,0)');
|
gr.addColorStop(.35, 'rgba(255,246,224,' + (.34 * k).toFixed(3) + ')');
|
||||||
gr.addColorStop(.36, 'rgba(255,248,226,' + (.42 * k * am).toFixed(3) + ')');
|
gr.addColorStop(.65, 'rgba(255,240,215,' + (.15 * k).toFixed(3) + ')');
|
||||||
gr.addColorStop(.62, 'rgba(255,242,215,' + (.22 * k * am).toFixed(3) + ')');
|
gr.addColorStop(1, 'rgba(255,235,205,0)');
|
||||||
gr.addColorStop(1, 'rgba(255,232,200,0)');
|
rx.fillStyle = gr;
|
||||||
ctx.fillStyle = gr;
|
rx.beginPath(); rx.moveTo(ox, oy);
|
||||||
ctx.beginPath(); ctx.moveTo(ox, oy);
|
rx.lineTo(ox + Math.cos(a - wv) * L, oy + Math.sin(a - wv) * L);
|
||||||
ctx.lineTo(ox + Math.cos(a - ww) * L, oy + Math.sin(a - ww) * L);
|
rx.lineTo(ox + Math.cos(a + wv) * L, oy + Math.sin(a + wv) * L);
|
||||||
ctx.lineTo(ox + Math.cos(a + ww) * L, oy + Math.sin(a + ww) * L);
|
rx.closePath(); rx.fill();
|
||||||
ctx.closePath(); ctx.fill();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
return [ox, oy];
|
// 宝宝区域光束减半:在小画布上挖一个软边的「淡区」
|
||||||
|
rx.globalCompositeOperation = 'destination-out';
|
||||||
|
const sx = SX / RS, sy = SY / RS, sr = SR / RS, g = rx.createRadialGradient(sx, sy, 0, sx, sy, sr * .9);
|
||||||
|
g.addColorStop(0, 'rgba(0,0,0,.5)'); g.addColorStop(.6, 'rgba(0,0,0,.35)'); g.addColorStop(1, 'rgba(0,0,0,0)');
|
||||||
|
rx.fillStyle = g; rx.beginPath(); rx.arc(sx, sy, sr, 0, 6.2832); rx.fill();
|
||||||
|
ctx.globalCompositeOperation = 'lighter';
|
||||||
|
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
|
||||||
|
ctx.drawImage(rc, 0, 0, W, H);
|
||||||
}
|
}
|
||||||
// 悬浮微粒:慢慢往上漂、左右游,忽明忽暗;落在光束里更亮
|
// 悬浮微粒:慢慢往上漂、左右游,忽明忽暗;孕囊中心附近不画,免得落在宝宝脸上
|
||||||
const DOTS = Array.from({ length: 34 }, () => ({ x: Math.random(), y: Math.random(), r: .5 + Math.random() * 1.4,
|
const DOTS = Array.from({ length: 26 }, () => ({ x: Math.random(), y: Math.random(), r: .5 + Math.random() * 1.2,
|
||||||
vx: (Math.random() - .5) * .006, vy: -(.004 + Math.random() * .008), ph: Math.random() * 6.3, sp: .6 + Math.random() * 1.4 }));
|
vx: (Math.random() - .5) * .006, vy: -(.004 + Math.random() * .008), ph: Math.random() * 6.3, sp: .6 + Math.random() * 1.4 }));
|
||||||
function dots(t, dt, o) {
|
function dots(t, dt) {
|
||||||
ctx.globalCompositeOperation = 'lighter';
|
ctx.globalCompositeOperation = 'lighter';
|
||||||
for (const p of DOTS) {
|
for (const p of DOTS) {
|
||||||
p.x += (p.vx + Math.sin(t * .5 + p.ph) * .002) * dt; p.y += p.vy * dt;
|
p.x += (p.vx + Math.sin(t * .5 + p.ph) * .002) * dt; p.y += p.vy * dt;
|
||||||
if (p.y < -.03) { p.y = 1.03; p.x = Math.random(); }
|
if (p.y < -.03) { p.y = 1.03; p.x = Math.random(); }
|
||||||
if (p.x < -.03) p.x = 1.03; else if (p.x > 1.03) p.x = -.03;
|
if (p.x < -.03) p.x = 1.03; else if (p.x > 1.03) p.x = -.03;
|
||||||
const X = p.x * W, Y = p.y * H;
|
const X = p.x * W, Y = p.y * H, gd = guard(X, Y);
|
||||||
let lit = 0;
|
if (gd <= 0) continue;
|
||||||
const ang = Math.atan2(Y - o[1], X - o[0]);
|
const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * gd;
|
||||||
for (const [a, w, k] of rayA) { const d = Math.abs(ang - a); if (d < w * 1.3) lit = Math.max(lit, k * (1 - d / (w * 1.3))); }
|
|
||||||
const al = (.18 + .3 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * (1 + lit * 1.6);
|
|
||||||
const R = p.r * 2.4, g = ctx.createRadialGradient(X, Y, 0, X, Y, R);
|
const R = p.r * 2.4, g = ctx.createRadialGradient(X, Y, 0, X, Y, R);
|
||||||
g.addColorStop(0, 'rgba(255,250,238,' + Math.min(al, .9).toFixed(3) + ')');
|
g.addColorStop(0, 'rgba(255,250,238,' + al.toFixed(3) + ')');
|
||||||
g.addColorStop(1, 'rgba(255,250,238,0)');
|
g.addColorStop(1, 'rgba(255,250,238,0)');
|
||||||
ctx.fillStyle = g; ctx.beginPath(); ctx.arc(X, Y, R, 0, 6.2832); ctx.fill();
|
ctx.fillStyle = g; ctx.beginPath(); ctx.arc(X, Y, R, 0, 6.2832); ctx.fill();
|
||||||
}
|
}
|
||||||
@@ -205,15 +171,15 @@
|
|||||||
const t = now / 1000;
|
const t = now / 1000;
|
||||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
ctx.clearRect(0, 0, W, H);
|
ctx.clearRect(0, 0, W, H);
|
||||||
if ((tick ^= 1)) caustics(t); // 焦散 15fps 算一次就够(水底光网本来就慢),每帧照画
|
if ((tick ^= 1)) water(t); // 水波 15fps 算一次就够,每帧照画
|
||||||
drawCaustics();
|
drawWater();
|
||||||
const o = rays(t);
|
rays(t);
|
||||||
dots(t, dt, o);
|
dots(t, dt);
|
||||||
}
|
}
|
||||||
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
|
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
|
||||||
size();
|
size();
|
||||||
addEventListener('resize', () => { size(); kick(); });
|
addEventListener('resize', () => { size(); kick(); });
|
||||||
box.addEventListener('transitionend', size); // 换阶段后孕囊尺寸变了,焦散的「囊附近更亮」跟着挪
|
box.addEventListener('transitionend', size); // 换阶段后孕囊尺寸变了,保护区跟着挪
|
||||||
document.addEventListener('visibilitychange', kick);
|
document.addEventListener('visibilitychange', kick);
|
||||||
if (home) new MutationObserver(kick).observe(home, { attributes: true, attributeFilter: ['class'] });
|
if (home) new MutationObserver(kick).observe(home, { attributes: true, attributeFilter: ['class'] });
|
||||||
if ('IntersectionObserver' in window) new IntersectionObserver(es => { seen = es[0].isIntersecting; kick(); }).observe(hero);
|
if ('IntersectionObserver' in window) new IntersectionObserver(es => { seen = es[0].isIntersecting; kick(); }).observe(hero);
|
||||||
|
|||||||
@@ -309,8 +309,6 @@ a.skip:focus{left:16px;top:16px}
|
|||||||
-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
|
-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
|
||||||
mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
|
mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
|
||||||
.hero-kid.is-on{opacity:1}
|
.hero-kid.is-on{opacity:1}
|
||||||
/* 液体折射(SVG 滤镜 #mbFluid 由 hero-fx.js 注入;减少动态效果时 JS 不加这个类) */
|
|
||||||
.hero-baby.is-fluid{filter:url(#mbFluid)}
|
|
||||||
/* 阳光 + 水波:整块橙区一张画布,加色混合,叠在宝宝上、文字下 */
|
/* 阳光 + 水波:整块橙区一张画布,加色混合,叠在宝宝上、文字下 */
|
||||||
.hero-fx{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
|
.hero-fx{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
|
||||||
.hero-fx.is-on{opacity:1}
|
.hero-fx.is-on{opacity:1}
|
||||||
|
|||||||
Reference in New Issue
Block a user