gsap+json实现动画播放与mp4视频导出代码-html代码-BFW代码库

gsap+json实现动画播放与mp4视频导出代码

代码语言：html

所属分类：多媒体

代码描述：gsap+json实现动画播放与mp4视频导出代码，通过ai根据主题生成相关的json动画脚本，播放生成视频。ai生成json提示词：你是一个精通 GSAP 动效设计和计算机体系结构的顶级视觉设计师。现在请为我写一个 JSON 格式的动画指令集，主题是讲述计算机底层的“二进制原理”。我的动画系统基于 HTML5 Canvas 运行，底层由 GSAP 进行动画时间轴控制。每一屏的结构由 `duration`（总驻留秒数）、`subtitle`（底部解说词字幕）以及 `setup`（初始物件定义）和 `a

代码标签： gsap json 动画播放 mp4 视频导出代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BitAnim - 二进制原理 GSAP 动画演示与超清 MP4 录制器</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.13.0.js"></script>
    <style>
        :root {
            --primary-color: #10b981; /* 默认黑客帝国绿 */
        }
        .theme-bg { background-color: var(--primary-color); }
        .theme-text { color: var(--primary-color); }
        .theme-border { border-color: var(--primary-color); }
        .viewport-container {
            aspect-ratio: 16 / 9;
            max-height: 65vh;
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-100 font-sans h-screen flex flex-col overflow-hidden">

    <!-- 顶部导航栏 -->
    <header class="bg-slate-900 border-b border-slate-800 px-6 py-3 flex justify-between items-center z-10 shrink-0">
        <div class="flex items-center space-x-3">
            <span class="text-xl font-bold flex items-center gap-2 theme-text">
                <i class="fa-solid fa-code-compare"></i> BitAnim <span class="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-400 font-normal">二进制原理动画</span>
            </span>
            <span id="readOnlyBadge" class="hidden text-xs px-2 py-0.5 rounded bg-amber-600 text-white font-semibold">
                只读演示模式
            </span>
        </div>

        <!-- 中部播放器控制 -->
        <div class="flex items-center space-x-2">
            <button onclick="prevStep()" class="p-2 bg-slate-800 hover:bg-slate-700 rounded transition text-sm" title="上一步">
                <i class="fa-solid fa-backward"></i>
            </button>
            <button id="playBtn" onclick="togglePlay()" class="px-3 py-2 bg-slate-800 hover:bg-slate-700 text-emerald-400 rounded transition text-sm flex items-center gap-1.5" title="播放/暂停">
                <i class="fa-solid fa-play"></i> <span>播放</span>
            </button>
            <button onclick="nextStep()" class="p-2 bg-slate-800 hover:bg-slate-700 rounded transition text-sm" title="下一步">
                <i class="fa-solid fa-forward"></i>
            </button>

            <span class="h-6 w-px bg-slate-800 mx-2"></span>

            <!-- 一键导出超清 MP4 -->
            <button id="recordBtn" onclick="exportToMP4()" class="px-3 py-2 bg-red-600 hover:bg-red-500 text-white rounded transition text-sm flex items-center gap-1.5 font-bold shadow-lg shadow-red-900/20">
                <i class="fa-solid fa-circle-arrow-down"></i> <span>导出 1080P MP4</span>
            </button>

            <button onclick="toggleFullscreen()" class="p-2 bg-slate-800 hover:bg-slate-700 rounded transition text-sm" title="全屏演示">
                <i class="fa-solid fa-expand"></i>
            </button>
        </div>

        <!-- 右侧面板切换 -->
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2" title="更改主题色">
                <i class="fa-solid fa-palette text-slate-400"></i>
                <input type="color" id="themeColorPicker" onchange="changeTheme(this.value)" class=&q.........完整代码请登录后点击上方下载按钮下载查看