CSS-雪碧图-逐帧动画

努力赚钱养猫猫
3,360 阅读4分钟

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，一个不想摸鱼的公举,期待着有一天能够咸鱼翻身。上一篇文章是 正则表达式 总结了常用的正则表达式。我之前看到了别人写的雪碧图动画帧的文章就对其特别感兴趣。今天我自己用CSS写了一个雪碧图的逐帧动画的demo和文章。

CSS逐帧动画原理

用所有的动画帧合并成一张雪碧图，主要通过 animation 和 background-position 来实现动画帧切换。

animation语法及各个属性值的说明

animation: name duration timing-function delay iteration-count direction;

值描述
name规定需要绑定到选择器的 keyframe 名称
duration规定完成动画所花费的时间，以秒或毫秒计
timing-function规定动画的速度曲线
delay规定在动画开始之前的延迟
iteration-count规定动画应该播放的次数
direction规定是否应该轮流反向播放动画

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像由background-image 属性来定义图像位置，如果要重复，将从这一点开始。

该属性的值

image.png

实现过程

(1)准备好一张雪碧图，然后作为背景图片，设置动画显示宽高和背景色。

spirit.jpg

动画显示的宽度 = 雪碧图的宽度 / 雪碧图的多少个动画帧

动画显示的高度 : 一排则显示雪碧图的高度,多排则雪碧图高度 / 多少排

HTML代码
   <div class="bear"></div>
 
CSS代码

   body {
         background-color: #000000;
     }
  .bear {
        position: relative;
        overflow: hidden;
        width: 120px;
        height: 250px;
        background-image: url("./spirit.jpg");
        background-repeat: no-repeat;
      
      }

效果如下

image.png

(2)接下来是让它动起来(首先先试一下吧每一步关键帧都写出来的动画)

从上面的雪碧图我我们可以看到有八个动画帧，那么我就写出8个关键帧动画

CSS代码
 .bear {
        animation: bear 1s infinite;
       }

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

        13%{
            background-position: -130px, 0;
        }
        26%{
            background-position: -260px, 0;
        }
        39%{
            background-position: -390px, 0;
        }
        52%{
            background-position: -520px, 0;
        }
        65%{
            background-position: -650px, 0;
        }
        78%{
            background-position: -780px, 0;
        }
        90%{
            background-position: -910px, 0;
        }
        100% {
          background-position: -1040px, 0;
        }
      }

闪瞎我的双眼，其实这里无论怎么调也很难调到让它走路平坦自然的动画

1.gif

(3)animation 的step()

在animation中steps 函数指定了一个阶跃函数，在一段动画中由好多个动画帧组成,那么此函数接收两个参数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。而且用了这个step（）函数之后，动画效果会变得平滑自然许多。

CSS代码
 .bear {
 //这里上面是分类8个动画帧所以step的步数是8。
      animation: bear 1s steps(8) infinite;
       }
 //然后这个bear的动画剧本就一步到位就行了
 
  @keyframes bear {
  0% {
          background-position: 0 0;
        }
  100% {
          background-position: -1040px, 0;       
        }
    }

效果展示，这里简直就跟人走路一样，这里是原地踏步走。

2.gif

人物走路向前动画

这个人物向前平移的动画还是比较简单的，加一个move的动画剧本。

CSS代码
 .bear {
 这里设置了无线循环，平移也是没一秒就一帧动画。
     animation: bear 1s steps(8) infinite, move 8s ease infinite;
  }
  
 @keyframes move {
   0% {
       left: 0;
       top: 0;
      }
  100%{
      left: 80%;
      transform: translate(-80% -80%);
     }
     }

这里补充一下transform相关知识点 transform属性可用于2D或者3D的转换，此属性可以对元素进行移动，缩放，倾斜，旋转。默认值是none，没有继承性。

语法：transform: none|transform-functions;

属性值详情

image.png

3.gif

实现走路往返动画

起初这里我是用了animation中alternate（逆向）的属性值来实现的

CSS代码
  .bear {
       animation: bear 1s steps(8) infinite, move 8s ease infinite alternate;
      }

效果展示不容乐观仔细看，搞得跟太空漫步似的。

4.gif

好了这不是我要的效果，好歹要调个头吧，那么我们主要改一下move的动画剧本就好了

CSS代码
 .bear {
       animation: bear 1s steps(8) infinite, move 8s ease infinite;
      }    
 @keyframes move {
        0% {
          left: 0;
          top: 0;
        }
        50% {
          left: 80%;
          transform: translate(-80% -80%);
          transform: rotateY(0deg);
        }
        51% {
          transform: rotateY(-180deg);
        }
        99% {
          transform: rotateY(-180deg);
        }
        100% {
          left: 0;
          top: 0;
        }
      }
这里总的来说就是快走到头的时候记得以Y旋转一下180deg就可以实现掉头的效果了

最终的效果，走得有点快，估计抓坏人去了。

5.gif

结语

好了文章到这就结束了，希望对大家有用。欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下； 今天是我参与2022首次更文挑战的第4天，加油！

avatar
文章
阅读
粉丝