逐帧动画效果——复杂点

除了前面《简单篇》中的背景位置切换方式外，我们也可以用多张图片呈现的方式制作逐帧动画。

首先，将每一帧动画单独保存为一个文件，这样就有了十二张图片。我们要做的就是让这十二张图片动起来。
先准备十二个div元素，每个元素放置一张图片：

<div class="run">
    <div id="frame1" class="run-pic">div>
    <div id="frame2" class="run-pic">div>
    <div id="frame3" class="run-pic">div>
    <div id="frame4" class="run-pic">div>
    <div id="frame5" class="run-pic">div>
    <div id="frame6" class="run-pic">div>
    <div id="frame7" class="run-pic">div>
    <div id="frame8" class="run-pic">div>
    <div id="frame9" class="run-pic">div>
    <div id="frame10" class="run-pic">div>
    <div id="frame11" class="run-pic">div>
    <div id="frame12" class="run-pic">div>
div>

接着，使每个div都已绝对定位的方式显示在run容器的左上角，并设置图片。注意图片的宽度和高度：

    .run{
        width: 300px;
        height: 372px;
        position: relative;
    }
    .run-pic{
        position: absolute;
        width: 300px;
        height: 372px;
        display: block;
        top: 0;
        left: 0;
    }
    #frame1{
	background:url(images/run_01.png);
    }
    #frame2{
        background:url(images/run_02.png);
    }
    #frame3{
        background:url(images/run_03.png);
    }
    #frame4{
        background:url(images/run_04.png);
    }
    #frame5{
        background:url(images/run_05.png);
    }
    #frame6{
        background:url(images/run_06.png);
    }
    #frame7{
        background:url(images/run_07.png);
    }
    #frame8{
        background:url(images/run_08.png);
    }
    #frame9{
        background:url(images/run_09.png);
    }
    #frame10{
        background:url(images/run_10.png);
    }
    #frame11{
        background:url(images/run_11.png);
    }
    #frame12{
        background:url(images/run_12.png);
    }

完成后是这样的，很多图片堆叠在了一起：

最后，就是该设计动画效果了：
应用jQuery来实现动画效果。制作思路如下：先将十二张图片全部隐藏，然后将第一张图片显示，停留0.1秒后隐藏，第二张图片则延迟0.1秒显示，刚好接续第一张图片隐藏，第三张图片延迟0.2秒，以此类推。所有图片全部显示完毕后，第一张图片在此显示，因此，两次动画轮回时间需要延迟的时间是其余11张图片显示的时间，是1.1秒。可以创建一个 loop函数反复调用，以生成这一动画轮回，而在动画最开始，则需要通过遍历 div 元素，为每个元素设置初始的延迟值。

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.run-pic').each(function(index){
			$(this).hide(0).delay(index*100).show(0,loop);
		});
	});
	
	function loop(){
		$(this).delay(100).hide(0).delay(1100).show(0,loop);
	}
</script>

• $(selector).hide(speed,callback)：如果被选的元素已被显示，则隐藏该元素。https://www.w3school.com.cn/jquery/effect_hide.asp
• $(document).ready(function(){… })：函数的执行速度快点。https://blog.csdn.net/u010098331/article/details/62036597
• $(selector).each(function(index,element))：遍历选择元素。https://www.cnblogs.com/agansj/p/8780220.html
• $(selector).delay(speed,queueName)：对队列中的下一项的执行设置延迟。https://www.runoob.com/jquery/eff-delay.html
• $(selector).show(speed,callback)：显示出隐藏的 < p > 元素。https://www.w3school.com.cn/jquery/effect_show.asp
• loop 是循环函数。
• $(this)：https://www.cnblogs.com/gfl123/p/8080484.html

在以上代码中，每张图片都立即调用 hide(0) 方法，马上隐藏起来，继而通过delay()方法实现延迟，延迟的时间等于索引值乘以100，因此第一张图片延迟0毫秒，第二张图片延迟100毫秒，第三张图片延迟200毫秒…经过延迟时间后，该图片再通过调用 show() 方法来显示，此时也调用了 loop函数，是图片开始进入动画的轮回。
结合到代码具体解释为：
对每一张图片，先立即隐藏，延迟 index * 100秒，再立即显示出来；然后再show()函数中又接了一个 loop函数。在loop函数中，图片显示出来后，延迟100毫秒，又立即隐藏，然后再延迟1100（为一个周期），又显示图片，如此进入循环。
可以发现，函数的写法其实就是把动画的每一个过程显示出来。因此，我们要仔细设计好每一个动画的步骤。