AVAL 是一个面向 Web 的交互式短视频/动效格式与运行时，使用 TypeScript 实现。它将预渲染动画打包为多 codec 的 .avl 文件，支持 AV1、VP9、H.265/HEVC、H.264，并在浏览器端通过 <aval-player> Web Component 自动选择可用编码播放。其核心特点是内置状态机、命名状态、触发器、帧精确转场、可逆转场、连续循环以及 packed-alpha 透明通道，适合替代复杂 Lottie、GIF、视频贴片或前端手写动画。
适用领域
Web 前端 / 交互式视频 / 动效工程 / Web Components / 视频编码与压缩 / 状态机动画 / 设计工程化 / 富媒体体验
配置难度
中高。对于熟悉前端、Web Component 和视频编码的团队，上手成本可控；但如果团队不了解 FFmpeg、codec 参数、WebCodecs、状态机动画和多浏览器兼容测试，落地难度会明显增加。
商业价值
适合对视觉表现和交互动效要求较高的产品，可将设计师制作的复杂预渲染动画封装为可状态控制的 Web 组件，减少前端手写复杂动画的成本，并在质量、透明度、压缩率和跨浏览器 codec 选择之间取得平衡。对营销页、品牌官网、互动广告、SaaS 产品引导、支付/成就反馈等场景有较高价值。但在大规模商业使用前，需要评估浏览器覆盖率、构建链路、包体预算、视频专利合规和 fallback 体验。
01
技术亮点
- 内置确定性状态机，动画可以按状态和触发器组织，而不只是线性播放。
- 支持帧精确转场，适合对交互动效时序要求较高的场景。
- 支持连续循环、命名状态、bounded transitions 和 reversals。
- 支持 packed-alpha 透明通道，可实现透明背景高质量视频动效。
- 同一逻辑动画可输出 AV1、VP9、H.265、H.264 多个 .avl 文件，由浏览器自动选择首个支持的 source。
- 提供 @pixel-point/aval-element，可以用标准 Web Component 方式集成到页面。
- SSR-safe，支持显式注册，也提供自动注册入口。
- 编译器会生成 build.json，记录 MIME codec 字符串、hash、工具调用和可复制 markup，便于部署和排查。
- 采用 MIT 许可证，对商业项目较友好。
- 项目模块拆分清晰，包括 graph、format、compiler、player-web、element 等包。
02
目标用户
- 前端开发者
- 互动营销页面开发团队
- 设计工程师
- 动效工程师
- WebGL/WebCodecs 相关开发者
- 需要高质量透明视频动效的产品团队
- 希望将预渲染动画做成可交互组件的开发者
03
配置要求
- Node.js 22.12.0 或更高版本。
- 需要调用方自行安装 FFmpeg 和 FFprobe。
- FFmpeg 需支持所需编码器，例如 libx264、libx265、libvpx-vp9、libaom-av1。
- 项目需要配置 AVAL project 1.0 文件，例如 motion.json。
- 需要提供 RGBA 帧或合适的源媒体素材。
- 需要配置 encodings 数组，定义 AV1、VP9、H.265、H.264 等编码策略、CRF、preset、deadline、cpuUsed、threads 等参数。
- 浏览器端依赖 WebCodecs、WebGL 和相关 codec 支持能力；不支持时需要提供 fallback，例如 <img slot="fallback">。
- 部署时服务器需要正确提供 .avl 文件和 MIME type，例如 application/vnd.aval; codecs="..."。
- 如果构建需要超时限制，可使用 --media-timeout-ms。
- H.265/HEVC、H.264 等 codec 可能涉及专利、授权、分发合规问题，需要发布方自行确认。
04
适用场景
- 官网、活动页、落地页中的高质量交互动效
- 按钮、表单、支付成功、加载完成等状态驱动动画
- 替代 GIF、APNG、普通 MP4 或部分 Lottie 动效
- 需要透明背景视频贴片的 Web UI
- 游戏化 Web 界面中的角色或物体状态动画
- 复杂动效的预渲染交付，避免在前端实时计算动画
- 通过 setState("success") 等 API 控制动画状态切换
- 多编码格式输出，兼容不同浏览器视频能力
05
部署与配置
- 确保本地 Node.js 版本为 22.12.0 或更高。
- 安装浏览器端 Web Component 包：npm install @pixel-point/aval-element@1.0.0
- 安装编译器开发依赖：npm install --save-dev @pixel-point/aval-compiler@1.0.0
- 初始化示例项目：npx avl init my-motion
- 进入项目目录：cd my-motion
- 安装依赖：npm install
- 启动开发流程：npm run dev
- 正式构建时执行：npx avl compile motion.json --out dist/motion
- 在页面中使用 <aval-player>，并按优先级添加 av1.avl、vp9.avl、h265.avl、h264.avl 等 <source>。
- 在前端入口中引入并注册组件：import { defineAvalElement } from "@pixel-point/aval-element"; defineAvalElement();
06
风险与注意事项
- 项目相对较新，生态和案例可能不如 Lottie、Rive、普通视频方案成熟。
- 浏览器兼容性依赖 WebCodecs、WebGL 和具体 codec 支持，部分环境可能只能显示 fallback。
- H.265/HEVC、H.264 等编码和分发可能涉及专利和授权风险，尤其在商业或大规模分发场景需要法务确认。
- 构建依赖本机 FFmpeg/FFprobe，不内置 native codec 工具，团队需要维护编码环境。
- AV1、VP9 高质量编码可能耗时较长，对 CI 构建时间有影响。
- 目前 README 中 TODO 提到 React 专用组件、更多浏览器测试、运行时包体优化仍未完成。
- 相比普通视频或 Lottie，学习成本更高，需要理解 AVAL 格式、状态图、编码策略和浏览器能力探测。
- 如果目标用户浏览器对 WebCodecs 或某些编码支持不足，实际体验可能不稳定。
- 国内部分移动端 WebView、旧版浏览器或特殊 App 内嵌浏览器的支持情况需要重点测试。
2026-07-20
第4名
新收录 · github_search
2026-07-19
第4名
新收录 · github_search
2026-07-18
第4名
新收录 · github_search
2026-07-17
第5名
新收录 · github_search
