尚硅谷前端基础 (118)

好，那接下来我们来。做一下我们这个动画的效果啊，做动画效果，那我们这种动画形式啊，就是通过我们的这种类似于这种哎，把一组动作给保存到一起的这种动画，我们都叫做一个哎SP animation精灵动画是吧？精灵动画为什么叫精灵动画呢？因为它都是通过我们的这个雪碧图来制作的，对吧？如果你要上一些网上去搜的话，就搜这种图，比如说我上这个谷歌去搜这个图，你就直接搜SPET啊SP一个animation animation直接一搜这种图片，你在这个网上的话，你能搜一堆，你看是不是都是这种连续动作图片啊，哎，你像这个这个这个这这不是这是我我就下载这个对吧，那这个这个这个是不是都是啊，哎，所以你可以找你需要那个啊，包括这特朗普这个，哎，我在那儿也给你们提供了是吧，啊这这这是什么玩意儿啊，这是拳皇是吧？哎就说你可以去找啊，找你这个需要的图片，然后的话，你就可以通过这种方式的话去。

实现这个动画啊，但是这个只是我们实现动画的方式之一，那现在我们来说一下我们怎么来实现这个动画啊，那这里边呢，我们实现这个小人的话，我们先来创建一个文件，创建一个文件，我们来一个12，我叫做一个奔跑的少年，诶奔跑的少年点一个HTM，然后呢，我在这里边呢，我创建一个图片，新建文件夹，我们叫做一个12，诶12跑哪去了，没错啊，然后把这图片我拖进去，B件拖进去啊，然后在这儿我们直接来设置一下它的效果，我们来写一下页面，诶写一个页面的结构，然后呢，我们来先给它运行一下。运行一下，现在什么都没有对吧？来我们在这儿写一个样式，点一个BOX1BOX1的话，这块我们来写一个样式style标签，Style标签呢，这我们来一个点一个BOX1 box1我来一个外宽度高度，我们需要根据这个图片的大小来看，图片大小是一个，诶宽度是一个200，高度是个256对吧，高度二五十六，那宽度呢，我们来看这是123456，一共是六个图片，六个图片它的整个宽度是1536 1536的话，它的整个一个度在我们让它除以一个六，除以一个六的话呢，应该是二六十二，二六十二，然后三十三五六，三十三十六六也是256，那等于它就是一个方形对吧，方形，那所以我们的这个宽高就是一个256乘以一个256啊，高也是一个256像素，然后呢，我们这里边我们让它居中啊margin我们来一个零，然后来一个这个凹凸，诶让它是。

一个得到一个居中的效果，然后呢，设置一个background，一个image image，把它设置为我们这个背景图片，Background image，我们直接来一个这个URLURL我们找谁呢？找我们的这个点斜杠下边的一个IG，下边的一个什么呢？下边的一个这个幺二，下边的一个这个BD2.1个PG这个图片啊这一保存这小人是不是出来了，诶那现在我要给他设置这个动画效果啊，动画效果我们这直接先来创建我们这个关键帧啊，创建我们这个关键的一个帧，关键帧的话，在这儿我们就直接来一个艾特，一个key frames key frames起个名我们就叫一个run，两个关键的位置，一个是我们叫做一个from，还有一个是我们这个to，对吧，两个位置from的话，我们这个是图片，那要是图片的话，我们这要通过修改我们这个background position来影响，那肯定是从零零开始，因为我第一个图片的天移量是不是零零啊。

一个便宜量是零，零，那我。从零零我要到哪结束呢？我是不是要到我的最后一个图片结束啊，那我最后一个图片偏移量多少？最后一个图片偏移量我们这儿来看的话，应该最后一个图片偏移量宽度是不是应该这么多呀？哎，宽度应该这么多，高度不动，所以垂直向肯定还是零，那水平方向是不是应该是五个图片的宽度，哎，五个图片，那我们来看五个图片，那就是256乘以一个五，那就是什么呀？哎，五六三十，哎五二十五，哎28，然后二五一十是不是1280啊，所以按道理来讲，我这是不是应该写一个负的1280就行了，哎，负的1280，但是我不要这么写，为什么不要那么写，因为这么写太麻烦了是吧，你看我算这数，我我甚至这数我都不知道算的对不对，我可能算错了对吧，所以这个时候这个数算的实在是太麻烦了，太麻烦怎么办，我直接干嘛呢？我直接写它的宽度，它的宽度是不是1536啊，那OK，我这就。

直接写一个负的1536，负的1536，那好了，我问你了，我的负1536像素对于它这个图片来说是哪，是不是这个位置，也就是说负1536这个时候是不是就已经从这个图片这就已经出去了，所以负1536的位置这儿实际上是一个什么，是一个空白的位置，这什么也没有懂意思吗？这什么也没有，诶那同学说老师你这么写，那最后那个不就跑的空白了吗？哎，注意没有问题，为什么没有问题，因为我们现在它是一个背景图片，背景图片默认情况下是不是会平铺啊，哎，会平铺，所以这个时候我们这个图片虽然只有这么长，但是我们的浏览器会它进行平铺，所以这一块内容是不是会自动拿过来，它会自动重复的，会自动重复的，所以如果我这写了一个负的1536，实际上是在这个位置，那么这个位置显示的是谁，是不是就是我的第一张图片，哎，就是我第一张图片，所以这个就会。

看起来了，懂这意思吧，因为它会平铺，所以我们不用考虑说后边出来空白的问题，所以你在写的时候一定注意不要去设置那个漏水P的，如果你设置漏蕊P的这儿就很有可能就出现了空白了啊，就出现空白了，所以这里我们就直接写一个负1536，然后在这我们就可以执行这个动画了，直接来一个animation name，我们叫做一个run run的话指定一个时间，比如说我来一个两秒，那这个时候是不是就动起来了，但是很显然动的是不满足我们这个要求的，因为默认它是滑动的，我们这儿是不是需要一步一步走啊，所以我们这需要一个这个steps steps注意分几步，我们的长度既然写的是它了，长度写的是它了，长度写的是它，那实际上我们是不是要切到这儿，第一个，第二个，第三个，第四个，第五个，那最后一个是不是这个位置啊，所以我们这儿是不是要分成六步执行啊，所以你注意分几步你这就写几，那我要分六步执行，我这直接写什么呀，写六就完事。

所以你写的时候也是有技巧的，你看这个宽度就是你整个图片的一个宽度，你图片多宽你就写多宽就成了，而这个步数就是你图片的数量，图片有几个你就写几步，这样就没有问题，所以这个时候写完了看效果，我们这个小人就干嘛了，就跑起来，当然你觉得跑的太慢了，跑的太慢了，你把时间调的短一点，是不是跑的速度就快了，哎，那再有的话，你现在说老师我希望能不停的跑，那你就直接给他加一个infinniity，那这样这个小人就会不停的跑起来啊，不停的跑起来，那这样我们这么一个动画效果就完成了，整体效果还还不错，对吧，但是也做起来会非常的什么呀，哎，非常的简单啊，非常简单，那么待会儿的话，自己来尝试着把这个动画来做一下，如果觉得这个没问题呢，可以试着做一下这个这个创这个是吧，在特朗普这个图的话，它稍微麻烦一点，麻烦在哪儿呢？它是四层的对吧，它是四层，因为特朗普它这有四个动作，向前跑的，向右跑。

后的还有向左跑的是不是有四个动作呀，所以你在确定它的高度的时候，你就要确定每一行的高度啊，你这要确定每一行的高度，确定完了以后再设置就行了，其实技巧一样，量一下它的高度，这高度是多少，这高度是多少，你的to这值是不是就写负多少啊，诶写完了以后，这有几个图片上2466个图片，那么steps也是一个，哎六啊，自己尝试做一下，有套路啊，照着推一下就OK了啊好，我们说这么多，你们先停一下。