尚硅谷前端基础 (119)

好，那么关于动画呢，我们再做一些简单的补充啊，其实大体上的内容的技术点的话也就这么多了啊，我们再做一些简单的补充，在这儿呢，我们来新建一个这个文件。呃，文件我们叫零三啊，还是来继续我们说我们这个动画的一个话题啊，动画动画呢，这个时候我们来做一个小的东西出来啊，小的东西出来，嗯，写一个页面先啊，直接运行一下。把这个关掉，我在这儿呢，诶，我创建一个div，点一个BOX1 box1的话，我们来给他简单写一个样式啊，Style标签还是这个样式啊，点一个这个BOX1 box1的来一个100，来一个100，然后呢，Border reducedi啊，Reduce reduce，我们来一个50%啊50%，然后呢，哎，我们设置一个background color background color，那们给它来一个这个井号，一个bic，哎，那这里的话，我们其实就会出现一个一个小球对吧，一个小球，诶我们把它改一下啊，我在它外边啊，我们再创建一个div，我们这给它来一个class，我这叫一个这个什么呢？OUT呀啊来个al啊，把这个BOX1呢，我给它包起来啊，包起来，然后呢，哎，我给BOX1呀，设点样式。

包诶这个给这个aler啊，设置点样式aler的话，我们直接给他设置一个，哎，我们直接来一个点aler，第2ALER呢，我给它让它的嗯高度啊高一点，Height呢，我们这是一个这个哎500个像素吧，哎500像素高一点，然后我们给它一个一个bottom，比亚迪亚一个bottom bottom呢，我给它来一个这个呃，十个像素，然后一个这个black啊black。Black black，然后来一个solid里啊这么一个等于就一个下边块，所以这块我们这就出现了一个边框对吧，一个边块，呃，这个边块呢，我让它稍微的呃，我让这个整个它的位置啊往下去一点，Margin的一个margin呢，首先我让它上下呢是一个50像素啊，然后左右呢是一个凹凸，让它达到一个这个居中的效果啊居中的效果那这样一保存的话，它就是这么一个东西，然后呢给它呃宽度就这样吧，哎，我们就设这么一个效果，那很很很简单的这么一个东西，那其实等于我这儿的话就是给它加这么一个边框，对吧，这个边框呢，就像一个地面一样，而我们这个是不是要一个小球啊，诶，那我希望做一个什么效果呢？哎，我们希望达到一个效果，让一个小球啊，诶落地的效果啊，落地的效果，那这里边我们很明显，我们要先创建什么呢？哎，我们要创建我们这个小球的一个什么呀？哎，小球的一个，哎，下落的一个动画，下落的一个动画，我们这直接来一个K。

Dreams我们就叫一个Bo吧，诶球的一个动画嘛，那这里边我们很明显我们就直接from，那我们这里边既然是想它往下走，那我们开始的位置肯定是零对吧？Margin top是一个零嘛，那它下到底边的话，那我们应该就是two two一个是我们这个margin top margin top的话，也就是说我应该是让这个小球是不是来到来到这个位置，那这个位置我们整个元素的一个高度是500，小球到这儿的话，这应该正好是400，因为你要刨除小球的高度，对吧，我们要这写一个400个像素，那这样我这个动画的正好位置的话，就应该小球正好就落地了啊落地了，然后我们给他设置一下animation animation，我们这个动画animation animation名字我们就叫一个这个Bo啊，Bo时间呢，比如说我设置一个两秒，这时候一保存，哎，这时候你发现出现了一个神奇的现象，我们现在并不是小球去走的，而是我们这个连着我们这个box，这个al是不是一起走了，哎，这个问题还是我们这个外边。

边距的一个重叠问题，我们给它设置一个over flow黑的开启他的BFC是不是就避免这个问题了，哎，你看这样我们这个小球是不是正好就落在这个位置了，哎，那我们还希望什么呢？我这个小球啊，落下去以后就直接停掉这儿了啊，就停在这了，停在这儿的话，那我们应该用的是一个这个forwards啊forwards直让它停在那，那这样是不是这么一个效果呀？哎，当然速度你可以让它更再快一点，我们写一个一秒疫秒是这么一个效果呀，哎，当然我们小球它下落，它属于一个自由落体的一个运动，自由落体的话，它应该是一个应该是一个加速运动，对吧，应该是一个加速运动，所以我们这个这个时间函数应该是一个easy z in啊是吧，慢进然后快出是吧，是一个加速运动，诶你看这样是不是就很效果很好了，对吧？哎，就是一个小球一个落下的一个效果，但是其实这个效果呢，它也它也并不是特别的真实，那我们这个小球，我们假如说它是一个弹力球的话，它落下去以后，他是不是应该还应该去往上再弹起来一段，哎，应该去。

弹起来啊，弹起来，所以这个时候的假设的话，哎，我们现在让它落下去以后，我还希望它弹起来，那怎么办呢？哎，那比如说我希望什么呢？哎，那这里边就要涉及到我们关键帧了，关键帧我们现在只有一个from，一个to啊from表示开始，To表示一个结束，那实际上我们的动画还可以什么呢？还可以再复杂一些，诶比如说我希望小球有一个落下，然后弹起再落下的一个过程，也就是说我们先落下，哎，从开始往这儿是不是先落下，哎落下，落下以后，然后再弹起，但是弹起的高度要比上次矮一些了，然后再从这儿干嘛呢？再落下，哎，再落下，那这个时候我们的整个动画是不是先是一个从from到to，然后从这个to再再起来，从起来以后是不是再落下，哎，所以等于中间我们是不是要再给它分一个步骤，哎，分一个步骤，所以这个时候呢，我们这样，我这写一个25%，那表示什么意思呢？表示我动画执行到百分之二十五十的一个位置。

是，那我在这儿直接给他来一个margin top一个什么呢？400像素，也就是说当你到25%的时候，我让你干嘛呀？诶就到底了，哎到底了，然后再到什么呢？再到一个这个50%的时候，百分50的时入让你干嘛呢？我让你弹起来marin top值射要大一点啊大一点当然也不能太大了，我们就来一个100，你也不能到零这对吧，又不能到零，这到零这是不是又到头了，第二次弹起来应该比刚开始那个位置要要低一些，对吧，是一个弹力运动，但是我们来看一下啊，我这个值设置的不太合理，那等于这儿就是0%，这就是百分之100%了，对吧？哎，那我们这样吧，我这儿的话给他百分之33%，33，然后呢，这儿我给他来一个66%是吧，我给他平均，大概给他平均的去分一下是吧，然后这是零，这是三是三，这是三三，这就变成一个100了，对吧，正好平均分了，那这样效果我们来看是不是就看出了，有一个这个有一个这个弹的效果啊，有个弹的效果，但是其实有。

发现这个效果非常的难看啊，非常的非常的丑，为什么这么丑啊，为什么这么丑？很简单，因为现在的话，我们这个运动是一个这个一字印，一字印的话，它是一个慢速开始，然后等于是一个加速运动，对吧？加速运动很显然你求落去的时候应该加速，但是你求起来的时候是不是应该是一个减速效果呀，哎，减速效果，所以这个时候我们应该为了真实起见的话，我们应该让球起来的时候，效果是一个减速，什么时候球起来，球是不是落到最里边的时候，它就该起来了，哎，所以在这400的时候，我们可以给它加一个animation的一个timing function，我可以来干嘛呢？我来修改一下它的这个时间的函数，改成什么呢？哎，改成这个减速运动啊，改成这减速运动，那这样的话，诶，你看是不是就稍微的就就真实一些了，哎，就真实一些了啊，然后再看的话，我们这儿的代码，其实你会发现这写的是不是挺。

哎，有点乱是吧？哎，并且其实你看这一段代码跟这一段代码是不是一样的呀？诶所以这个代码我们可以进行一个整合，我可以直接干嘛呢？33%来一个逗号，来一个吐，就像我用一个选择器分组选择器一样是吧？选择器分组这样效果是不是一样的呀？诶一样的就会有一个小球一个弹起，然后落下，然后再弹起这么一个过程，当然你可能也会觉得，哎呀这玩意儿还是感觉不是那么的真实，因为我们现在是不是只诶弹起就是落下，弹起再落下，是不是只弹起了一次呀？哎，你也可以让他弹起什么呢？你也可以让他弹起多次啊，你可以让他弹起多次啊，比如说我们这样写一下吧，哎，比如说我20%的时候落一下地，然后呢，哎百分之什么呢？40%的时候落下地，哎40%的落下地，然哎二十四十，我们想一下，这我写个六六十吧，诶60落下地，然后呢，这儿再来什么呢？诶来一个100%落下地，也就说我这一块是不是等于二。

值60，还有100%落地，然后中间的话，哎，我多设置几个啊，多设置几个，比如说80%的时候，80%的时候，再下一次就该100%了，百分百的时候落地，我让它低一点，然后呢，我们还有下边再有啊，当然你不一定非得按照这个顺序写啊，我再来一个40%，40的时候呢，我让它高一点，我们想一下这个80的时候，让低一点，让它200，这个让它高一点，它是一个100，那这样等于我是不是要弹起来两次，哎弹起来两次，那这样的话，哎就会更有这种什么呀，哎更有这个感觉，对吧，更有这个感觉，当然这个东西呢，哎看你怎么去设计啊，这东西你当然你要更真实的话，这弹力更足的话，你可以再哎多设置几次对吧，再多设置几次，那这里我们就做成这样就OK了，当然我们可以把时间给它再调长一点，哎，就这么一个效果对吧，这么一个效果，哎，就是一个小球弹的过程，如果你希望他不停的弹，你可以给他设置一个这什么呀，哎，In非尼，In菲尼，当然这个in非尼的话就会比较的奇怪了，是吧，比较奇。

败了，因为它会什么呀，他会从头开始谈，但是你要弹起来的话，我们可以反过来让他来一个这个alternate alternate，我们来看什么效果。

嗨，这个小球反正整完了就就比较怪对吧，整完了比较怪，所以这个时候呢，我们就可以就是这个动画的话，功能就这么多，然后我们可以你在可以自己做的时候，可以自己发挥一下什么呀，发挥一下想象力，当然如果你说我就想简单的让样一个小球反复的在这，哎往上往往下往上往上往下往上的，那你就可以简单就写一个from，然后这写一个什么呀，写一个to mardu top，我们这是一个400像素，那我们看到效果就是一个小球在这反复的上下上下的去移动，当是你需要反复移动的话，还得把我们那个alter net写上啊，这样就是一个诶落下，然后起来，然后再落下，当然这个就不符合我们那个那个物理了，对吧，符合我们这物理了，那这里边我们可以把它时间改短一点，改成一秒，然后这个我们就改成这个意思。太慢了啊，我们来一个点三秒，诶这样就会一个反复的落，诶感觉这个小球有点抽了似的，这种感觉是吧，换成一个我们换成一个匀速的啊，那这样可能会感觉好一些，对吧，我们这样就得到了一个反复跳动的一个小球，但是这里边我们还可以发挥一些想象力，比如说我想象这个东西，诶能好看一点，好看一点怎么办呢？好看一点啊，我可以这样，我在这儿啊多写几个。

我来一个，这来一什么呢？来一个BOX2，然后这来一个BOX3，这来一个BOX4，这来一个BOX5，我说一共多宽呀，一共宽度是一个，诶我没有指定宽度，没有指定宽度，宽度就是跟我们屏幕一块宽，那我们就先指定这五个球，五个球的话，我们在这儿的话，我直接给它统一一下啊统一一下我这不写BOX1了，我直接写什么呢？Al特下的一个div al特下的div，那这样等于我这些样式是不是给我那些所有的小球是不是都设置这么一个样式，哎，都设置一个样式，但是这个时候你设置完了这个位置，就感觉感觉很奇怪啊，很奇怪，因为现在我这个小球是不是变成一个这个重叠的状态了，哎，因为现在这个球是不是都是一个块元素，哎，块元素重叠了，重叠了我们的向左浮动啊，浮动一下那么并排对吧，现在就变成了五个小球，但是这五个小球诶，我们还可以再多整几个，这来一个678诶。

那是不是就诶再再来一个，再来一个九，把它撑满是吧，哎，变成九，九个小球在这儿是不是蹦来蹦去啊，哎，蹦来蹦去，然后呢，我们可以再简单的设置一些效果啊，设计效果我们分别设置一下，这应该我们有BOX2 box2，然后我们复制一下啊BOX2的我单独给它设置一个颜色，Background color background color，比如说我设置一个orange，一个橙色的啊换一个颜色，诶包括哦，我们这选择器的优先级不够。我们直接加个div啊，Box括三，然后呢，下边我们复制一下啊BOX23456789，这是一个2345啊，我先别让它蹦了啊，我先给它叠起来啊，这是一个这个六，这是一个七，这是一个八，这是一个九，然后呢，颜色我们分别指定一下，这个我们来一个yellow啊，这个呢，我们来一个yellow green啊yellow green嗯，下边这个呢，我们也不要orange了，我们换一个这个blue吧，哎，Blue换一个蓝色，下边这个我们来一个pink呃，Pink哎，五彩小球是吧，粉色的这儿来什么呢？来tomato啊tomato然后呢，这儿我们来一个这这个这个还有什么色啊哎，Sky blue啊sky blue这儿再来一个chocolate啊chocolate，那这个时候我们是不是就得到了这么几个，哎，不同样式的一个小球啊，哎，一颜色，哎，五彩的小球，当然。

感觉这个小球这一排的泵跟一串糖葫芦似的吧，泵不太好看是吧，那我们可以再这样设计一下我干嘛呢？我给Bob啊加一个animation delay，也就是说我给他这个动画加一个延迟，比如说我延迟一个点五秒，哎，能延迟五秒再执行，那这样我们这个BOX2是不是跟别的就都不一样了，哎，我可以再延迟少一点，我延迟两秒吧，0.2秒。

点一秒呢，有一个延迟，那这样他们就不同步了，对吧，然后呢，我给每一个呀，我都给它指定一个不同的延迟，第二个呢，我们要延迟0.2秒，第三个那么让它延迟0.3秒，第四个啊，BOX5我们延迟0.4秒，BOX6我们它延迟0.5秒，哎BOX7我们让它延迟0.6秒，哎每一个都延迟不同的秒数，那这样就等于他们在动的话，就不是一个同步的运动，它们就会有一个这个，哎有一个这个层次感啊，我们来写一个这来一个八，哎来以保存，诶那是不是达到这么一个效果，哎这么一个效果，当然我们还可以再去调整它的一个，哎运动的一个时间，那当然这里边呢，主要就是简单展示一下是吧，我们可以用它做出一些非常这种丰富多彩的一个效果，那主要还是说一下我们这个key frames里边这个关键帧的一个使用它这个位置啊，From表示0%，To呢表示100%，我们也可以自己去指定这个百分值，然后这个百。

百分比的话，你可以在这儿干嘛，诶在这儿通过逗号隔开，类似于我们那个选择器分组的一个指定方式啊好，那关于动画我们就说这么多啊，好停一下。