uni.createanimation仅支持小程序平台,h5和app的vue页面中不可用;跨端动画应使用css transition/transform配合requestanimationframe或transition-group实现。

uni.createAnimation 在 H5 和 App 的普通 vue 页面中根本不可用,强行调用会返回空对象或报 uni.createAnimation is not a function 错误 —— 这不是你代码写错了,是平台限制本身就不支持。
uni.createAnimation 为什么在 H5/App 上失效
这个 API 是小程序原生动画能力的封装,仅在微信、支付宝等小程序环境有完整实现;H5 端 runtime 直接忽略该方法,App 端(vue 页面)同理。nvue 页面虽可用原生动画,但和 uni.createAnimation 不是一套机制,不能混用。
- 错误现象:
TypeError: uni.createAnimation is not a function(H5)、animation.export() returns undefined(App) - 小程序里能链式调用
rotate()、translateX()、step(),H5 里这些方法调了也无副作用 - 即使你在 H5 上看到“动画执行了”,大概率是 CSS
transition或@keyframes在起作用,不是uni.createAnimation
想跨三端跑通复杂序列,只能靠 CSS + JS 手动控制
没有“动画对象”可导出,就得自己管理状态、时间点和 DOM 节点。核心思路是:用 requestAnimationFrame 驱动样式变更,配合 transform 属性做硬件加速,避免触发布局重排。
- 别用
left/top做位移,必须用transform: translateX()等,否则 H5 卡顿、小程序渲染异常 - 获取节点必须走
uni.createSelectorQuery()+fields({ node: true }),直接document.querySelector在小程序里拿不到可操作的node - 不要在循环里连续改
node.style.transform—— 每次都触发同步重排,界面直接卡死 - 用
raf替代setTimeout,保证每帧只更新一次,H5 和小程序都兼容
用 transition-group 实现列表项进出序列动画
这是目前唯一稳定、声明式、且三端一致的“序列动画”方案,适合增删列表项时的滑入/滑出、淡入/淡出等场景。
- 必须用
<transition-group></transition-group>包裹v-for列表,不能只用<transition></transition> - class 名要严格匹配:进入用
v-enter-active+v-enter,离开用v-leave-active+v-leave-to - 避免在
v-if元素上加 transition —— 小程序会销毁节点,动画直接丢失;改用v-show+ class 控制显隐 - transition 属性不能简写:
transition: all .3s在小程序里无效,必须拆成transition: transform .3s, opacity .3s
.list-item {
transition: transform .25s ease, opacity .25s ease;
}
.list-item-enter,
.list-item-leave-to {
opacity: 0;
transform: translateY(20px);
}
需要精确时序控制?用 requestAnimationFrame + transform 手写
比如实现“按钮点击 → 弹跳 → 缩放 → 变色”四段节奏动画,CSS transition 不够用,就得手动算帧。
- 把整个序列拆成多个阶段,每个阶段设起始/结束值、持续帧数(如 60 帧 = 1 秒)
- 用
raf循环更新style.transform和style.opacity,配合easeOutCubic等缓动函数 - 每个阶段结束时触发回调,再启动下一阶段 —— 这才是真正可编排的“Sequence”逻辑
- 注意:小程序中修改 style 必须通过
node.setStyle({ transform: '...' }),不能直接赋值node.style.transform
跨端动画最易被忽略的一点:你以为在写 JS 动画逻辑,其实大部分时间是在对抗平台差异。别试图让 uni.createAnimation 在 H5 上“勉强工作”,它从设计上就不是为 Web 环境服务的。真正的复杂序列,靠的是 CSS 的可预测性 + JS 的帧级控制力,而不是某个 API 是否“看起来高级”。











