css动效使用总结

使用webp格式的图片

使用方式：将webp的图片作为背景图或者放在img中。 出现的问题：在ios中会出现帧图片重影的情况。

使用拼接的序列帧长图

前提：设计提供每一帧拼接好的序列帧长图，以及动效的播放时长。假设提供的长图宽高为25500px * 850px, 播放时长为4s，屏幕宽度为750px，那么长图可以分为34帧图片。

使用方式：

1. html部分

   <div class="animation-wrapper">
       <div class="animation-img"></div>
   </div>
   

2. css部分：使用steps(n)动画函数，将100%的动画终点分为n帧来执行，每一帧的时间为动画的总时长除以帧数。

   播放一次，停留在最后一帧图片的样式：

   .animation-wrapper {
     width: 100vw;
     height: 850px;
     position: relative;
   }
   .animation-img {
     width: 25500px;
     height: 850px;
     background-size: 25500px 588px;
     /* 
       使用steps(33)将动画分为33帧，
       比原始的34帧少一帧是为了停留在最后一帧的开始位置，
       forwards用于控制停留在动画的100%时的样式 
     */
     animation: back-bg-steps 4s steps(33) forwards;
     /* todo: 修改图片路径 */
     background-image: url('img.png');
     background-position: 0 0;
   }
   
   @keyframes back-bg-steps {
     100% {
       /* 这里100%的位置偏移要和33帧的宽度对应上 */
       transform: translateX(-24750px);
     }
   }
   

   循环播放的样式：

   .animation-wrapper {
     width: 100vw;
     height: 850px;
     position: relative;
   }
   .animation-img {
     width: 25500px;
     height: 850px;
     background-size: 25500px 588px;
     /* todo: 修改图片路径 */
     background-image: url('img.png');
     background-position: 0 0;
     /* 控制序列帧动画 */
     animation: back-bg-steps 4s steps(34) alternate infinite;
   }
   
   @keyframes back-bg-steps {
     100% {
       transform: translateX(-25500px);
     }
   }
   

遇到的问题：

1. 播放一次停止在最后一帧的方式：一开始控制动画的100%位置是使用background-position: -24750px，这种方式在ios中会出现图片前面的帧闪烁的问题。

2. 资源加载和动画不同步的问题：由于拼接的序列帧长图有点大，图片在加载的时候，动画就已经在执行了，网络太差的情况，会出现动画已经播放完了，资源才加载完成。 ===> 这个可以通过使用动画前，进行图片的预加载，这样子浏览器就会使用已经加载过的图片，而不会再去加载。