网站上的小动画一交互就顿一下？AVAL 想让预渲染视频听懂「悬停 / 点了 / 成功」
先说痛：网页上的立体小图标要会动、还要跟着鼠标和状态变，用普通视频很容易卡一下。AVAL 是给这种短动画用的专用格式和播放器。
- 问题：网站上的小 3D 图标、收藏按钮这类「又短、又好看、还要可交互」的动画，用普通视频接循环和状态切换，容易顿一下；用 Lottie 又难塞复杂渲染画面。
- 是什么：AVAL 是一种网页专用的交互视频格式（文件后缀
.avl）+ 浏览器播放器。动画状态写进文件里，页面只说「现在变成成功态」。 - 凭什么顺一点：循环接缝尽量不「跳回去重播」；切换尽量卡在做动画时定好的那一帧；透明也能做；浏览器不支持就显示你准备好的静态图。
- 现状：开源技术预览；可看官网演示、可 clone 仓库试。同类闭源思路外界提过（如 Airbnb Lava），AVAL 是可直接摸的开源实现。
立场提示：材料来自项目官网与 GitHub 文档，属于开源项目自述。下文拆问题和能力，不是第三方压测报告。
先说问题：网页小动画，好看和「能点」经常打架
你想在网页上放一段已经渲染好的短动画（比如 Blender 做出来的立体小图标），它要自己轻轻循环；鼠标移上去变个样子；点一下再变成「已收藏 / 加载成功」。用现在的普通视频做法，状态一变，画面就容易顿一下，甚至闪一帧。
为什么会疼？粗分三条：
- 普通视频会「跳片」：循环到头要跳回开头；从「默认」切到「悬停」也常靠改播放进度。跳的那一下，解码器要重新找位置，肉眼有时就是顿一下。
- 矢量动效工具（如 Lottie）：适合线条、扁平 UI；一旦是复杂光照、毛发、立体材质的预渲染画面，就不好塞进去。
- 状态逻辑散落在业务代码里：哪一段从第几秒播到第几秒、悬停触发什么，全靠开发手写。改一版动画，代码也要跟着改时间表。
多段 MP4 来回切，或一个长视频改时间点。交互一多，就像在看碟时不停快进快退，接缝处容易露馅。
动画自己知道有「默认 / 悬停 / 成功」几种状态。页面只通知「现在进成功」，过渡从哪一帧开始、能不能倒回去，由动画资源自己带着。
AVAL 冲的就是这种小而精的交互
看一段发布演示（约 37 秒）。抓住一件事就够：画面跟着交互换状态，尽量不像在拖视频进度条。 想上手点，去官网 pixelpoint.io/aval。
AVAL 到底是什么（用人话）
AVAL = 一种文件格式 + 一套编译/播放工具。
- 美术 / 动效把短动画做好（视频或一帧帧图）。
- 用编译器打成一个
.avl文件：里面既有画面，也有「有哪些状态、怎么切」的说明书。 - 网页里放一个播放标签
<aval-player>，指向这个文件。浏览器负责播；业务代码只说「切到 success」。
定位写得很窄：体积小、占 CPU 少，适合 Blender 一类做出的小图标动效。网站上又精致又短的交互动画，不是长视频，也不是电影。
官网列的那些能力，翻译成人话
下面按「你能感到什么」写。括号里保留官网关键词，方便你对照原文，正文先看中文就够。
1. 动画自带几种「身份」
比如默认、悬停、按下、成功。每种身份播哪一段，做动画时事先写好。页面只喊身份名字。后来的指令优先：你快速划过又划回来，以最新意图为准。
deterministic state graph · latest-wins
2. 切换尽量卡在该卡的那一帧
从默认切到悬停时，尽量从做动画时定好的画面帧开始过渡，少做随手掐一刀。可以「播完这段再走」「硬切」「走到一半倒回去」等写法。
frame-accurate routes · portals / finishes / cuts / reversals
3. 循环接缝尽量不「跳回去」
普通视频循环到头，播放器常把进度条拉回 0，这一下可能卡。AVAL 的目标是：接缝处继续往前接下一段同样的循环，减少这种硬跳。
seekless loops
4. 透明背景也能做
小图标通常要「抠掉背景」叠在网页上。普通视频格式对透明不友好。AVAL 用一种打包透明信息的办法，在网页里用图形接口拆开合成。
packed-alpha transparency · WebGL2
5. 尽量走浏览器自带能力
解码、上屏尽量用现代浏览器自带的视频解码和图形能力，不强制再塞一个很大的 WASM 播放器。
WebCodecs · WebGL2 · web-native runtime
6. 播不了就显示你准备的静图
浏览器太老、用户开了「减少动态效果」、机器扛不住时，露出你在网页里写好的备用图。备用图不塞进 .avl，永远属于你的页面。
progressive fallback · host-owned markup
你现在能怎么摸，以及别指望什么
想先看效果
官网 pixelpoint.io/aval 可直接试；或 clone 仓库跑 playground（见仓库文档）。当前是技术预览，会继续改。
想接进自己的网页（概念上）
集成时大概是这样（示意）：
<aval-player src="/icon.avl" width="320" height="320">
<img slot="fallback" src="/icon.png" alt="">
</aval-player>
// 业务只说状态名
await player.setState("success");
npm install 一定成功。现在还别当真生产默认的原因
- 仓库自标 technical preview，会快变。
- TODO 仍写着：Safari 支持、React 封装、更多编码格式、更好看的演示等（有过 Safari 相关修复提交，是否算「已支持」以本机实测为准）。
- 做动画的人要多学一步：除了出片，还要会标状态和切换规则；这不是「丢个 MP4 就完事」。
- 浏览器能力参差：播不了就靠你准备的静图兜底，交互体验会降级。
先记住问题，再记产品：网页上那些「又短又精致、还要跟着交互变」的预渲染动画，旧办法容易顿。AVAL 想把画面 + 状态说明书打成一个文件，让页面只负责喊状态名。它现在能看、能 clone 试，但还是早期预览，别当成已经打磨完的行业标准。