前端做卡通动画，简单到难以想象

我把平时工作应用到的笔记整理成几篇关于容器docker的文章，又发了几篇以前鼓捣的大前端全栈nodejs框架eggjs的笔记，结果读者寥寥。没想到随手写了一篇讲解gsap动画库的文章，竟然比所有文章加起来的数据还好，这这这……

好吧，那就随手再写个动画技巧吧。

愤怒的小鸟

先上第一个简单的效果图

我问过朋友之后，他们说我只写核心代码的行为十分可耻，就像告诉他们学好前端，一定能升职加薪，当上总经理，出任CEO，迎娶白富美，走向人生巅峰……

可怎么学，学什么，一概不说。好吧，我面壁……

不过还是要先说核心代码，为啥？因为太简单了！

代码如下：

.content {
 width: 718px;
  height: 634px;
  background: url("./img/bird.png") no-repeat;
  animation: .3s go steps(2) infinite;
}
@keyframes go  {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -1436px;
  }
}

学过css的对上面这几行代码都不会陌生吧，挑几个关键的简单解释下：

animation：动画属性，里面定义动画的各项参数。这里代表，动画时长0.3秒，动画名称go，steps缓动函数，将整个动画分为两步（两帧），infinite无限循环动画。

@keyframes:定义动画，这里定义了动画名称为go，效果是动画开始（0%）时，背景位置为0，动画结束（100%）时，背景位置为-1436px。具体用法可查看css基础知识，推荐菜鸟教程，讲得详细，最重要的是有内置编辑器，可以直接看效果。

核心代码讲解完毕，其实这种运动的动画，原理大部分很简单，就是如何实现在这个位置循环播放一连串动作的图片。

我想大部分前端博主讲到这里就不继续讲了，为啥，因为懒o(╯□╰)o

我吸取教训，本篇文章会把从素材图到做成动画，整个过程使用的工具都简单介绍一下。

一连串动作形成的图片，叫雪碧图，上面的小鸟图很粗糙的，只有两个动作合成，形如：

这就是为什么我们要用background-position-x来移动背景的位置了，因为两个图片连在一起，需要移动，才能隐藏上一个，显示下一个。

通过这个也就能看出为什么要用steps函数了，因为如果不做操作，背景图会缓动离开缓动显示，达不到在一个区域闪现整张雪碧图不同位置的效果。

上面动画所有代码如下：

<template>
  <div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%">
    <div class="content" style="">
    </div>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {}
  },
  mounted() {
  },
  methods:{
  }
}
</script>

<style scoped>
.content {
 width: 718px;
  height: 634px;
  background: url("./img/bird.png") no-repeat;
  animation: .3s go steps(2) infinite;
}
@keyframes go  {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -1436px;
  }
}
</style>

框架用的是vue，ui框架是iview，大家可以看到，导航栏默认设置都没改

人物行走的动画

小鸟飞行动画虽然简单，但是其实已经应用了最核心的两行代码，其他动画不论复杂与否，只要是用雪碧图的形式实现的，原理就大差不差。

参考上面代码，完成任务行走的动画。

我们的素材图片如下：

实现代码如下：

<template>
  <div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%">
    <div class="content" style="">
    </div>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {}
  },
  mounted() {
  },
  methods:{
  }
}
</script>

<style scoped>
.content {
  width: 293px;
  height: 634px;
  background: url("./img/walk.png") no-repeat;
  animation: 1.2s go steps(8) infinite;
}
@keyframes go  {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -2464px;
  }
}
</style>

可以看出来，除了根据不同尺寸的素材调整.content的宽高和background-position-x的位置，其他完全一样。

最终效果如下：

制作素材方法

上面的小鸟雪碧图，是用两个图合成：

css制作动画，语法简单，各种学习文档详细，当动画复杂度不高时，肯定是首选。

不知道哪个网站有问题，挂载链接时审核不通过，只能写网址了：

将不同的图片合并成雪碧图网站1：https://www.toptal.com/developers/css/sprite-generator

将不同的图片合并成雪碧图网站2：https://www.codeandweb.com/free-sprite-sheet-packer

动画素材网站：https://opengameart.org/content/monster-spritesheet

这个网站里有的是没合成的素材图，有的直接提供了雪碧图，人物行走的动画便是使用的成品图。

想要了解地表最强前端动画库gsap，可以参考我的另一篇文章：gsap实现星空效果动画