logo-animation

Logo 动效

用一个清晰的创意、符合品牌风格的几何造型和利落的收尾，为品牌标志注入活力。可用于网页（SVG/Lottie）、视频片头/片尾或应用启动画面，并始终提供静态的结束帧作为回退方案。

适用场景

• 制作开场短片、结束标识、应用启动画面或加载器空闲循环。
• 在着陆页主视觉或精彩集锦视频中展示品牌标志。
• 绘制 SVG 标志、逐块擦除/构建标志，或将图标变形为文字标志。
• 将标志最终定格与声音标志的节拍同步。

核心原则

每个标志只选用一种技法——绘制、构建或变形——不要同时使用多种技法。展示时长为 0.8–2.5 秒。切勿扭曲品牌几何造型；缩放和淡入淡出是安全的，倾斜和挤压通常不合适。遵守安全留白（确保标志的最小边距不受动效元素干扰）。始终提供 prefers-reduced-motion 方案，直接显示最终标志，不添加动效。

技法指南

技法	适用场景	实现机制
描边绘制	线条标志、字母组合、签名	stroke-dashoffset 1→0
遮罩擦除 / 显示	填充形状、渐变	为 <clipPath> / <mask> 矩形添加动画
逐步构建（错开）	多部分标志、网格	对各组分别设置不透明度和变换，并错开显示
变形	图标 ↔ 文字标志、形状→标志	GSAP MorphSVG 或匹配路径插值
空闲循环	加载器、环境氛围启动画面	无缝循环变换（旋转/脉冲）
文字标志	字标	逐字母遮罩/平移，并错开显示

快速开始：SVG 描边绘制

最快捷且符合品牌风格的网页展示效果。每条路径自行绘制，然后填充定格。

<svg viewBox="0 0 200 80" id="logo">
  <path class="ink" d="M10 60 L40 20 L70 60" fill="none"
        stroke="#111" stroke-width="6" stroke-linecap="round"
        pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
</svg>
<style>
  @keyframes draw { to { stroke-dashoffset: 0; } }
  #logo .ink { animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
  @media (prefers-reduced-motion: reduce) {
    #logo .ink { animation: none; stroke-dashoffset: 0; }
  }
</style>

pathLength="1" 会将每条路径的长度标准化为 1，因此无论几何形状如何，都可以使用相同的 stroke-dasharray/offset 值。使用 animation-delay 错开多条描边的动画。

快速开始：错开逐步构建（GSAP）

import gsap from "gsap";
// each <g class="piece"> is one mark component
gsap.from(".piece", {
  opacity: 0, scale: 0.85, transformOrigin: "50% 50%",
  duration: 0.5, ease: "back.out(1.6)", stagger: 0.08,
  onComplete: () => gsap.to("#mark", { scale: 1, duration: 0.2, ease: "power2.out" })
});

分组顺序很重要：先显示底层/容器，再显示点缀元素，最后显示文字标志，让视线落在名称上。

声音标志同步

如果有音频，品牌标志的最终定格帧必须恰好落在声音强调点（“叮”声/呼啸声的峰值）上。先确定音频并找到峰值时间码，再调整展示时长，让标志在该帧跳至完全不透明/完整缩放状态。1.0 秒的展示在 1.2 秒的声音标识处定格，听起来会很精致；若定格脱离声音节奏，则会显得廉价。可在节拍处添加轻微的过冲后回弹定格（缩放从 1.04→1.00，历时约 0.15 秒），增强冲击力。

交付目标

• 网页、交互式内容 / 主视觉：内联 SVG + CSS 或 GSAP。体积最小，任意尺寸下都清晰，且可脚本控制。
• 产品 / 应用，设计师制作：Lottie（通过 Bodymovin 从 After Effects 导出的 .json）。使用 lottie-web 或 @lottiefiles/dotlottie-web；设置 loop、autoplay 和海报回退帧。
• 视频片头/片尾：使用 Remotion（React）或 After Effects 渲染为 ProRes/H.264。以 2 倍尺寸预渲染，确保清晰度。

// Lottie delivery with reduced-motion guard
import { DotLottie } from "@lottiefiles/dotlottie-web";
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const dl = new DotLottie({
  canvas: document.querySelector("#logo-canvas"),
  src: "/logo.lottie", autoplay: !reduce, loop: false,
});
if (reduce) dl.addEventListener("load", () => dl.setFrame(dl.totalFrames - 1));

输出检查清单

• 以目标格式（SVG/Lottie/视频）制作的动效标志。
• 静态最终帧回退方案（SVG 或 PNG），用于减少动态效果和海报。
• 只采用一种清晰的技法，展示时长 ≤2.5 秒，保持品牌几何造型完整，并遵守安全留白。
• 声音标志的定格与音频峰值对齐（如有音频）。

交付与验证（独立 HTML）

打包的辅助脚本（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 会冻结 ?t=N 测试框架并截取每个时刻的画面；scripts/contact-sheet.sh sheet.png frame-*.png 会将它们拼成一张总览图，方便快速检查。参见 scripts/README.md。

Logo 动画涵盖 Web/SVG/Lottie、视频和应用启动画面。交付 Web/SVG/Lottie 时，请使用此独立 HTML 工作流；制作视频 Logo 短片时，则使用 remotion-video 验证工作流进行渲染。

对于 Web/SVG/Lottie，交付一个可直接在浏览器中打开的 .html 文件——包含内联 SVG 标记和揭示动画（CSS 或一个 CDN GSAP <script>），且内容自包含。一个文件是合适的交付级别。

输出要求：

• 一个 .html 文件：包含内联 SVG（或 Lottie 画布）以及内联 <style>/<script> 中的揭示动画。
• 一个动画驱动方式——使用 CSS @keyframes 绘制/构建动画，或单个 GSAP 时间轴；不可两者兼用。
• 包含下方与所用技术匹配的冻结测试框架，以便确定性地截取任意时刻的画面。

冻结测试框架——固定画面以供截图。 根据所用技术选择匹配的机制：

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    const T = parseFloat(t);
    // CSS stroke-draw / build-on:
    document.querySelectorAll("#logo *").forEach(el => {
      el.style.animationDelay = (-T) + "s";
      el.style.animationPlayState = "paused";
    });
    // GSAP timeline instead? → tl.pause(); tl.seek(T);
    // SMIL <animate>?       → const s = document.querySelector("svg"); s.pauseAnimations(); s.setCurrentTime(T);
    // Lottie?               → dl.setFrame(Math.round(T * fps));
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

验证工作流——渲染 → 冻结 → 截图 → 检查：

1. 将文件分别打开并冻结在揭示动画的起始/中间/结束时刻（≤2.5s）：…/logo.html?t=0、?t=<dur/2>、?t=<dur>。
2. 截取每个冻结画面。
3. 检查保真度（与标志一致，且采用一种清晰的技术）和瑕疵——品牌几何形状未失真，留白区没有动画残留，结束画面没有未绘制完的描边，静态最终画面呈现真实 Logo。
4. **迭代：**若有任何检查未通过（例如 ?t=<dur> 处存在未绘制完的描边，或揭示动画中途几何形状失真），请修正 stroke-dashoffset/duration/easing，使用相同的 ?t=N 重新渲染并重新截图，以确认问题已修复；持续迭代，直到每一帧都干净无瑕。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png

完成前：

1. 可在浏览器中独立打开——无控制台错误，无缺失的 CDN。
2. 只使用一种技术/驱动方式；?t=N 能正确冻结精确画面。
3. 已截取起始/中间/结束画面——几何形状完好，留白区符合要求，最终画面是干净的标志。
4. 遵循 prefers-reduced-motion（显示最终静态标志，不播放动画），并提供静态结束画面回退方案。
5. 揭示动画时长 ≤2.5s；若包含音频，定格时刻应与声音 Logo 的峰值吻合。

参考文件

• references/logo-patterns.md — 每种技术的可运行代码：描边绘制、蒙版擦除构建、GSAP MorphSVG 变形、无缝空闲循环、Lottie 交付；还包含时长表（0.8–2.5s）、品牌留白规则和减少动态效果的回退方案。