你是否曾为网页中一个悬停变色的按钮反复调试 CSS 动画？是否在加载 Lottie 或 GIF 时遭遇卡顿、模糊或透明度失真？AVAL（Animated Vector Asset Language）正是为此而生——它不是另一个动画库，而是一种全新定义的「交互式视频格式」，专为现代 Web 设计打造。它把动画逻辑、状态切换与像素级精准控制打包进一个极小的 .avl 文件中，让开发者用声明式方式操控帧动画，告别手动 seek、时间轴拼接和透明通道妥协。
核心功能
- 内置确定性状态机：支持定义多个用户态（如 idle / hover / active / error），状态切换由事件触发，无需 JS 手动管理播放/暂停/跳转
- 帧级精准过渡：所有状态切换均在指定帧边界无缝衔接，杜绝传统视频 seek 造成的撕裂、延迟或丢帧
- 打包 Alpha 透明度：采用高效 packed-alpha 编码，保留完整 8-bit 透明通道，渲染质量媲美 PNG 序列，体积却远小于 GIF 或 WebP 动画
- 连续局部循环（Partial Loops）：动画可按语义分段循环（例如只循环“手指点击”动作，而非整段），大幅降低内存占用与解码压力
- 宿主可控降级方案：原生支持
<img slot="fallback">，当浏览器不支持或资源加载失败时自动回退到静态图，保障体验一致性 - 零依赖运行时：仅需一个轻量
<aval-player>自定义元素（Web Component），无 React/Vue 等框架绑定，开箱即用
适合哪些人用
前端工程师、UI 动效设计师、Web 性能优化师，以及任何需要在网页中嵌入高质量、高响应性微交互的人——比如产品页的悬浮图标、表单验证反馈、游戏化进度条、无障碍焦点指示器，甚至轻量级交互式教程。如果你厌倦了用 JavaScript 模拟状态、用 CSS hack 实现半透明、或用 FFmpeg 反复导出带 alpha 的视频，AVAL 就是为你准备的「动画操作系统」。
快速上手
只需三步，5 分钟内跑通首个交互动画：
- 安装工具链：
npm install @pixel-point/aval-element@1.0.0（运行时） +npm install --save-dev @pixel-point/aval-compiler@1.0.0（编译器） - 初始化项目：
npx avl init my-button，进入目录后执行npm run dev - 在 HTML 中引入并使用：
<script type="module" src="/motion.js"></script>
<aval-player src="/my-button.avl" width="120" height="120">
<img slot="fallback" src="/my-button.png">
</aval-player>
项目自带热更新开发服务器、帧预览面板和状态调试视图，所见即所得。
项目信息
A new open-source format for interactive video on the web, with a built-in state machine, frame-accurate transitions, and packed-alpha transparency.
TypeScript | Star 数：638 | 开源协议：MIT | GitHub 项目地址
如果你追求网页动画的「精确性、可维护性与轻量化」三位一体，AVAL 不仅是又一个轮子，而是正在重新定义 Web 动画交付标准的新起点。
