使用与开发文档中心

深入了解 CocoPanda Studio 的纯客户端架构设计、各工具能力矩阵、高级参数配置以及跨场景高效协同工作流。

lock

核心架构与隐私原则

Client-side Only 纯客户端运算机制

CocoPanda Studio 采用彻底的 Client-side Only (纯客户端) 架构。无论您导入数十兆的 Lottie 动效、Telegram TGS 贴纸包还是私有中文字体包，所有数据计算、格式解压、像素渲染与编码打包均在您的本地浏览器内存与 Web Worker 中完成。

零数据上传承诺：您的文件和隐私数据不会被传输到任何远端服务器，保证了金融级/私有项目的绝对安全，同时完全规避了网络带宽与服务器排队延迟，实现毫秒级快速直出。

science

Lottie 转换实验室 (Animation Lab)

专业级动效转码与多格式高清输出引擎

打开工具 launch

1. 支持导入格式

  • .json (Lottie 标准格式)：支持标准 After Effects (Bodymovin) 导出的矢量动效。
  • .tgs (Telegram 动态贴纸)：内置 pako 解压内核，自动解压 Gzip 压缩流并直接播放与转换。

2. 导出格式选型策略

导出格式 透明通道 体积效率 最佳应用场景
APNG ✅ 完美支持 (Alpha) 中等 (无损高清) Web 交互动效、iOS/Android 端内高清透明表情
WebM ✅ 支持 (VP8/VP9) 极小 (压缩率高) 现代浏览器、营销落地页背景动效、Telegram 贴纸包
GIF ❌ 仅二值透明 较大 社交平台分享、邮件通知、老旧系统兼容

3. 核心参数调优

  • DPR (设备像素比增强)：默认 1.0x ~ 最高 4.0x。开启 4.0x 可在高分视网膜屏幕上获得极其锐利的矢量边缘，杜绝锯齿。
  • FPS (帧率重采样)：支持 15fps、24fps、30fps、60fps。降低 FPS 可显著减小 APNG/GIF 动图体积。
  • 场景预设 (Presets)：提供「TG 贴纸 (512px WebM)」、「网页轻量 (GIF 1.0x)」与「超清质感 (4x APNG)」一键参数预设。
filter_frames

拆帧提取器 (Frame Extractor)

Lottie 深度结构逆向与逐帧切片打包

打开工具 launch

1. 工具功能

拆帧提取器能够遍历 Lottie 动画的全部帧序列（Frame-by-Frame），将复杂的矢量补间动画在 Canvas 中逐帧光栅化，并利用 JSZip 打包为高清 PNG 序列图压缩包。

2. 典型使用场景

  • 游戏引擎降级：在 Unity、Cocos 等不支持复杂 Lottie 属性的场景中，直接使用导出的 PNG 序列图制作 Sprite 帧动画。
  • 关键帧切图：提取动效的某一精彩瞬间作为落地页海报或封面图。
  • 动效审计与调试：逐帧检查设计师交付的动画曲线是否平滑或存在图层穿帮。
emoji_emotions

贴纸展示库 (Sticker Showcase)

Telegram 矢量动态贴纸集交互与动效灵感

打开工具 launch

1. 功能与交互

内置精选的热门 Telegram 动态贴纸合集（如 Donut The Dog, Duck 等），支持鼠标悬停加速播放、循环控制与拖拽导入任意自定义 .tgs 贴纸文件进行实时互动体验。

font_download

字体裁剪工具 (Font Subsetter)

网页中文字体包体积瘦身与按需提取

打开工具 launch

1. 为什么需要字体裁剪？

完整的中文字体包（TTF/OTF）通常包含数万个汉字，体积普遍在 10MB ~ 30MB，直接在 Web 网页中引用会导致严重的网络阻塞与首屏白屏。

字体裁剪工具根据您输入的文本（如网站标题、营销 Banner 文案或常用 3500 字集），仅打包实际用到的字符字形（Glyphs），将字体文件压缩至 10KB ~ 50KB，体积缩减 95% 以上。

2. 使用流程

  1. 导入字体：拖入原始 .ttf 或 .otf 文件；
  2. 输入文本：粘贴网页中实际出现的文案或选择快捷预设；
  3. 一键裁剪：浏览器本地提取字形并生成精简字体，立即下载使用。
schedule

时间戳转换器 (Timestamp Hub)

前端与后端联调开发必备的毫秒级时钟与时间转换

打开工具 launch

1. 核心功能

  • 实时 Unix 时钟：实时显示当前精确 Unix 毫秒/秒级时间戳及北京时间（UTC+8）。
  • 双向即时换算：Unix 时间戳 ➔ 标准可读日期格式（YYYY-MM-DD HH:mm:ss）以及反向换算。
  • 快捷复制：一键拷贝时间戳用于接口调试与数据库查询。
alt_route

协同场景工作流 (Workflow Synergy)

如何组合使用 CocoPanda 工具链提升交付效能

场景 A：产品营销页极致性能交付

目标：在页面中展示高质量动效与特殊品牌字体，但将首屏加载控制在 500ms 内。

  1. 使用贴纸展示库或自行设计 Lottie 动画文件；
  2. 使用转换实验室设置 2x DPR，导出轻量透明 WebM 格式动效文件；
  3. 使用字体裁剪工具提取页面的品牌 Slogan 文字，将 15MB 品牌字体裁剪为 18KB WOFF 字体；
  4. 将 WebM 动效与精简字体引入 Web 页面，实现零卡顿首屏极速加载。

场景 B：老旧客户端动画降级

目标：针对不支持 Lottie 渲染引擎的低版本端侧，实现像素级完全一致的动效体验。

  1. 导入原始 Lottie 文件至拆帧提取器；
  2. 按 30FPS 抽取高清序列帧，一键下载 ZIP；
  3. 在客户端中使用帧动画或 SpriteSheet 序列图播放。
help

常见问题解答 (FAQ)

开发与使用中的典型疑问

Q1: 为什么转换和裁剪过程完全不消耗网络流量？

本平台所有工具均基于现代 Web 技术（WASM、Canvas API、Web Worker 及 JS 纯前端解码库），计算全在您的设备 CPU/GPU 内存中运行，无需与云端服务器进行任何文件数据传输。

Q2: 导出的透明 APNG 和 WebM 如何在网页中优雅使用？

<!-- 针对现代浏览器的透明 WebM 视频动效 -->
<video autoplay loop muted playsinline width="400" height="400">
    <source src="animation.webm" type="video/webm">
    <!-- 降级方案：APNG 动图 -->
    <img src="animation.png" alt="Animation">
</video>

Q3: 是否支持离线使用？

支持。由于是纯静态架构，您可以将本项目克隆到本地，在没有网络连接的局域网或离线环境中直接使用浏览器双击打开 index.html 即可完整使用全部功能。