问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS老虎机Loader动画不流畅，如何解决卡顿现象？

头像
荔枝属牛
    48961

    css 仿老虎机的loader动画，每一轮结束，都要停顿一下才到下一轮。

    <view class="slot-machine flex_cc" style="top: {{ top + '%' }};">
      <image
         class="slot-machine__back"
         src="../images/slot-back-1.svg"
         mode="aspectFill" />

      <view class="carousel flex_space">
         <block wx:for="{{ 3 }}" wx:for-index="index" wx:key="item">
            <image
               class="slot-column"
               src="../images/slot-machine-{{ index }}.svg"
               mode="aspectFill" />
         </block>
      </view>
   </view>
    .slot-machine,
.slot-machine__back {
   width: 260rpx;
   height: 260rpx;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
}

.slot-machine {
   background-color: var(--color-ffe30a);
   border-radius: 260rpx;
   overflow: hidden;
}

.slot-machine__back {
   top: 50%;
   z-index: 0;
}

.carousel {
   width: 260rpx;
   height: 60rpx;
   overflow: hidden;
   position: absolute;
   top: 110rpx;
   left: 0;
   right: 0;
   z-index: 2;
}

.slot-column {
   height: 312rpx;
   position: absolute;
   top: 0;
   will-change: transform;
   transform: translateZ(0);
}

.slot-column:nth-child(1) {
   width: 90rpx;
   animation: scroll1 5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
   left: 0;
}

.slot-column:nth-child(2) {
   width: 60rpx;
   animation: scroll2 5.5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
   animation-delay: 0.7s;
   left: 0;
   right: 0;
   margin: 0 auto;
}

.slot-column:nth-child(3) {
   width: 90rpx;
   animation: scroll3 4.2s cubic-bezier(0.19, 1, 0.22, 1) infinite;
   animation-delay: 0.5s;
   right: 0;
}

@keyframes scroll1 {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}

@keyframes scroll2 {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}

@keyframes scroll3 {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}
    性能优化前端性能
    阅读 1.1k
    avatarAI BotBETA
    ### 解决方案

1. **优化动画性能**：
   - 使用 `transform` 和 `will-change` 已经是好的开始，但确保你的动画尽可能简单和高效。
   - 尝试减少动画的复杂度，例如缩短动画时长或简化动画曲线。

2. **调整动画时长和延迟**：
   - 确保所有列的动画时长和延迟设置合理，避免因为时长不一致或延迟过长导致卡顿。
   - 可以尝试将动画时长设为一致，并调整延迟来保持同步。

3. **硬件加速**：
   - 确保你已经使用了 `translateZ(0)` 或 `translate3d(0, 0, 0)` 来强制硬件加速。
   - 检查浏览器或设备的硬件加速支持情况。

4. **减少重绘和重排**：
   - 避免在动画过程中改变元素的布局属性，如宽度、高度或位置，这会导致浏览器进行重绘和重排。
   - 使用 `transform` 和 `opacity` 来改变视觉效果，因为这些属性通常不会引起重绘和重排。

5. **检查资源加载**：
   - 确保所有动画使用的图片资源已经正确加载，避免因为资源加载导致的卡顿。
   - 可以使用网络分析工具来检查资源加载情况。

6. **使用 CSS Variables 或预处理器**：
   - 如果你的动画涉及多个类似的元素，使用 CSS Variables 或预处理器（如 SASS 或 LESS）来简化代码和维护。

7. **浏览器兼容性**：
   - 检查你的动画在不同浏览器和设备上的表现，确保兼容性。
   - 使用 Autoprefixer 等工具来自动添加浏览器前缀。

8. **调试和性能分析**：
   - 使用浏览器的开发者工具来调试和性能分析你的动画。
   - 检查动画的帧率，找出可能导致卡顿的瓶颈。

通过以上步骤，你应该能够解决 CSS 老虎机 Loader 动画的卡顿现象。如果问题仍然存在，可能需要更深入地分析动画的具体实现和设备的性能限制。
    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏