uni-app动画效果实现 uni-app如何使用animation API-uni-app-PHP中文网

uni-app 中唯一跨端可用的动画方案是 css 动画，因 uni.createanimation 仅支持小程序平台，在 h5 和 app 的 vue 页面中不可用；需用 transform + transition 控制，避免 v-if、简写 transition，并注意节点时机。

uni-app动画效果实现 uni-app如何使用animation api

animation API 在 uni-app 里根本不能直接用

uni-app 的 animation API（即 uni.createAnimation）不是标准 Web Animation，它只在微信小程序、支付宝小程序等平台有效，在 H5 和 App 端会被忽略或报错。你写完发现动画没反应，大概率是因为当前运行环境不支持。

常见错误现象：uni.createAnimation is not a function（H5）、动画在 App 端完全静止、H5 上样式闪一下就回弹。

微信小程序：支持完整 API，包括 step()、export()、多属性链式调用
H5：只能靠 CSS 动画 + transition 或 @keyframes 模拟，uni.createAnimation 返回空对象
App（iOS/Android）：nvue 页面可用原生动画，但普通 vue 页面同 H5，不支持该 API

uni-app 里真正跨端可用的动画方案只有 CSS

别纠结 API 是否“高级”，能跑通三端才是关键。CSS 动画是目前唯一稳定覆盖 H5、小程序、App（vue 页面）的方式，核心是控制 transition 触发和 transform 属性变更。

使用场景：按钮点击反馈、列表项滑入、抽屉展开、Tab 切换过渡。

必须用 transform（如 translateX、scale）而非 left/top，否则 H5 性能差，小程序可能卡顿
避免在 v-if 元素上直接加 transition —— 小程序里 DOM 销毁重建会导致动画丢失，改用 v-show + class 控制显隐
小程序中 transition 不支持简写（如 transition: all .3s），需明确写出属性：transition: transform .3s, opacity .3s

示例（点击缩放按钮）：

<view class="btn" :class="{ 'btn--active': isActive }">点我</view><style>
.btn {
  transform: scale(1);
  transition: transform .2s ease;
}
.btn--active {
  transform: scale(0.95);
}
</style>

想用 JS 控制动画节奏？用 requestAnimationFrame + style 操作

当 CSS transition 不够用（比如需要逐帧控制、物理动效、拖拽跟随），就得手动操作 style.transform，配合 requestAnimationFrame 实现平滑更新。

这不是“替代 animation API”，而是绕过平台限制的务实做法。

不要在 for 循环里直接改 style —— 会强制同步重排，卡死界面
用 raf 而非 setTimeout，保证每帧执行一次，H5 和小程序都兼容
小程序中操作 style 必须用 uni.createSelectorQuery() 获取节点，再调用 fields({ node: true }) 才能拿到可操作的 node
App 端（vue 页面）可直接用 ref + $el，但 nvue 需走 uni.createAnimation（仅限 nvue）

小程序平台下 animation API 的典型误用

即使在微信小程序里，uni.createAnimation 也容易因生命周期或节点时机问题失效。

常见错误现象：export() 后 setData 没变化、动画只执行一次、多个 step 被覆盖。

必须在 onReady 或节点渲染完成后再创建 animation 实例，onLoad 时节点可能还没挂载
animation.export() 返回的是 JSON 对象，要赋值给 data 中的字段（如 this.animationData = animation.export()），不能直接塞进 setData 参数里
每次动画前都要新建 animation 实例，复用旧实例会导致 step 积累、行为不可控
小程序中不支持 rotateZ，要用 rotate；skew 参数顺序和 CSS 不一致（如 skew(30deg, 20deg) 写成 skew(30, 20)）