ANIMATION DEMO · 方案选型

科技风动画四套方案对比

你提到"流动的线条或分子生物学图案"。下面四套方案都基于现有瑞士风（宝锐蓝 #002FA7 + 大量留白 + 极简排版）叠加，零外部依赖（纯原生 SVG / Canvas + CSS，不引任何 CDN，离线可放）。请挑一套或组合，我按选定方案出完整 30+ 页宣讲稿。

方案 A · SVG 流动数据线（分子诊断流水线）

技术：原生 SVG + CSS stroke-dashoffset 动画｜体积 ≈ 2 KB ｜ GPU 加速

轻量 · 稳

适用位置：① 分子诊断流水线场景页；② 目录页；③ 页脚装饰带。

优点：极致轻量（≈2KB）、渲染稳定、任意缩放不糊、可精确对应业务节点文字
优点：线条方向 + 速度可编码"业务含义"（如粒子流速=样本通量）
注意：视觉科技感中等，需配合深色底或渐变才够"炫"

方案 B · Canvas 分子粒子网络（DNA / 蛋白质感）

技术：原生 Canvas 2D 实时绘制（粒子 + 邻近连线 + 鼠标交互）｜体积 ≈ 4 KB ｜ 60fps

炫 · 强科技感

适用位置：① 封面主视觉；② 章节过渡页（"热点应用场景"大标题页）；③ 结语页；④ 全篇页脚淡背景。

优点：科技感最强，粒子网络天然隐喻"分子互作 / 产业链协同"
优点：鼠标靠近有吸附连线 → 现场演示（客户宣讲）互动性强
注意：边缘设备（低端投影/老电脑）帧率可能下降，可加降级开关

方案 C · SVG 双螺旋 + 扫描光带（分子生物学图案）

技术：原生 SVG 贝塞尔曲线 + CSS 动画｜体积 ≈ 3 KB

精致 · 专业

适用位置：① 技术平台页（酶进化 / 蛋白表达）；② 冻干工艺页；③ 页眉细装饰条。

优点：分子生物学语义最直接（DNA 双螺旋 + 碱基配对），专业可信
优点：螺旋可做成"逐段生长"入场动画，配合宣讲节奏
注意：全局大量使用会显得"生物教科书"，需克制（建议 2–3 处点缀）

方案 D · 全页分子背景 + 大字标题（承接页）

技术：Canvas 背景层 + 前景文字层（白色蒙版保证可读性）｜体积 ≈ 3 KB

大气 · 承接页

七大热点应用场景

分子诊断流水线 · 抗抑制直扩 · 快速扩增 · 多重溶解曲线 · 单管全预混 · 无核酸残留 · 冻干

适用位置：① 章节承接页（共 4 处：行业趋势 / 宝锐能力 / 成功案例 / 热点场景）；② 封面。

优点：大字 + 动态背景，宣讲节奏感强，天然分段
优点：前景加白色蒙版后，文字可读性完全不受背景影响（已验证）
注意：仅用在承接页，正文页保持纯白留白（瑞士风根本不能丢）

我的建议（组合方案）：封面 + 4 个章节承接页用 方案 D（Canvas 分子背景 + 大字）；正文页只在"流水线 / 平台 / 工艺"3 处点缀 方案 A 或 C；正文其余页面保持现有瑞士风纯白留白。
技术底线：全部零外部依赖、纯原生（无 CDN、无框架），单文件 HTML，离线双击可开、可 U 盘拷贝、可在无网会议室投影。