逐帧动画效果——简单篇

当我们制作一些通过属性变化无法实现的动画效果时，就需要使用逐帧动画。

现在lllustrator 矢量图绘图软件中绘制好跑步动作的每一个环节（这里我借鉴书上的图）：

这里图像的每一帧内容都是 300x372像素的宽高。可以发现这张图片的像素是 3600x372像素，所以一共有十二帧。

---

在网页中引入此图片：

<div class="run">div>

    .run{
    	/*宽高度只显示第一帧图像*/
        width: 300px;
        height: 372px;
        background: url(run.png) no-repeat;
    }

---

逐帧动画的基本思路就是通过背景图片的位置，来实现图片的切换，进而呈现出动画效果。由于我们的动画一共有十二帧，加上动画的开头和结尾是同样的两个节点，因此一共需要十三个节点，将100%平均分为13份，则可以得到每个节点的百分比值依次为0%、8.3%、16.7%…100%。在每个节点中，我们只需要设置background-position属性，使图片依次向左移动300像素即可。

• background-position：为每个背景图片设置初始位置。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

下面是设计动画的代码：原理再简单的解释一下，我们最开始加载了一张含有十二帧动画的图片，然而我们只显示了最初的一张。之后，在下面代码中，我们让这张图片每次向左移动 300像素的距离，这样时间短了就显示成动画。

    @keyframes run{
        0% {
		background-position:0 0;
	}
	8.3% {
		background-position:-300px 0;
	}
	16.7% {
		background-position:-600px 0;
	}
	25% {
		background-position:-900px 0;
	}
	33.3% {
		background-position:-1200px 0;
	}
	41.7% {
		background-position:-1500px 0;
	}
	50% {
		background-position:-1800px 0;
	}
	58.3% {
		background-position:-2100px 0;
	}
	66.7% {
		background-position:-2400px 0;
	}
	75% {
		background-position:-2700px 0;
	}
	83.3% {
		background-position:-3000px 0;
	}
	91.7% {
		background-position:-3300px 0;
	}
	100% {
		background-position:0 0;
	}
    }

在.run中加上执行代码即可：

    .run{
        animation: run 900ms steps(1) infinite;
    }

• steps(1)：让每一帧动画不是线性变化，而是台阶式变化。 https://blog.csdn.net/qq_23269747/article/details/76152689