50.尚硅谷_css3_兔斯基.wmv原创

好，那昨天我们是把动画的一些API全部讲完了是不是，那今天我们说一定是去写一些动画的案例了吧，是吧？OK，动画案例是不是还没写，那我们首先干嘛？我们说首先来做一件事情吧，可能昨天在讲这个step的时候，大家应该不是很理解，是吧？来看下这个steps，好，那看现在我写了个什么东西啊。大家看，呃，其实animation现在我们是都是分开写的，Animation是有间接属性的。OK，我把这些东西都。好像有。你把不想来吧。好，是，是不是我们说你要写an可以直接写一个an啊，跟全三一样，第一个可以被解析为时间的，只会给第二个值，给点类，是不是好，好像这个课件还不能关。看一下。

有啊，这个好，人类具有视觉战略的特性，人类的眼睛在看到一幅画或者一个物体之后，在00:30秒内不会消失，这就是用来装逼的啊，听一下就行了啊，你说我有没有测过，我咋测包眼经扣下车我肯定不知道的，肯定是个嘛，维基百科上面搜到的，切记不是百度百科，是维机百科，能解吗？说明咱们是上外网去搜的啊，这个准确性会很高啊，OK，动画的原理。通过把人物的表情、动作变化等分解成许多动作的瞬间，利用视觉战停的原理，在一幅画还没有结束前，还没有消失前播放下一步话就给人类造成一种流畅的视觉变化效果，就跟我发现一样的呗，过胶片吧，是不是OK，这就动画的原理嘛，实上的话，使元素从一个样式逐渐变为另另一种样式的效果。爱信属性是一个简写属性，这我们就说了，可以用来描述动画的性啊，属性列表。

可动画属性列表我带你们看过了，跟全一样的，并不是说的属性都可动画的，也就是你关键这里面写的那个那个明是有限制，你不能瞎写，懂吗？OK，那简接数，这没那么多吧，是不在动？每个动画定义中顺序很重要，可以被解析为time的第一个值分配给an，第二个值配给OK，看到这句话就行了，是不是整张整个介绍里面啊，其他都是用来装逼的啊，最后一个比较重要。懂吗？OK，好，那装逼装完就关掉吧，我怕下次还有，干脆就关，OK，刷一下是不是保存一下？OK，那我们来看一下animation，首先我们说什么？那首先一般我们会会干嘛会写时间啊，其实让我的写法的话，一般我会写关键字的名字，先懂不懂，写完关键的名字我再来写时间啊，我不让他有延迟吗？那我干嘛一秒钟他啊之昨天我们定的是几秒钟。

我这边应该是昨昨天给了四秒。你看一步两步三步四步嘛，每步一秒嘛，是吧，那最要给四秒是吧，那是我昨天测的时候给了八秒，那这边是给十秒是不是给完十秒之后我们说什么，我说有个延迟，那就来个两秒的延迟吧，是吧，OK，然后还那写上去干嘛？所写是吧，还有还还有什么写。Post是不是默认值是啊。还有什么次数，来个三次，是不是还有什么。是不是执行的一个量品方向嘛，最后什么他面方形嘛，这个是不是很重要，是不我们就是不是就来看这个是不是步数是一步默认是什么，后面就是end的默认就按的来看一下它是一个怎么样的执行过程啊来看一下。

等一秒。走，你走，你有没有走，最后一卦没有，你看我现在是错开了吧，零到这个时间段，我是从到。是吧，走了就走了吧，然后到百是，然后到百到百是。是不是这样的，相当是个什么样的过程，首先在这边，然后到这边，然后走长线到零的位置，然后再走长线到90位置，最终走这么多，是不是一个。这样的过程。是不是OK，现在我们把它总共我们说分成一部，谁分成一部，谁分成一部，谁分成一部了，整个动画分成一步吗？一个关键帧周期分成0%到百分之二十五一步走啊，也就说你们能看到这个动画的过程。

你看是不是瞬间跳过去，你看瞬瞬间跳过去了吧，你看等个两秒是不是瞬间跳过去了，那我不我我们不让他等了，好吧，不让等了吧，来看一下，走你刷一下，等一秒过去直接过去，等直接过去，等直接过去吧。能不能讲是不是瞬间一个跳的过程，也就是说现在分成里面的话，零到25%，从这个位置到这个位置。瞬间的，它只是在这个位置等了一秒。能不讲，因为我让你一步步跳了吗？那是不是从25%这个关键帧走到百分之0%这个关键帧，走到20%关键有花时间吗？有慢慢的过去吗？没有瞬间跳过去的，那么讲说这个一秒钟并不是花在了0%~25%这个周期内的，而是在0%这个周期停。

一秒能不讲，我问你这时候停一秒是不在这边要停秒。要的吧，而且是不是按的时候，按的时候不就代表这停秒吗？问你停秒现在停几秒了，两秒了，再停一秒三秒，再停一秒四秒，我总共给几秒，总共给你秒，你是不是跑到这，你还能跑吗？这个关键是你还能跑到吗？跑不到了说明是不是跑到90这个位置就停了，来看我们第一次刷一下。你走你走，你停还下去吗？不下去是不是？那我问你在这个位置上他要停几秒。两秒，为什么这边是不是都在停秒，你还得回去秒，这会上面停几秒，两秒看一下。

刷下一秒一秒一秒一秒两秒是不是是不是不停了，很明显在最后这个位置上面停的时间比较长。你看是不是听的时间比较长了，能不能理解啊，OK，那大家看来我昨天画了一张按的图，能不能看懂。是不是一个价值过。是不是最终要不要回到这个位置上。可是在这个位置上面，是我在动画执行的时候回去的吗？不是因为我animation什么为bos吗？你必须得回到E撇位置嘛。

是不是真的来看一下，最终他有没有回去？双脚走你走你走你走你走你走你走你走你。走，其实到动画亭了，已经到哎。什么鬼？怎么卡在这？啊，我电脑卡了，我说怎么卡在这吓我一跳，好尴尬。我说不应该卡在这。卡在这，就刚刚我这冒冒了一身的冷汗。啊，我又开这个页面了，是不是不要开这个页面。这个页面太脏了，好了，整脸。

上去是吧，来看最后一次。回来了吧，是不是，你看在这个位置上面是不是也停了两秒。能不能理解？OK，那再来看一下四大。是不是有and就有什么star，你看我把它变成star，是不是变成好，变成star之后我们再来看。刷一下好，变成大之后，是不是干嘛上来就应该跑一步，也就说在这个位置上面有没有停啊，没有停找你看。我刷一下你看你有看到他在第一个点上停吗？没有来看下。走你你走，你这边停几秒，两秒想想吧，来看一下，我们看看下这个道是不是这个点上他能听到吗？听不到，这边等一秒。这边等一秒，这边等一秒四秒钟用完，正好跑完呀，是吧？OK，然是得得回去啊，这边等一秒等一秒等一秒等一秒秒钟用完，这个还到吗。

不到了吧，是不是从这边在干嘛？过来等一秒等一秒，等一秒等一秒，也就说什么，你看不到敌人。是不是的，来看一下嘛。看这道。来刷一下这。回去上去。上去。上去。等等两秒下来下来下来是不是这的能不讲，也就是他最终去boss这个位置，我啊去这个什么100%位置，是不是动画里面跑过去了，并不是最终被我这个boss一下跳过去了吧，我动画本来就要跑到这的吗。懂吗？也就相当于它在最后一帧，肯定是要等一秒的。是不是啊，那你看一下我如果不是boss的话，大家看不是boss吧，来看一下。

刷一下你看到他，你能看到他的初始位置吗？不是boss的话，本来你的位置是不是应该在这边呢？上来的是吧，你有你有看到吗。上来就给你一个嘛，执行自动化了。能不能理解，OK，也就是说跑到最终的时候，要不要在最后去等一等？大的时候跑到最后的时候，要不要在我最后去等一下。等一秒再跳回原来的位置吧，是不是你如果是按你需要在最后去等一秒吗？不需要，为什么你摁的干嘛，压根跑不到最后的是吧？来看一下我，如果是摁的只有你。真的。跑不到最后的吧你。上去了。他到最后去吗？没有吧，最后这个是不是永远都跑不到，能不理解，你看他上来一开始的位置在哪。

是不在上面，所以你永远看不到一一开始位置在这边，为什么？因为你大的时候要么就上来已经在这边走了一阵了，要么你在这边跟干嘛。得等一秒能讲，这能讲。能理解吗？啊，这是我们什么step是一个函数的一个解析，懂不懂，那用这个东西我们来做一个小动画啊，OK，来看一下我们做一个什么样的小动画。啊，做这个鬼啊，其实他跟雪碧图有点像，懂吗？我来看一下这张图长什么样。看看一下，看一下这张图长。能理解怎么做的吗？一帧一帧放吗？

对，跟轮播度差不多吧，一帧帧放嘛，放电影一样的吧，你看用这种用就是用这个用这个用用这个函数来做的懂吗？我们可以来看一下啊，比如说我们之前啊做的自行车手来看看。对，做过一个自行车手，我记得。啊，同学分享的时候他做的。嗯，自行车手。看看在哪啊。嗯，这边啊，这是同学在分享的时候去做的一个东西。啊，这也是一帧一帧的啊。动画啊，跟我们那个POS机一模一样的，懂不懂，只不过他找到了这张图而已。懂吗？找到这张图而已，所以说我们做出来一个动画懂不懂，那网上有好多动画都是通过这种形式来做的，那不讲你要把图设计好吗？你用一写就可以了，那看怎么写。

好的好，我们做这个兔斯基吧啊。OK，那我做完厨师机，你说那个自行车你也能做了是吧，来看一下这里。好，把这个自行车也给你们扣过来。拷到动画里面来吧。票里面啊，有一个自行车手自己去拿下，OK，来看一下我们怎么去做这个图。CTRLCCTRLCCTRLV02。做一个兔D好看一下兔怎么写？

好，这些东西全部干掉吧。关键是什么都重新来定义，OK，那我们说是不是给我这个东西漏一个口在这就行了，是吧，它这个口要漏多大。是不是得左上那张图片，是不是那张图是不是还没拿来。CTRLC直接贴过来，来一个。Email是不是CTRLV啊？这两张图也把你们放进去了。啊，OK，帮你们起个名字吧。好，走，你来看下这张，你们这张图有多大？48吧，高度上面48吧，总共576，看有几张，一二三四六七八九十十一十二，576除以12等于多少，算不出来怎么办，计算机。

计算器500。76除以12。诶，正方形48乘以18的一个正方形，那我给他漏一个48乘以18正方形，这样面数就行了，而且我说符合中国人的习惯垂直水平这种。兔斯基，OK？好兔四基人心，那么输入的是不是最好养成一个良好的习惯，那起码玻璃上面就给他不是干了，给他进了，你把他们干了咋整啊不呗，你把玻璃，你把最最上层的东西给他干了，那我也没咋话好来看下。

那50%OK。特别也为50%OK好，全phone全LETTER3D OK负的50负的50%负的500%走你应该区域啊，是不是这个Y是根还得给多少48PX是不是，你要是这个兼容性好一点的话，这种趋势方是不是万能的，是不是还为48PX是不是。OK，先给个背景吧，看这个位置对不对。没问题，是不是OK，好，然后把干嘛白光给它去掉，我应该放什么白色光，什么UURL是不是image底下的这张图。是吧，来看一下，只有你上来看到是第一个是吧？OK，然后写什么，你没写吗？是不是第一个。

关键字定出来是不是OK，这关键怎么定义？是不要想想。要要不然百分比。要不要百分比可以不用，为什么？首先你用百分比我可以理解，因为总共12个，你想你想定义12个百分比是不是，那我能不能就定义一个关键的周期分12步骤嘛，是不是一样的，这样是比较稍微还简单一点呢？不然的话，你在这边要写好多百分比吧，我只写一个百分比服装造就是不是，然后我在这个周期之内，我用什么步数来分嘛。能不讲啊，我知道你们的意思，你们意思就是说干嘛，我这个动画每一帧我通过我的什么百分比来分是不是，然后我这个什么，比如说我零到百分之百分之八点几，可能是这算一帧是不是，你这一针是不是干嘛，然后你写那个代函数的时候，在不写一是不是，那想想那我能不能只有这一个周期，我在不写可以吗？也可以吧，给看下。

应该改什么东西吧，你告诉我。什么background？是不是我一开始可以，你可在这边，你可以先明确的定来，我一开始的麦麦就是零零。是不是啊，其实关键字一开始他也应该是琳琳，你得看一下back是不是一个可动化的。

是不是不要瞅了？肯肯定是的啊，如果发现这个属性干嘛没有动起来，那他肯定是个不可动画属性，懂吗？最终往他去哪？整张图有多大？是我也我也不想去算什么算什么，我就用这个OK，而且我一张图是不在这边的，这边拉，是不是一个负值啊，应该到负的576啊，是不是也只有X上面到什么。负的576。礼貌是不的，OK，然后干嘛？我说你整个运动是一个线性的，行可以吧，我们说几秒钟让你动啊，一秒钟啊，我先看看。就是服装到处什么一秒钟吗？懂吗？就得快一点，不然你看到效果会我们来看一下嘛，这个值反正可以调吗？是吧，还需要写什么，我已经写了信，行了。

是不是现在看一下什么信心大成什么样子嘛。线性不太动啊。时间的一秒。没问题啊啊，我的天，好尴尬哟，好玩哦，什么鬼明显干嘛？这不是放电影吧，我们说要一帧一帧的看吧，你得让用户看到每一针吧，每一帧上面要不要停一下的，要停一下不是平滑的过去的，所以一定是跳过去的，懂吗？OK，你说我能用，能用线性吗？开玩笑，应该什么多少步，十一十二还是13，这个很重要，就看你刚刚有没有听懂。

虽然说这边我们之前写的时候的话，你不可以读，你不懂原理也能写，为什么我12345，我我是还不行吗？是不是啊，你发现我写11大概。效果不好，换了12，哦13。效果也不好。12。完美。是不是啊，可是我们说他是不是只做一次啊，应该做几次啊，循环嘛，In念一直给我在这边动吗？能吗？是不是想他快点怎么办。点五吗。九你能吗？是吧，再快点怎么办？点一嘛，能吗？看见没有OK，一般我说点八左右差不多点吧，问你执行完的是什么。其实点八就已经把那张图拉一遍了，懂吗？就在点八秒钟就已经从这个位置拉到这个位置了，懂了，直播再重重复的去做这些事情，懂吗？比如说我这个不写，我写个一，你们看一下。

咦，一次这个点八秒到底做完给谁了？好像就是一步一次啊，来看一下，我给个一秒。就你。02TWO，哦，我给他12步吧，是不是，那给点八秒是不是，那那大大家想想我在这边写的时候，其实总共要走几张。我这边是不有个框，这边是不是有一个。兔子个兔子啊，总共我们说兔子上面是不是总共有二条到这边是不是第12张是不是啊，可是我最拖是不成这。

是不是是不是我走的是五六码整张图里干什么，那我是不是直接要做到这边呢，其实我走多少帧。其实我走了13帧是不是啊，可是最后一帧永远都看不到，为什么？我的默认值是摁的吗？是不是总共其实走13走13针是不是，可是我让他跑18步吧。是不是跑12步的话，我想想是不是最最后不是永远都跑不到的，你想想你看看我们刚看看我们刚刚那张图吗？按的时候你看。你看其实我们说什么，其实效果是一样的吧，总共其实有五针吧。是不是，可是是不是他永远只跑到13？能不能讲这样的话，我们是不是拿我们是不是给那个全身一定的就是四秒。我们其实可以把这个步数也定义成是什么。

懂吗？只不过我们是把什么。是不是我们用了我们刚第一种思路啊，用关键帧来控制每帧动画，现在我们只是换了一个思路嘛，是不是我们动画之我们关键帧周期是不是只有一个步数变成思路嘛。能理解吗？啊，所以说干嘛，其实我们在这边写的时候的话，一定要显示到，而且这个知势嗯的能理解吗？能理解这个要理解它，不然的话你你以后只能考试了。能不能理解，OK，来看一下，其实我们说你看如果写四大都是有问题的。来来个什么infinite吧，这你看这个。其实是有问题的。是有问题的，这个动画干嘛，其实不是很流畅的，你看我摁的说一下看见没有，这个是不是稍微有点卡的。

能理解吗？啊，稍微是有点卡的。我。读的明白，你把把刚刚把你把这两张图看看。刚刚讲的就是那个什么步数嘛，那么你讲OK，那先大先把这个东西自己先过一下。确认。