当我们制作一些通过属性变化无法实现的动画效果时,就需要使用逐帧动画。
现在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