前端性能优化-帧动画

最新推荐文章于 2024-05-13 14:34:46 发布

Rainy_X

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量431

点赞数

分类专栏：前端优化文章标签： css3

本文链接：https://blog.csdn.net/Rainy_X/article/details/108850272

版权

前端优化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了如何制作loading动画，通过比较GIF图的局限性（颜色深度和透明度问题）和CSS3帧动画（闪烁问题）的实践，提出使用CSS3 sprite和transform:translate3d()方法的优缺点，并提供了解决闪烁问题的替代方案。

摘要由CSDN通过智能技术生成

需求

制作个loading动画，设计提供了每一帧282x282的图，一共60帧
图片过多我就不考虑切换background-image属性达到效果

一、gif图

出于偷懒的方式，先采用的用ps直接导出gif图，视觉上看图周围有白边
发现是gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重

.loading-gif {
  z-index: 999;
  width: 141px;
  height: 141px;
  background: url(../assets/images/loading.gif) no-repeat center;
  background-size: contain;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

二、css3帧动画

在线sprite生成器可以用来把多张图片合成一张sprite图

css3帧动画有两种写法

transform:translate3d()来实现

但是这个遇到的问题是图片会闪烁，未解决所以pass

  <div class="sprite-box">
    <div class="loading-sprite"></div>
  </div>

.sprite-box {
  width: 282px;
  height: 282px;
  overflow: hidden;
  position: relative;
  transform: scale(0.5);
}
.loading-sprite {
  position: absolute;
  top: 0;
  display: block;
  width: 16920px;
  height: 282px;
  will-change: transform;
  background: url("/static/loading.png") no-repeat center;
  animation: sprite 2s steps(60) infinite;
}

@keyframes sprite {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-16920px, 0, 0);
  }
}

改变 background-position 的值来实现动画帧切换

 <div class="loading-sprite"></div>
 
.loading-sprite {
  width: 141px;
  height: 141px;
  background: url("/static/loading.png");
  background-size: 8319px;
  // will-change: transform;
  animation: sprite 2s steps(60) infinite;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

@keyframes sprite {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -8460px 0;
  }
}