36.尚硅谷_css3_扇形导航.wmv原创

好来，咱们把这个扇形导航给他做完啊，就是对于数学上的东西啊，其实整个前端这一块啊，不需要了解太多啊，这边给稍微给大家去写一写。哪几个点需要你懂的。第一个啊，勾股定理，这个不懂的给我出门左转，勾股定理还是勾股定律啊定理吧，是不是第二个呢，三角函数第三个。角度与弧度的转换，好就这三样东西啊，OK，就没有什么其他东西需要你们去等的了啊，像之前讲的什么那个那个叫什么就就叫矩阵，是不是不需要你们懂知道原理就可以了，懂不懂开发时候不可能让你给张纸，我说做个运动把这个矩阵给我画出来，疯了，你在写浏览器呢啊，OK。

好来看一下，好，那我们看现在这个上形导航坐哪了。咱们是不是现在让他们出去了问题出去还不够，点击它得放大吧，那我问你点击它跟点击它还有任何关系吗？就是放大效果跟他还有还有任何的关系吗？没有，没有的话，所有的逻辑还需要放在这个后点里面去做吗？不用这个就可以给他合上来了。是吧，这个也可以给他。合上来了是吧，相当于这两个东西就过了翻篇了是吧，这我们可以说是第一部分吧，是吧。这里好，那么来看那是不是要做第二部分了，OK，好，那第二部分里面又要踩踩坑了啊。

我一直说坑说坑啊，因为最最重要的就是这些坑，API谁都会讲了一遍之后，应该大家都会懂不懂啊，能区分你们这个水平高与低的就是这些坑，你有没有理解啊，啊，能不能去避免这些坑，我们来看现在我们做一个什么功能。点击它的时候干嘛。放大是不是OK，怎么做？啊，我先把之前那一版给他打开来。啊，其实这个效果还是蛮狠的，来看一下这你爱不是好。他放大了还得回去吧，还是有一个透明度的切换吧，是不是啊，问题是还得回去放大好做啊，你看我做放大开开心心啊看。做个放大，怎么做，找到所的卖吧，要不要给他循环去加事件。

每个都要点的吧。是不是啊？每个都要点的吧，怎么办？来一个负循环是吧，Y一个I等于什么鬼零嘛，I小于什么。认识，然后呢。这加码，然后里面执行这个吗？还是这个循环体吗？这个循环是怎么执行的？先他我问你这行代码执行几次啊。问，你这一个括号里面有几个表达式啊？三个表达式，一个表达式，两个表达式啊，三个表达式。他是怎么样执行的，这个表达是被执行了几次啊一次，然后执行哪个表达式。这个表达式，然后执行什么循环体，执行环循环体之后执行I加加，然后再执行什么第二个表达式再循环题在哎加加啊，这个只被执行到了一次，懂吗？不要问你，不要人家问你循环，循环里面有几个表达式，你都不知道，你都不知道他在问什么，懂吗？循环里面有三个表达式，第一个表达式只被执行了。

一次啊OK，那我问大家，那这里面应该怎么写。Image给每一个图片去绑定什么哦，可个世界吗？好，OK，这个世界你们要干嘛？是不是给它放大，是不是这边能不能image。不可以用，记住这里面有个问题叫B包，之后我们会讲千万不能用，一般啊，现在不懂没关系，可是你得知道一下不能用应该用什么，This OK，看问你this选什么。点等于什么？原来的两倍嘛，是不是透明度干嘛点。

死掉。点op等于。零点嗯，小一点吧，0.580.1吧，是吧，看看行不行，只有你刷下你给我出来是不是拱。我的天都变成大饼了，回不去吧？变大我们有没有做完，变大很好做吗？是不是？问题是你得回去啊。是得回去啊，咋回去啊？什么时候回去啊，放大完就得回去啊，是不是啊，放大完就得回去，而且我问你现在在这个放大过程当中，它有没有延迟的。

切记我们在这边操作的是image是吧，他的全码看一看，在我们点击home的时候，我们操作的也是image的，还操作夸大的全三性吧，操作完相当于给你。我那个身吧，你没有，你你有没有把这个东西给重置啊，没有，切记你没有，除了这个犬缝，你重置了犬塞形，是不是还是保留在这边的全塞项，因为你点了home键嘛。你看一下嘛。一旦我点home键，点完home键，他们身上肯定都有全择性了，现在我再点的时候，这个全三线。能会不会起作用，会起作用的，所以我点它的时候有没有延迟啊。是有延迟的，延迟多少秒？是不是我可以把这个效果给你们放大，你们来看，我把这边改成一是不是就可以了，来看一下，你们就可以看到这效果了，走你。好像有点二。

是不是你看点他没反应。用户以为自己电脑坏了，四秒之后放大了，吓一跳，吓死了，谁赔啊是不是，怎么办？怎么办怎么办，你这边一定要把它治回来啊，是不是啊？能，能用吗？不能。用this.this点掉点全性重新回来吧，要不要延迟啊，不要延迟啊，就给个什么。一秒就可以了，我只需要一个过渡而已，懂吗？OK，走，你来看，这个时候往上走，大家看现在他们身上是不是还是有延迟的。没毛病，肯定有延迟的，00.10.20.30.4是不是，可是我一点看。去看这个我一点它立马变成一了嘛，是不是啊，问你这个时候这个过渡是不是立马出发的懂吗？因为点上去把全上去变成一了嘛，变的这个过程很快的，动画还没开始呢，今天我们上午已经讲了，懂吗？OK，然后怎么回去，主要是现在变大就没问题了，肯定没有延迟了。

是不是啊，没延迟是没延迟了。咋回去啊，动画执行完回去吧，你什么时候你知道动画执行完。此痛。想想什么时候动画执行完了。过度执行完有一个事件叫做全，嗯，给谁家所有的你们爱吧，是这啊，点二的listen加个什么事情。全三摁的时间来一个方是不是好？问你这个方干嘛？

这个方程要还原，肯定要写好多逻辑啊，那怎么办？单独拿出来定一个函数在外面可不可以啊，来一个方形叫做明码密码，而且我问你。你给这个image I绑了一个全身的世界，你是不是应该放到他的click里面去绑，你能放到外面去绑吗？你看这边我有没有触发过度，我触发过度就会触发这个世界，懂吗？是在这边触发过度的时候，我在这边触发过度时候，我需要触发这世界吧，不需要，所以说应该在。我可里克里面去绑，不能放到外面去绑，能不能讲，切记OK，然后你绑上了，是不是就永远都有了。绑上了是不是永远就有了？你给一个多么检点，绑一个世界，绑上了是不是就永远都有了？是不是你给一个动物，你把那个课题卡用了一次之后，这个课就废了。

你给一个多么节点绑了一个欧克个事件，用了一次O这个欧克个事件呢？回调函数就废了吗？不是你绑上了就干嘛永远都绑上了，那没讲，问你这个全三形N的直线能永远绑上吗？全三星N的世界能不能永远都绑上？你永远绑着的话，我这边触发全三星的时候，不是还会触发你这个事件吗。我得让这个事件只触发一次，什么时候出发？就在你这个点击放大的过程中出发，一旦你变回原样的时候，就不应该有这个全择的事件了，也其实就是什么，我在这个回调函数内部。得自杀一下。是不是这个道理，是不是这道理啊，因为我不只想让他用一遍吗？那我是不是得让他自杀一下，怎么自杀？问你这个里面的日是不是还是这个，你们哎呀干嘛。

我能保时捷能不能？解绑这什么re嘛remove嘛，Remove什么。哎，是不是叫remove element remove是吗？Listener吧，是不是？给这个节点去解绑事件。哪一种类型的全三先摁的类型的哪一个事件FM吗。是不是这样的，我问你多林跟多他有什么区别啊，就on叉叉这种形式啊，跟我爱的英文的有什别啊。是。一个是有用的，一个是没有用的是吗？一个是可以给一个节点绑定多个事件的，同一种类型的事件，你可以给他绑定多个回家函数的，这是多么时间多么林里面的话，干嘛一直覆盖的。

是不是这个道理啊，OK，也就是说你在顿二里面，因为因为你可以给一给一个节点的一种类型的事件绑定多个轨则函数，所以说它出来了一个解绑。解绑的时候，你得告诉我，我要解除这个动物节点身上哪一种类型事件的哪一个回调函数。那没理解啊，OK，那我是不是得这么去想是吧？OK，好，那咱们安静一会。卡了好过一过是不是道理啊，OK，那问你在这个F的内部要干嘛缩回是不是，是不是现在我让你放大了透明度变成了吧，我得让你这个。OK啊，这边是我们收回代码的一个时间啊，把全三性调成0.3秒啊全。把书放成原来啊，原来一样的大小啊，最终再去调一下透明度就可以了。

我们再来看，我们说是不是出来这个时间有点慢了，那我们稍微换换，换成一个0.5。差不多了，应该。是不是差不多了吧，是不是好OK，没结束呢，感觉做完了是吧，是不是。感觉做完了是吧，好看着好，我来问大家出去时候是不是赚的，回来的时候是不是赚的，出去赚的吧，好你看我每个我都点一下关注一下，回来的时候还赚不赚。赚了是不是，你切记啊，你在我的时候，你不光光改了全了，你还改了全的。能不理讲我这边是不是也改了全的，改全是时候，有时候过度是没有办法触发的。我大家看我这边是干嘛旋转吧，你到这边是变成缩放了，来看一下嘛，走你。

好，我们来关注这几个标签。一卖家出去的时候，大家看他们身上的全是什么？是不是来看一下我点击的时候会把这个变成什么。变成个二为一是不是，然后我最终回来的时候，你看最终回来之后二为一要变成多少。零。你说靠谱吗？还能触发过渡吗？为什么第一次是可以触发过渡的，你是从无到有啊，你看这个时候是不是转的很正常，这个时候你从干嘛旋转干嘛变为缩放的时候是不是也有过度啊，好像也没问题吧。可是从缩放变为。旋转的时候就没过渡了，我们说绝大部分底下，因为干嘛你全释方们这个变换类型不一样，个数不一样，顺序不一样，会造成问题的吧，所谓的规避这些问题，有可能时候会出现问题吧，这里可以看这种变换的组合，那这个就不要去细究它了，那我们开发时候怎么办？OK干吗？

我们说你在这边干嘛，我们要知道操作旋转，旋转跟缩放的是不是，那我每次写的时候是给为一，这边也是一是不是啊，这边应该怎么写，你现在问你只要在这边触发的事件，是不是他都在外面。这几个元素都在这个状态底下，他们的旋转肯定都是负七百二的，是不是啊，那怎么办？把这个夫妻班的这个状态给我带着。给我带着是不是？是不是来看一下走你刷一下，现在现在才开打，出去赚的吧，回来赚的吧，OK来看在我再点点点点点点完我再再回来转不转。

转的是不是因为干嘛。你这个圈子分母在切换的时候干嘛？个数顺序是不是一样的值，这里面值不一样，这个没事情的，只要你这个顺序跟这个种类的是一样的，那不讲，可是你想想以后如果开发大型项目还这么做，累不累，每次都，哎我上次全实部的状态是什么？我要不要带着机械类吧，那之后我们会定义组件，专门定义函数来处理这个群风懂不懂，那这我们做项目的时候我们再来定义，首先你得知道有这些问题。有了这些问题之后，你才知道我们后面去定义一些组件的时候，它有什么意义，能不能讲，可以来看到，来给大家看一下。走。好，我们在写的时候，好，我们这边有个全书链接是吧，这是我们自己写的一个组件。

啊，这个组件。这个就是干一件事情来解决我们刚才的问题了，懂不懂我们把所有的对全的操作封装到了一个函数里面。啊，我们让这个函数来帮我们管理啊，我们不需要手动的再写业务的时候说一直要去啊，要去要去查一下，或者要去看一下，哎，我现在操作一个do节点的变化啊，这个动节点之前有没有带变化，那是不是太累了啊，那我们这个函数就用来解解决这个问题了啊，这个函数我们之后再来写能不讲好，那今天我们就先讲这么多啊，其实还有一个东西没讲什么没讲，始终没讲啊，大家想我们做到现在。变换里面说的东西是不是都已经全部处理到了，除了一个基点。是不是我们在写这个扇形导航的时候，基本上我们说变换过度我们都去用了，而且用的蛮还是蛮深的吧，是不是啊，可是我们说是不是没有做到基点的变化，是不是？那大家想做时钟的时候，是不是就要有基点的变化了？好，那这个我们放到星期四早上来复习的时候，我们把这个时时钟变化也写了，听不见啊，好，那你们今天就把这个2D扇行导航一定要把它写完，能解吗？里面的坑，过渡的坑，变换的坑，只要你整理好啊，这是你们今天的重点，OK。