36_尚硅谷_谷粒音乐_音悦tai可拖拽导航-橡皮筋js.wmv原创

啊，首先就是嗯，咱们现在写这个音乐台，你会发现我们是不是还是以这种原生的方式去写啊，啊，那为什么我们还要写一个这么大的应用呢？啊这里面我们啊，不光是CSS还是GS的处理，处理形式上面的话，我们可以说是嗯，更加合理啊，用的技术的话应该是更加的多啊，综合起来去使用啊就说这个项目做完之后，它将会变成一个DEMO啊，不是一个DEMO，就是一个基础的一个代码库。我们会用这个在这个代码库的基础上，帮你们去讲模块化，讲工程化，讲构建工具，懂不懂，你说以后你想学好模块化啊，学好构建工具啊，构建工具我们讲PA讲讲在讲这些构构建工具的时候，我们依据的代码就是我们现在写的音乐条的代码。能不能讲那个时候如果你对音乐台的代码比较熟，那构建工具学起来就会比较的舒服啊，如果你对音乐台的代码还不是很熟，那你又要学新东西的同时，你还不知道我在干嘛，那就比较尴尬了。

能理解吗？那以后我们这个构建工具的学习的话，说实话也是比较难的啊，所以说啊，你们这个阶段一定要把这段结合代码，最起码每一个方法它是干嘛的你得知道啊，OK，好，那我们继续。好，其实这边我们刚才写的时候的话，我们说这边我们是写的基本的一个画面路径。基本花屏。逻辑好，那这个逻辑搞完之后，我们继续。我们再来搞一个CTRLCCTRLV03好，那这边就不是基本化逻辑了啊，我们说写我们要写什么了。啊，叫橡皮筋效果好，大家看这个橡皮胶果是有纵向有的效。好嘞，F12我过来可以叫C啊，这可能是我们在这个运当中遇到的第一个比较难的效果，好大家看这个下面效果是不是横向的下面效果。

是不是来分析一下这个下下面效果，是不是我们每次脱的时候就会感觉越来越难脱，松手那一刹那干嘛又弹回去了？什么样的，想想这种东西怎么实现会稍微好一点。感觉就是这个交互上面的话就比较舒服。是不是想想，首先我们干嘛，我们看我们先看我们时间嘛，我们这边时间是不是还可以超出啊，咱们先把这个超出先干嘛。控制控制问你拖到这一块说明。我们圈里面的全的X那个值是大于零吗？能能让它大于零吗？不能是吧，那怎么处理啊？在哪边处理啊？哪个世界里面。超出应该超出在哪个世界里面处理。

嗯。Move还是N的。木，木吧，是不是我们在拖的过程当中，你不能操作啊，木吧，OK，来看一下，那是不是在这，它是目的。来看一下是不是这个逻辑啊，是不是来控制这个值啊。这个值是有范围的，不能瞎写是不是啊，那我把这个值单独拎出来行不行，Translator。LA全是边长X等于什么等于？OK，最终走的话就走一个求X。这应该没有什么太大问题啊，啊，这是其他两个逻辑吧，这里好，那想想现在是不是对他做控制啊，如果什么。全干嘛大于零吗？那你应该干嘛等于零啊，不是做比较吧，干什么等于零吗？二呢。

应该L是不是当你这个全是X，干嘛小于一个边加。X的时候，你就应该等于这个MX，只不过这个面需要我们去计算。是不是这个怎么计算。画一个什么连接？X问你这个是个正值还是负值，负的，其实我说它是最角时，它其实是我们可以画出的最远距离。可它数值上它就是个最小值。是不是是不是这样的，大家看整体，这是我们的这个包括区。你是不是得花生那样？前面有个老嘴。是不是得画成这样，是不是，那我们要的最小值是不是这一段？是不是，而且肯定是个负值吧。是不是那谁减谁啊。

那谁谁能看谁蓝的捡红的吧。来的是滑屏区域吧，滑屏区一见到滑屏元素，这也是我们一开始这样布局的时候，我们说你为什么要百分百还原这个模型。你不还原这个模型就会出问题，很发你你现在怎么就是很精确就可以看到，如果刚刚你那个ul没有被成开人的话，这边曲子就不对。这个mix X取值就会有问题。是不是啊，那我们华平区是谁啊？他的什么？Of side还是？爱么？是他的什么？那么这样这个速度，其实整个整个滑冰效果就已经被我们拦住了，你看这边是可以滑的，它只能滑到底。

是吧，这里这个是不是只能往下投，是不是现在是不是就要考虑相比效果了，那么你相比性效果在我这两个逻辑里面，哪一个事件里面的什么逻辑里。你说橡皮效果，我代码应该在哪个位置去写？嗯。你看这个橡皮效果是不是还，你看这这时候不是有这橡皮效果，你看我们这时候是没有啊，那整个项目效果是还还在那边，还在目录里面，是不是在目的这个逻辑。慢，因为效皮效果，橡皮效果只有在超的时候才会有，你不超出不要跟我谈橡皮效果，你的橡皮效果要在这里面去做。橡皮筋效果是不是，而且橡皮筋效果现大家想它的套应该什么样？

好，我们来分析分析，好再来看，问你现在如果我没有下面效果的话，是不是我拖多少，你应该是多少。一旦我有了橡皮效果，是不是我？吐的很慢代表什么？清兵线，你拉我啊。这是不是它没有走，没有走它的一个有效距，我们说如果你拖这么多，如果你拖这么多，我滑冰元素也应该走这么多。只不过我拖这么多的时候，你花元素打了个折扣。你可能只走了这么多。能不能理解啊，而且我们来看一开始可能这个橡皮效果都压的没有这么明显。慢慢的才会有这种纤美效果了。那我说是不是我们在每一次他倾木的时候，它的有效距离慢慢变小？能不能理解这句话，橡皮筋效果就是你在滑动过程当中的有效距离慢慢的变小了，可是滑动距离还是越来越大的。

能不能理解这句话？首先我问你，橡皮，如果你拖，是不是，它是不是在往右走？往右走说明这段距离一直是慢慢变大的。只不过每一次变大的幅度变小了。是不是越来越难脱了嘛？这就是我们每一次胎期木的有效距离在慢慢变小。它在慢慢变小，那么讲我们把这个橡皮效果，我们来稍微的说一说，什么是橡皮效果。在什么的过程当中。在他什么？在他木的过程中干吗，每一次？

应该是在木的过程中，不能说在他切木的过程，在木的过程中每一次to c什么他切木干嘛。真正的有效距离慢慢变小。是不是，可是我们说什么元素的滑动距离还是在变大。能不能理解这句话？能不能理解啊，我们来看看，好，我来问你，比如说现在你看我滑一次，我再划一次，再划一次是吧，是我就问你，比如说我再滑，我刚刚这个是划了几次啊，问你我这里面触发了几次他筋膜。几次？再猜。

本次。这是我手指从这边点上去啊，来一次，来一次啊，来一次啊，来一次吧啊，可是在这个过程当中，他奇木事件被处罚了N次。移动端的Mo事件的触发是怎么触发的？可能每隔一微秒触发一次。哦不，PC的木，那个是木事件，他的触发机制很有可能什么每隔一段时间，这段时间很短，隔一段时间触发一次。移动端呢，不是每隔一段时间，像移动端如果每隔一段时间触发一次的话，这个效率是不是太低了。移动端干嘛，它真测到你动了EPS就给你处罚一次，动了EPS就给你啊触罚一次能不解，也就是说在整个过程当中，其实这里面触发了N次的，它其实这里面也是。

有好多次他积木呢，你别看你手指指划了一次，其实这里面有好多次他积木。能不能讲，现在我们能监控到的就是这里面的每一个小单人。对不对，那咱把这个单元放大。好一致吗？比如说这是我一次啊目的距离吧，OK，它里面其实触发了N次什么。他清木事件，这就是一次他木事件。是不是啊，那么你，那是不是我们要将每一次他启动时间的有效距离变得慢慢的。小啊，是不是，那么你那我是不是得拿到一个比例。这个比例是慢慢变大的，还是慢慢变小的？嗯。问你，我需要拿一个比例，这个比例是慢慢变大的还是慢慢变小的？慢慢变小。是不是因为我要让你的有效距离慢慢的变小，我每次还是把这的有效距离给你加上，那你滑动的距离就慢慢变大，只不过每次加上去的这个值有点少了，比如说你第一次好，比如说什么你第一次你划了十，十项数，我给你十项数。

你第二次划的十项数啊，我给你八项数，第三次划十项数，给你六项数，可是这个值是累加的，一次才变大了。总和不是一直变大吗？你给的，你给的再小都是往我身上加的呀。是不是，可是你每次给的一条稍微的少一点，那相比效果是不是差不多就出来了。有没有讲，那现在我们思路有了，是不是怎么转化成代码。反正我知道我们点它的一个比例。而且这个比例只在这两个判断的时候。你在判断外面就是你拖多少走多少。这怎么理解是不是，而且我们每一次我们说滑动的有效距离，每一次滑动的有效距离是不是就是它。

这是不是每一次换动率小九点，就是给他去乘上一个比例，这个比例是不倍数。能不能理解我的意思啊？好学生怎么做？大侠。我说这个比例怎么求呢？这个比例我也不想瞎求。是不是我这个比例我想怎么求呢？大家想大家看问你你前面这个留白是不是在慢慢变大。是不是啊，我拿到这个留白除以我这个视口的宽度，能不能拿到一个比例。我为什么要这么去拿比利？因为这个比例是等比的。不同设备上面干嘛，肯定是等比的嘛。是不是啊，这个比例肯定没有什么太大问题，你要是自己自己拿数字去算一个比例的话，这个比例肯定会不准，因为你不知道哪一款设设备的什么。

特性嘛，能理解是说首先我拿这个值，这个值是慢慢变大的。这个值是固定固定死的，那么你那我算出来这个比例是不是慢慢变大的，我那一减掉它是不是就慢慢变小。那么好，现在问题就比较简单了，OK，这个东西能不能拿到？这不就是四口的宽度吗？这个东西能不能拿到？这个东西是什么？是那个DX差吗，还是它。你的这个。是不是就是这个全程的意思，或者说你拿这个节点是算的什么。全是泵属性里面那个全是X怎么样。能不能理解，OK，那就好好说，我说我在哪边，在这边算比例。是不是问你，那这个值还能给零吗，现在。

目的时候你不可能给零的吧，我要我要橡平积的是吧？整比先算比例。好，问你第一个在这边大于零的是不是就是我们这种情况，这个比例怎么算一减什么。全是X闭上什么多的点，多的点可能他是这比例，拿到这比例怎么办。你最终移动距离不在这吗？OK，我让你这个地方全是一开始的位置。加上什么？手指移动的距离，只不过这个距离每次有两个嘛，慢慢变小，完事。能不能理解，哎，有同学说你这边算了个全单词啊，我这边把你覆盖掉不行吗。

你们这个时候X里面的X参数是不是都是一样的，每一次出发它进步的时候，你参到XX肯定是一样的。懂不懂？好，我们可以来看看。刷下这里，你看是因为。你看。诶，还往后走吧，先不要想着往往后走，大家看是不是我滑动的距离是慢慢在打折扣了，那为什么还要往回走啊，啊，虽然说在我们手机上可能不会出现这种情况吧，不可能我手指划到这是不是啊，你要是手指能划到这，你可以去行走江湖了啊，来算一下，再想想为什么你还能往后走。你往后走，说明这个全是X，最终变成一个负值。右。是不是啊，是不是有没有可能这个值慢慢减减减减小一点呢。完全有可能吧，可是我们能不能让它小于零啊，不可能，你不可能出现小于零的情况啊，你看不管我怎么再滑，你看我滑到干嘛屏幕旁边去了，懂吗？

他也不可能往回走，你现在往回走了。说明你这个全X要变成负责。是不是啊，你说最好不要拿理解。可是这个比例还是得慢慢变小的，那该怎么做？来看看，我说这个比例这么求最好SC啊，不给你们卖关子了，好，怎么求？CTRLC，我还是拿这两个参数去求。我让你到分母上去不就行了吗？我问你，随着全X慢慢变大，慢慢变小。而且这个值百分百控在了到底之间，这个值百分百不会超过你到。

也是，这个拉力系数就在零到一之间，这应该是符合我们常识的啊。是不是零到一时间，你这个全是X干嘛，最多是平方，你往右拉的话，它只会到。你再怎么大干嘛？你除下来也不会干嘛？小于零只能是无限接近于零。你求X为零的时候，那就是一嘛，那就是零到一之间的一个比例嘛，那这个比例是不是才是我们想要的。能不能理解啊，来看一下周年。我刷一下。你看永远都不会干嘛。永远都不会往回走吧，是不是，那想想那是不是感觉上来这个拉力系数太小了，想这个拉力大一点怎么办？你默认上来干嘛？整个值干嘛，我把整个值放大行不行，把整个分母上来就放大行不行，比如说干嘛加个括号，是不是加个括号。

你不能在后面直接乘以二吧，我是让想让这个分母变大吧，那么你这个时候这个值应该是哪到哪了一。也是，你上来肯定就有一个拉力系数是零。看一下这里，那上来就会比较难了，看到没有，可是你肯定会拉回去。那么理解下有没有出来？项目就不就出来了吗？很简单嘛，就两个代码。是不是能不能理解，那这边怎么来，这边是哪个方向。这个方向的橡皮筋呢？这个方向下平定，不就拿这来决定的吗？去除以这个四口，我就把这段距离求出来，是不是就行了？这段距离怎么求？

结果怎么样呢？是这样的。好，问你这段距离怎么求是不可，可能会拉成这样，是不是就是求这段距离？这段距离怎么办？我问你这段距离能不能达到？这是什么距离？真的什么距离？我说最难，距离是全十的X。是不是？是个负责，OK，这段距离。最小的。是那个负值，它是不是也是个负值，问你这一段距离。跟这段距离是不是一样的？

这两个句是不一样的，有没有意义啊？这两句是不是一样的？那怎么求我要拿到这个正子吧，谁减谁。谁减谁？他们俩都是负责，这个是负责，这个也是负责，谁写谁。命令X减全3X嘛，那你拿的不就是个正值是不是就是拿到这段我叫O是不是这段距离。这一段我们抽出的举报。能不能理解，能不能过？可不可以过？可不可以过？首先这段距离重新再来一遍，看一下现在我们是不是就是要拿这段距离去算一个比例，现在我们的事情是不是就改成求这段距离了？好了，好，我们求这段题我们来看，好，首先看这是不是我们的思考。

是不是我说你慢慢拖，肯定有可能会拖成这样。突出一个空隙来吗？咱们现在就是要求什么。求这段空隙的据点。是吧，就是为了求这段距离。我叫他over。是不是就看这段距离怎么求，我问你这段距离。是不是我们这个滑平元素被划出来了多远，那滑平元素被划出来多远，不就是这个全是边吗。X吗？能理解，再来看这一段距离。好，走，你们来看这段距离啊，我问你啊，是不是我们元素能滑的一个最远距离。也是我们它划的一个能最小值。

最远距离嘛，负值嘛，那肯定是什么值上面它是不是最小的，可是是不是我们这个滑冰元素，它所能走的一个最远距离，是不是这个面积，它们俩面积X减掉全X拿到的是不是这个。哪个是不是这段距离，问你这段距离跟这段距离是不是正好是一样的。是不是就是头发？是不是，你看这边不是你划了一个最最远距离吗？你你拉出来的不就是什么。正好是这边干嘛空出来的。能不能理解啊，OK，好，这是怎么求，现在我们目标就换成了一个怎么去求O。等于什么？X。

因为我们在这边做过什么。判断。是不是他干嘛减去。选C的X，这是不是我们想的那个O的值啊，比例怎么大？CTRLC过来CTRLV干嘛？把这个全CX放在什么over。是不是最终全应该？不是还是一样吗？能不能理解啊，我们看一下这个对不对，说一下走，你这边有效没效果没毛病是吧，往后走。好好，我。我我拖到这是吧，走你看。有没有向你交过，有，而且他也不会，他也不会往回收。那两段项目效果是不是就做完了。

是不是我问你这个东西我们是不是两个1L1呃1F跟什么LC里面都有啊，这两行代码，这两行代码能不能注掉，然后写到外面来。好好思考一下，也就我在这边不写。我把他移出了，移到外面来行不行？行不行？比如说我把这个袜掉的吗。诶，我在话是么？在一个里面吗？他不是一个欲吗？行不行。想想不能这么办？你只有走进这个判断，才有下的效果。没这个判断，在我这个内部就是一个正常滑屏，滑多少它就应该走多少。只有滑出头了才干嘛。才会有这个有效距离要打折扣。才有这件事情。能明白啊说切记这个东西不能写在外面，必须在吗？是这两个音符判断里面，你写在外面想想是不是干嘛，只要你是在滑，你的滑屏的有效距离就在就在他这。

能不能理解啊，是不是只能在隐盘在里面啊，这个东西不能抽象抽出来懂不懂，因为很多学的好多同学很多看到一模样再把这个嘛，就想给他测出来，不是这样的，我们这两个if l它不是完全独立的，当初是不是还缺定段，零到明X这段距离是不需要干嘛。你来打折扣的，只有这两个逻辑需要你去打折扣，除非你是个if，那确实里面都对吧，收到外面来。能不能理解啊，好，大家看那是不是整个橡皮就出来了。是不是回去好包装？回去，什么时候回去？是吧，那咱们再来写一个N的逻辑是吧，CTRLC。

CTRL来个什么，他是不是他这你们应该怎么去计算。他现在怎么办？如果你是这样的回去吗？是把这个逻辑干嘛。真不来？CTC怎么改？Contra，干掉。干掉打开了。可是我得拿到这个全的X怎么拿，他称的时候怎么去拿全的X，你这个全的X怎么拿？去读谁啊，不就是你这个item吗？那个ul吗？他走的什么。一读不就出来了，是不是这你看一下来说一下。

CSS吧w.ctl好算一下。诶没回去看看为什么我们是不是改了去全没让他走啊，CTRLC最终是不是干嘛走一下。是不是什么逻辑都需要走，不是啊，当中是缺一段。能不能理解你下。回去加个过渡就了，给谁加过多。谁呀？艾特艾特有动吗？艾特点什么是掉要点全三形等于一秒给好，然后呢再来给它去掉。要不要清掉，肯定要清掉，平常话它的时候不需要什么。

过渡的这边干嘛着吗你。好，刷一下。回来。刷向回来是吧，想要这个拉力稍微干嘛小一点，这边不要乘以21.5就差不多了。说下你。差不多了吧，你看是不是还有一个快速花费没做。在这里回去。折叠回去，你看是不是只有这么短短几行代码就出来一个小效。能不能理解，可是逻辑上面是比较复杂的。能懂吗？可是翻译成代码就这么简单，能理解OK？