nvue中必须使用uni.requirenativeplugin('animation')而非uni.createanimation,因其仅支持原生组件、参数需带单位、无内置动画队列、须手动拆帧调度且transformorigin必须显式设置。

nvue 中必须用 uni.requireNativePlugin('animation') 而非 uni.createAnimation
在 nvue 页面里,uni.createAnimation 依然不可用——它只适配小程序 runtime,而 nvue 是原生渲染层,走的是完全不同的动画通道。真正能驱动硬件加速、支持逐帧控制、具备完整贝塞尔曲线和回调能力的,只有原生插件 animation。
常见错误是直接复制小程序代码,调用 uni.createAnimation(),结果返回 undefined 或静默失败;或者误以为 nvue 支持 Vue 的 <transition></transition>,实际会直接忽略动画逻辑。
- 必须在 nvue 页面中通过
const animation = uni.requireNativePlugin('animation')显式加载 - 仅支持绑定到
<view></view>、<image></image>、<text></text>等原生组件,不能作用于自定义组件或<slot></slot> - 所有动画参数(如
transform、opacity)必须写成字符串,且值需带单位('rotate(45deg)',不能写rotate(45)) -
timingFunction只接受'linear'、'ease'、'ease-in'、'ease-out'、'ease-in-out',不支持 CSS 自定义贝塞尔函数
复杂序列得手动拆帧:用 requestAnimationFrame 驱动多段 animation.transition()
nvue 的 animation 插件本身不提供“动画队列”或“链式 delay”,一次 transition() 调用只执行单段。要实现“弹跳→缩放→变色→位移”的复合节奏,必须靠 JS 手动调度。
典型陷阱是把所有动画塞进一个 transition() 里,比如试图用 transform: 'scale(1.2) rotate(10deg) translateX(20px)' 一次性完成——这会导致各属性时间曲线耦合,无法独立控制起止时机,且中途无法中断或调整。

