uniapp动画不流畅

优化渲染性能

减少页面DOM节点数量，避免复杂嵌套结构。使用v-if替代v-show控制显隐，对长列表使用<scroll-view>或<list>组件。静态资源压缩至合理尺寸，图片建议使用WebP格式。

合理使用CSS动画

优先使用CSS3动画（transform和opacity），其性能优于JavaScript动画。避免使用box-shadow和border-radius等耗性能属性。示例代码：

.floating {
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

减少重绘与回流

通过will-change属性预声明动画元素：

.target {
  will-change: transform;
}

动画过程中避免修改width/height等触发回流的属性，使用scale替代。

使用高性能动画库

引入tween.js或anime.js库处理复杂动画。uniapp插件市场提供优化过的动画组件，如uv-ui的动画模块。

帧率监控与调试

通过Chrome DevTools的Performance面板分析动画帧率，确保保持在60fps。启用uni.setEnableDebug()输出性能日志，定位卡顿节点。

平台差异处理

针对iOS设备增加-webkit-backface-visibility: hidden;提升渲染。安卓端可尝试关闭硬件加速：

.android-fix {
  transform: translate3d(0,0,0);
}

减少同步操作

避免在动画过程中执行同步的uni.getSystemInfoSync()等操作，改用异步接口或提前缓存数据。