龙虾老师品牌集成设计规范

复制 /** * 活眼追踪 — 独立模块 * @param {SVGElement} svgEl - 包含瞳孔的SVG元素 * @param {Object} opts * @param {string} opts.leftPupilSel - 左瞳孔选择器 (默认 '.pupil-l') * @param {string} opts.rightPupilSel - 右瞳孔选择器 (默认 '.pupil-r') * @param {number} opts.maxOffset - 最大偏移px (默认 3.5) */ function initEyeTracking(svgEl, opts = {}) { const { leftPupilSel = '.pupil-l', rightPupilSel = '.pupil-r', maxOffset = 3.5 } = opts; const lp = svgEl.querySelector(leftPupilSel); const rp = svgEl.querySelector(rightPupilSel); if (!lp || !rp) return; // 眼眶中心坐标 (SVG内部坐标系) const lcx = +lp.getAttribute('cx'), lcy = +lp.getAttribute('cy'); const rcx = +rp.getAttribute('cx'), rcy = +rp.getAttribute('cy'); document.addEventListener('mousemove', e => { const rect = svgEl.getBoundingClientRect(); const svgW = rect.width, svgH = rect.height; const viewBox = svgEl.viewBox.baseVal; const scaleX = viewBox.width / svgW; const scaleY = viewBox.height / svgH; // 鼠标相对SVG中心的偏移 (SVG坐标) const dx = (e.clientX - rect.left - svgW/2) * scaleX; const dy = (e.clientY - rect.top - svgH/2) * scaleY; const dist = Math.sqrt(dx*dx + dy*dy); const factor = Math.min(dist / 200, 1) * maxOffset; const angle = Math.atan2(dy, dx); const ox = Math.cos(angle) * factor; const oy = Math.sin(angle) * factor; // 精准映射到SVG内部坐标 const cx = Math.cos(angle) * factor; const cy = Math.sin(angle) * factor; lp.setAttribute('cx', lcx + cx); lp.setAttribute('cy', lcy + cy); rp.setAttribute('cx', rcx + cx); rp.setAttribute('cy', rcy + cy); }); } // 使用示例 const mySvg = document.querySelector('#myLogo'); initEyeTracking(mySvg, { maxOffset: 4 });

复制 /* CSS: 入场动画 */ @keyframes logoGrow { 0% { opacity:0; transform:scale(0.3) rotate(-10deg); filter:blur(4px); } 60% { opacity:1; transform:scale(1.05) rotate(1deg); filter:blur(0); } 100% { opacity:1; transform:scale(1) rotate(0); filter:blur(0); } } .logo-entrance { animation: logoGrow 0.8s cubic-bezier(0.22,1,0.36,1) forwards; } // JS: 触发入场 function triggerEntrance(el) { el.classList.remove('logo-entrance'); void el.offsetWidth; // 强制回流 el.classList.add('logo-entrance'); }

复制 /** * 音效反馈系统 — Web Audio API * 6种音色，零外部文件 */ let _actx; function getAudioCtx() { if (!_actx) _actx = new (AudioContext || webkitAudioContext)(); return _actx; } function sfxBubble() { // 水泡 const a = getAudioCtx(), o = a.createOscillator(), g = a.createGain(); o.type='sine'; o.frequency.setValueAtTime(600,a.currentTime); o.frequency.exponentialRampToValueAtTime(200,a.currentTime+0.18); g.gain.setValueAtTime(0.12,a.currentTime); g.gain.exponentialRampToValueAtTime(0.001,a.currentTime+0.2); o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime+0.2); } function sfxClick() { // 咔嗒 const a = getAudioCtx(), o = a.createOscillator(), g = a.createGain(); o.type='square'; o.frequency.value=800; g.gain.setValueAtTime(0.1,a.currentTime); g.gain.exponentialRampToValueAtTime(0.001,a.currentTime+0.06); o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime+0.06); } function sfxEntry() { // 上扬音阶 const a = getAudioCtx(); [440,550,660].forEach((f,i) => { const o = a.createOscillator(), g = a.createGain(); o.type='sine'; o.frequency.value=f; g.gain.setValueAtTime(0.08, a.currentTime+i*0.08); g.gain.exponentialRampToValueAtTime(0.001, a.currentTime+i*0.08+0.15); o.connect(g).connect(a.destination); o.start(a.currentTime+i*0.08); o.stop(a.currentTime+i*0.08+0.15); }); } function sfxStomp() { // 踩踏 const a = getAudioCtx(), o = a.createOscillator(), g = a.createGain(); o.type='triangle'; o.frequency.value=110; g.gain.setValueAtTime(0.18,a.currentTime); g.gain.exponentialRampToValueAtTime(0.001,a.currentTime+0.12); o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime+0.12); } function sfxGrow() { // 生长叮 const a = getAudioCtx(), o = a.createOscillator(), g = a.createGain(); o.type='sine'; o.frequency.value=880; g.gain.setValueAtTime(0.1,a.currentTime); g.gain.exponentialRampToValueAtTime(0.001,a.currentTime+0.3); o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime+0.3); } function sfxTrans() { // 过渡三角波 const a = getAudioCtx(), o = a.createOscillator(), g = a.createGain(); o.type='triangle'; o.frequency.setValueAtTime(330,a.currentTime); o.frequency.exponentialRampToValueAtTime(660,a.currentTime+0.25); g.gain.setValueAtTime(0.08,a.currentTime); g.gain.exponentialRampToValueAtTime(0.001,a.currentTime+0.3); o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime+0.3); }

复制 /** * 品牌密度配置模板 * 根据页面类型选择合适的品牌触点组合 */ const BRAND_PRESETS = { // 首页/Landing — 全量品牌 landing: { entrance: true, // Logo生长入场 badge: 'lg', // 大角标 eyeTrack: true, // 活眼追踪 watermark: 'full', // 全身水印 sound: true, // 音效开启 footer: true, // 页脚签章 }, // 工具页 — 中等品牌 tool: { entrance: false, badge: 'sm', // 小角标 eyeTrack: false, watermark: 'none', sound: false, footer: true, }, // 内容页 — 轻量品牌 content: { entrance: false, badge: 'xs', // 微角标 eyeTrack: false, watermark: 'half', // 半身水印 sound: false, footer: true, }, // 弹窗/模态 — 最小品牌 modal: { entrance: false, badge: 'none', eyeTrack: false, watermark: 'none', sound: false, footer: false, }, };