uni-app转盘动画卡顿需分平台处理：小程序必须用uni.createAnimation API，H5可fallback CSS；需校准角度映射、避免animationData复用、解耦高亮与旋转。
uni-app里用transform: rotate()做转盘动画会卡顿
直接在style里写transform: rotate(360deg)加transition，在部分安卓微信 WebView（尤其是旧版）上会掉帧、跳变，甚至转半圈就停。根本原因是 uni-app 的 view 组件在非 H5 平台（如小程序、App）中不支持 CSS transform 动画的硬件加速，且transition对动态绑定的rotate值响应不稳定。
实操建议：
- 改用
animation+@keyframes预定义旋转动画，避免 runtime 计算； - 给转盘容器加
will-change: transform（H5 有效）或transform: translateZ(0)（强制开启 GPU 加速）； - 动画时长统一设为
4s以上，避免过快导致视觉误判； - 小程序平台必须用
uni.createAnimationAPI 控制，不能依赖 CSS；
uni-app小程序端必须用uni.createAnimation控制转盘
微信/支付宝/抖音小程序不认v-bind:style里动态变化的transform，CSS 动画会被静默忽略。只有通过小程序原生动画 API 才能可靠触发。
关键代码逻辑：
// 在 methods 中
startRotate(angle) {
const animation = uni.createAnimation({
duration: 4000,
timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 模拟惯性减速
})
this.animation = animation
animation.rotate(angle).step()
this.$nextTick(() => {
this.animationData = animation.export()
})
}
注意点：
-
angle是累计总角度（比如转 3 圈+停在第 2 格 →3 * 360 + 45），不是单次增量； - 必须等
$nextTick后再export()，否则动画不触发； - H5 端可 fallback 到 CSS 方案，但小程序端必须走此路径；
九宫格抽奖结果与旋转角度的映射要手动对齐
“九宫格”是视觉布局，但转盘本质是圆形，每格实际对应的是扇形角度区间。常见错误是直接按 360/9=40° 均分，却忽略指针位置、格子中心偏移、起始角度偏差。
正确做法：
- 把转盘图片的“0°起点”对准第一个奖品格的**中心线**（不是左边界）；
- 每个格子占
360 / 9 = 40°，但中奖角度应落在[start + 20°, start + 60°)这类中心±20°区间； - 最终目标角度 =
baseAngle + (targetIndex * 40) + 20（+20 是把落点校准到格子正中）； - 务必在真机上测一遍——iOS 微信和安卓微信的 canvas 渲染精度不同，可能差 1~2°；
抽完奖不能立刻重置animationData，否则下一次转失效
很多开发者在animation.export()后马上清空animationData，导致第二次调用startRotate时animationData为空，转盘不动。
解决方案：
- 动画结束回调里再重置：
animation.rotate(...).step({ duration: 4000, timingFunction: '...' })后接.step({ delay: 4000 })不行，得用setTimeout或监听transitionend（H5）； - 小程序推荐用
setTimeout：动画开始后setTimeout(() => { this.animationData = {} }, 4100)； - 更稳妥的做法是每次生成新
animation实例，不复用；
最易被忽略的是：九宫格转盘的“格子高亮态”和旋转动画必须解耦——高亮靠v-if或 class 切换，别绑在旋转过程里，否则动画一卡，高亮就错位。
