uni-app页面中使用多个css动画导致页面卡住

uni-app页面中使用多个css动画导致页面卡住

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2

HBuilderX类型：正式

HBuilderX版本号：3.1.7

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：PADMOO

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<image class="animation_balloon" src="/static/balloon.png"></image>  
<image class="animation_boat" src="/static/boat.png"></image>  

.animation_balloon {  
    position: absolute;  
    top: 10%;  
    /* left: 50upx; */  
    left: 5%;  
    z-index: 0;  
    width: 100upx;  
    height: 100upx;  
    animation: balloon 60s ease-in-out infinite alternate;  
}  
@keyframes balloon {  
    0% {  
        left: 5%;  
    }  
    100% {  
        left: 80%;  
    }  
}  
.animation_boat {  
    position: absolute;  
    top: 30%;  
    left: -160upx;  
    z-index: 0;  
    width: 160upx;  
    height: 170upx;  
    animation: boat 20s linear infinite;  
}  

@keyframes boat {  
    0% {  
        left: -160upx;  
    }  

    100% {  
        left: 125%;  
    }  
}

操作步骤：

在pages.json中添加tabBar的情况下，什么都不做，过一段时间后，页面就会卡住，

预期结果：

页面上的css动画，不会出现卡的情况

实际结果：

什么都不做，过一段时间后，页面就会卡住

bug描述：

在app（打包、真机运行）上，只要是在页面上使用了多个css的动画（animation），或多个uni.createAnimation()，都会出现，过一段时间后，就卡住的情况，在H5上没有出现过卡的情况，只有在app上，才出现这种情况


更多关于uni-app页面中使用多个css动画导致页面卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

你发的文件中有LotteryDraw组件依赖，请发一个精简的项目，方便我们进行确认。

更多关于uni-app页面中使用多个css动画导致页面卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经重新发了精简的项目

回复 mengxinxuexi: 时间大概多久会出现卡

回复 2104_DLS: 这边测试没有问题，到现在还是正常的，请检查自己代码。

回复 2104_DLS: 我仔细看过了，可能是因为pages.json中添加了tabBar，会导致动画卡住，另外我已经把一个测试项目上传了，这个我测试过了，在什么都不做的情况下，过大概6、7秒，不超过30秒，就会出现页面卡的情况

回复 mengxinxuexi: 确定换个手机没问题吗？我这边已经测试过您的代码，还是无法看到您说的卡顿，如果更换设备仍然出现的话，您给我们录屏吧。

回复 2104_DLS:在另一个华为手机上测试后，没发现问题，只有在我的oppo手机上，才发现动画卡住的问题，那么有什么办法，解决这个问题吗？

在uni-app App端使用多个CSS动画导致页面卡顿是常见性能问题。主要原因包括：

  1. GPU渲染压力过大：多个无限循环动画持续占用GPU资源，在低端Android设备上容易导致渲染掉帧。

  2. 内存泄漏风险：无限循环动画可能引起内存累积，特别是在页面切换时动画未正确销毁。

优化建议：

  1. 减少动画数量：评估是否所有动画都需要同时运行，可考虑按需触发。

  2. 使用transform替代left/top：

@keyframes balloon {
  0% { transform: translateX(0); }
  100% { transform: translateX(300px); }
}

transform属性触发GPU硬件加速，性能优于频繁修改定位属性。

  1. 降低动画复杂度：
  • 减少关键帧数量
  • 使用简单的缓动函数
  • 适当延长动画周期
  1. 页面生命周期管理： 在onHide或onUnload中暂停动画：
.animation_balloon.paused {
  animation-play-state: paused;
}
回到顶部