GSAP可视化时间轴动作编辑器导出json webm及mp4视频代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：GSAP可视化时间轴动作编辑器导出json webm及mp4视频代码，支持gsap动画的json导出与加载，支持动画转成webm视频，支持视频转为mp4并下载本地。

代码标签： GSAP 可视化时间轴动作编辑器导出 json webm mp4 视频代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>GSAP 时间轴编辑器 + JSON 导入导出 + 录制为 MP4（MediaBunny）</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
<style>
  :root{
    --bg:#0f172a;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --primary:#6366f1;
    --primary-2:#4f46e5;
    --success:#10b981;
    --danger:#ef4444;
    --border:#334155;
  }
  *{box-sizing:border-box}
  body{
    margin:0; padding:16px;
    background:linear-gradient(180deg,#0b1220,#0a0f1c 25%,#0a0f1c);
    color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  }
  h1{margin:0 0 4px;font-size:22px}
  .sub{color:var(--muted);margin:0 0 16px}
  .layout{
    display:grid; grid-template-columns: 1.25fr 1fr; gap:16px;
  }
  .card{
    background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:12px;
  }
  .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .row > *{margin:4px 0}
  label{color:var(--muted); font-size:12px}
  input, select, textarea{
    background:#0b1220; color:var(--text);
    border:1px solid var(--border); border-radius:8px;
    padding:8px 10px; outline:none; width:100%;
  }
  input[type="color"]{padding:0; height:36px}
  input[type="range"]{width:100%}
  button,.btn{
    background:var(--primary); border:0; color:#fff; padding:8px 12px;
    border-radius:10px; cursor:pointer; font-weight:600;
  }
  button:hover,.btn:hover{background:var(--primary-2)}
  .btn-danger{background:var(--danger)}
  .btn-success{background:var(--success)}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .title{font-weight:700; margin:6px 0 10px}
  .muted{color:var(--muted)}
  .hr{height:1px;background:var(--border);margin:10px 0}
  .list{max-height:240px; overflow:auto; border:1px dashed var(--border); border-radius:8px; padding:6px}
  .list-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 8px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px;
    background:#0b1220;
  }
  .list-item.active{outline:2px solid var(--primary)}
  canvas{width:100%; background:#000; border-radius:10px}
  small{font-size:12px}
  .toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .time{min-width:120px; text-align:right}
  .progress{
    height:10px; width:100%; background:#1f2937; border-radius:999px; overflow:hidden;
    border:1px solid var(--border);
  }
  .bar{height:100%; width:0; background:linear-gradient(90deg,#4f46e5,#8b5cf6)}
  .kv{display:flex; align-items:center; gap:6px}
  .pill{
    background:#0b1220; border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:var(--muted);
  }
  .warn{color:#fbbf24}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}
</style>
</head>
<body>
  <header style="margin-bottom:12px">
    <h1>GSAP 动画编辑器 · JSON · 录制 WebM · 转 MP4</h1>
    <p class="sub">基于 GSAP + Canvas 预览，MediaRecorder 实时录制，MediaBunny 转码 MP4</p>
  </header>

  <div class="layout">
    <!-- 左侧：预览 + 播放控制 + 渲染/转码 -->
    <section class="card">
      <div class="row">
        <div style="flex:1">
          <div class="row">
            <div style="flex:1">
              <label>画布宽度</label>
              <input id="projWidth" type="number" min="128" max="3840" value="854">
            </div>
            <div style="flex:1">
              <label>画布高度</label>
              <input id="projHeight" type="number" min="128" max="2160" value="480">
            </div>
            <div style="flex:1">
              <label>帧率 FPS</label>
              <input id="projFPS" type="number" min="12" max="60" value="30">
            </div>
            <div style="width:120px">
              <label>背景色</label>
              <input id="projBG" type="color" value="#111111">
            </div>
          </div>
        </div>
        <div class="kv">
          <span class="pill"><i class="fa-solid fa-info-circle"></i> 建议时长 ≤ 20s</span>
        </div>
      </div>

      <div class="hr"></div>

      <canvas id="stage" width="854" height="480"></canvas>

      <div style="margin-top:10px">
        <input id="timeSlider" type="range" min="0" max="10" step="0.01" value="0">
        <div class="toolbar" style="margin-top:8px">
          <div class="row">
            <button id="btnPlay"><i class="fa-solid fa-play"></i> 播放</button>
            <button id="btnPause"><i class="fa-solid fa-pause"></i> 暂停</button>
            <button id="btnStop"><i class="fa-solid fa-stop"></i> 停止</button>
            <button id="btnSnapKF" class="btn-success"><i class="fa-solid fa-bolt"></i> 在当前时间添加关键帧</button>
          </div>
          <div class="time">
            <span id="curTime">0.00</span>s / <span id="totalTime">0.00</span>s
          </div>
        </div>
      </div>

      <div class="hr"></div>

      <div class="row">
        <button id="btnRecord"><i class="fa-solid fa-circle-dot"></i> 录制并导出 WebM</button>
        <a id="dlWebm" class="btn" style="display:none" download="animation.webm"><i class="fa-solid fa-download"></i> 下载 WebM</a>
        <button id="btnToMp4"><i class="fa-solid fa-file-video"></i> 转换为 MP4</button>
        <a id="dlMp4" class="btn" style="display:none" download="animation.mp4"><i class="fa-solid fa-download"></i> 下载 MP4</a>
      </div>
      <div style="margin-top:10px">
        <div class="progress"><div id="recBar" class="bar"></div></div>
        <small class="muted">录制进度</small>
      </div>
      <div style="margin-top:10px">
        <div class="progress"><div id="mbBar" class="bar" style="background:linear-gradient(90deg,#06b6d4,#22d3ee)"></div></div>
        &l.........完整代码请登录后点击上方下载按钮下载查看