00:00
啊,那按照国际惯例,是不是咱们把那个什么,把之前讲的东西是吧,稍微的过一下啊OK。好啊,昨天妇女节过得怎么样?对零六好,看一下0.5,好,把这零五的东西咱们先过一过啊,这里面其实这零五这天还算比较难吧,是吧,OK,好,呃,不信好。等会儿我得要个麦,要麦今天得炸了,喂,OK啊,来看一下6.5。好,那这天的话,其实我们讲了一个很重要的概念啊,而且这天咱们对哪一个效果做了一个很强的优化,快速滑行以及我们的手动滑行吧,咱们是不是都去做了优化,那先回应一下我们第一版。
01:02
啊,就是我们第一次我们是不是在做第一版什么第一版这个手动橡皮筋效果吧,是不是这里面我们在我们的,我们说我们的逻辑有没有问题。没有任何问题,用代码再去翻译这个逻辑,或者说用代码去实现的过程当中的话,咱们是不是出了大问题,OK,什么大问题,我们说一定要明确这个DX啊,它到底代表什么。就给这个DX下一个精确的定义,它指代的是什么?是我手指每次滑动过程当中滑滑动的距离吗?不是,他应该说什么,这个DX是手指滑动还是元素滑动,你先把它搞清楚,肯定是手指的是是手指哪一个阶段的滑动距离,就是它是插上距到它是摁的,这整个过程当中,它所画动的一个距离是不是这的,我们说这DS干嘛一定要记住啊,它什么它切到到什么到K o3,它其实N的懂吧,整个我们说写事件的时候,这边是不是可以。
02:23
小写的,这是比较奇怪,一般都是图功密吧,是OK,是整个过程中的吗?整个过程中手指滑动的距离,是不是我们说这个距离,你做一般的拖拽效果,做滑动的效果有没有问题?没有问题,做什么效果就会有问题了。橡皮筋跟快速滑屏,你不能拿什么DX,因为我们一开始没有做这个快速滑皮收口吧,所以说我们在做橡皮筋手动橡皮效果时候,咱们是不大这个点点S啊是不是,其实我们说我们是不是说做橡皮筋效果一个原理是什么手都那么小。
03:12
手动下面做个原理不就是吗?减小什么?减小每次手指移动的有效距离。咱们说的这个手指移动的。指的是什么?指的是银色,它是木的一个过程嘛,是不是说银色三他七木个嘛,手指滑动的距离。是不是在哪OK,可是我们说我们之前在做的时候是直接拿什么DXX吧,是吧,那大想在拿那个dix的时候的话,我们我们改变了,是不是你整个过程手指化这的距离啊,我说那个比例肯定是没问题的。
04:06
是吧,只不过咱们这个对象搞错了,虽然说我们能不能实现差不多的效果,那可是这个过程是极其不细腻的,对你以后这个这个应用的扩展,或者说这个橡皮效果的扩展的话,也是不太友好的,因为跟我们的思路完全不一样嘛。是不是好,所以说这边我们应该去拿什么什么Dis吧,这个字我们怎么拿的,是last point减什么?哦,是no,是no point减什么last point。OK,只能point减掉last point是不是OK?在这个过程当中,我们一定要注意啊,这个last point跟之间同步问题吧。是吧,每次在他是木的什么?在to他题目是什么?最后一定要记住干嘛同步那判给谁?
05:16
给拉的。你要是不同步的话,这个拉永远是第一次的,我是要拿要我是要拿到你每一段的间隔吧,啊所以说这啊这个得注意一下,好,那也就是说什么,那我问大家,那现在在减少每啊在做这个手动下面窗口的时候,咱们是不是可以直接拿point DS了。拿这个碰的DS过程当中,我们踩了一个小坑,我们说如果你拿D,如果你拿这个DX做相平效果的话,你是。以什么为基准的?Element是不是?是不是以element X为基准呢?这个element X。
06:02
是一个什么纸?是每次手指什么,他70大的时候元素的位置。是不是这这几个东西能不能搞懂。能不能到应该问题不大吧,OK,那我们再来看,OK,那我们说如果你用D去做的话,大小你还能以MX为基准吗?你应该以他的上一次位置为基准吗?是吧,上一次什么呢?上一次位置为基准是吧,怎么去拿上一次的位置。啊,其实我们说这个时候你做相比效果的时候的话,你是不要给它去加一个值啊,只不过这个值的有效距离一直在变小,这个上一次的位置我们完全可以通过什么。
07:05
要实施为准是吧,其实就是应该以什么。事实位置为基础。是吧,是这位置怎么拿点CSS函数嘛去拿吗?是不是啊,这个坑得记住这个坑咱们咱们在开发时是不是踩了啊,有什么最终什么,最终咱们用这个point DS去重写了一下,手机上比交光好OK好,这是一个点好好那做完这个手动橡皮效果,咱们做了什么。快速好,快速滑屏,快速滑屏的逻辑是什么样的?拿到什么?拿到手指懂吗?他切。
08:02
的时的什么速度?是不是OK干嘛?根据这个数据什么也速度为基准值干嘛?为什么目标位置懂吗?以速度为基准,这个嘛。延长。延长目标位置吧。是不是啊,你这个速度越大,我这个目标位置越远的,你这个速度越小,我这个目标位置越近的。是不的,我们不是说我们什么,我们说咱们不是要求一个什么,他给X吗?它不是等于什么lat X叫什么去乘以什么一个系数呗,这个系数你自己去定呗。
09:08
是不是,那最终是不是咱们只要求这个速度,是不是这个速度怎么求。咋求,我们说这个速度,其实求的是什么?求的就是最后一次什么,咱们说是不是最后一次。他切木偶过程中的什么平均速度?平均平平均是。是的呢,这个速度什么,拿的是什么,拿的是这个。碰什么D比上什么他什么DS吧,是不是OK,这两个值的求法的话,应该跟这个这个逻辑是一样的吧。
10:06
那么讲这样的话,咱们是不是拿到速度了,而且这个速度的正负代表什么方向,速度的正负。正负代表方向。OK,那其实这么一做的话,像呃那个快速滑冰效果就出来了是吧,其实单独的去做的这两个东西应该不难。是吧,问题是我们干嘛,我们说快速快速滑屏的什么橡皮筋效果咱们怎么实现呢?快速滑冰的橡皮效果咱们怎么实现呢?就是我们的贝。是不是咱们是不是完全用这个贝色啊曲线来实现这快速完消面效果,然后呢,做完这个下面效果之后干嘛,咱们就说么快速滑冰橡皮筋效果和手动橡皮筋效果的冲突,好这个冲突是什么样的,我问你。
11:18
快速滑屏跟问你快速滑屏跟手动下屏效果的冲动的话,主要是你在手动去滑这个橡皮筋效果的时候,他身上有个快速滑屏就是这个动作,你快速滑屏的时候跟他有关系吗?没有就是你在什么手动滑那个橡皮筋效果的时候的话,其实你触发了快速滑屏是不是咱们要做的是什么。赞,手动橡皮筋。效果干嘛触发时。不干嘛不开启快速。
12:03
是不是就可以了,这能不能理解,那这不是,这就是我们干嘛,我们前天上午咱咱们做这些东西吧。那么讲这个可以过吧,OK,那这边的话我带大家去看一下啊,因为有有同学问了,我觉得很多同学可能还没发现啊,比如说什么。好。诶,又不顶了,很好。OK,那其实大家有没有,大家有没有想过这样的问题啊,就是。我们如果没有解决这个冲突的时候,是不是那个。呃,手动下面效果是往里走一走,然后再出来了是吧,也就是说大家对这个背侧啊,到底有没有理解清楚,来看一下在没有解决这个冲突的时候,到底是一个什么样的状况,我们来看一下零四。临时搭在咱们在这是做出的时候的话,咱们有没有解决它的冲断,没有吧,是吧,而且这个橡皮手手动橡皮效果是不是已经优化过的,我来看一下这里。
13:05
好。来,我来说一下,大大好,如果现在我们不看手中下面效果,问你,我现在这样滑。OK,这个被色曲线是找什么样的,是不是这样的,是超超过目标点在回来的,是不问你刚刚我这种滑动的过程,这个ul的位置,咱咱们是不是还是操作里面这个什么ul一个全的X值啊,这个全X值是从哪一个值到哪一个值。我这好。是不是这个U的位置从零到什么?明天这明天肯定是个负责,是不是问你,那现在我比如说我是从零到200。是吧,按照我们刚刚这种被子曲线,我问你它是不是要负的更厉害。
14:00
要付的更厉害吧,可能要付到后吧,然后再回到地吧。是不的,这才是符合我这个位置吧,来看一下,我一走,你看他是不更好。你看你到这边的话,你这个留白拉出来了,说明你这U位置是干嘛更过去的一点,那是的更厉害了,能没讲那再来看。好,那如果是这样的话呢。这样的话是从这个负值回到零啊。是不是,那我说你要超速的话,你是不是要比零大一点,然后再回到零啊是吧,那你看哎,我一走,你看是不是比零大一点,再回到零。这个可以理解,OK,那再来看好这两个没问题吧,这是快速发明的被效果吧,好就你那再看我在这边好的时候触发了什么效果,手动的效果,是不是手动效果,现在我拉出留白来了,说明这个U是个政治。
15:04
是不是,然后我一松手他,我一送他,我一松手,他身上有没有被罩。有吗?因为我没有处理他们俩的冲突吗?也就说我这个被上会影响到我这个手动吗?那我一搜大看他就往里走一走,为什么往里走一走,你看我一开始拉出来差不多是个正子吧,他是往你这个方向走。往零这个发走的话,是不是减小的过程,那你是不是要减,减少的更厉害,你肯定减到负50再回来了。是不是啊,所以说你看它是不是往里走一走。然后再出来能理解吗?所以说是不是跟这个值的变化有关系啊,我们说你这个超出,超出是越来越大的意思吗。不是吧,是你越来越严重吧,是不是从到你这个,你到这个目标点干嘛,就按照你那个去数,如果是减小的,那就应该减少的更多。
16:01
如果这个只是变大的,那就应该变大的更多。是不是更加厉害的意思啊,能理解啊,你单独不不能单独把它就认为是个正子吧,啊,这个概念是错的,能理解吗?啊,所以说我们在这边会看到什么这种奇怪效果,说这种效果的话,你如果不想处理的话,肯定感觉这个体验是不是还稍微好一点,那随意一点啊,你你想处理就处理,不想处理就在这放着呗。是吧,那咱们最终处理完了,是不是干嘛就比较干净呢。就是没有超速路段。OK。那你看我拖的时候咱们是比较干净的。让他慢慢回去了,没有发生一个抖动嘛,是吧,如果你想让它有个抖动的话,你就不要处理是吧,OK,好,那这是我们啊要跟大家去讲的好OK,那其实在这一块的话,其实我们怎么还有两个段。哎。啊,不知道大家记不记这两吧,第一个什么就是就是两个比较严重的一个bug,就是说干嘛第一个如果不处理什么不去处理这个。
17:15
什么DS po吗?是吧,如果他们等于零的话,我们会产产生一个什么后果?你一点的时候他干,你一点的时候他干嘛,你你上你首先上来点一下,然后再拖,你发现你干嘛拖不动的是吧,因为你最终这个位移都是NN嘛。是不是我们干嘛,如果你不处不处理这个什么,懂吗。首次点击后,首次点击导航后懂吗?啊滑屏效果就干嘛,滑屏效果会失效,滑屏会失效是不是咱们处理的方案是什么样的。
18:06
给的应该是是不是T吧,是吧,是time,我们给了多少?我们是拿Dis point除以这个time嘛,是吧,首次点击失效的话,就是因为你这个为零嘛,是吧,咱们咱们怎么去表是把这个变成一样。是不是,那是不是咱们还处理什么。咱说我们说么,速度有残留的话,其实你划过一次之后,你再点的话是还在是吧,我说么,怎么解决速度的残留啊,速度的残留,那咱们在这速度残留的话,就是把这个意思吗?也是的变成了零八,而且在每一次什么。
19:01
每次碳上是干嘛重置吧,OK,在每次他切是大十干嘛重置啊,是块是吧,为了就是在你没有经过它去布这一层的话,这个值会干嘛会给你清掉。那么你讲OK,那整个其实像整个导航身上的东西应该是比较难的是吧,不要以我们的无缝画屏,可能比无缝花屏的逻辑还要复杂一点,是不是OK好,那最终咱们是不是把这个导航跟无花屏干嘛生成了两个啊组件是吧?OK好,那其实前天讲的还有很重要什么就做防抖洞,OK,那大家防抖洞这个逻辑啊,我们都做一些什么处理?啊,其实你有了思路之后的话,就应该有一个套路,对吧,首先一定有两个变量,你是。
20:07
是不是啊,通过这两个判断,这两个变量,我们做我们做一些什么事情,判断判断用户的首次操作是不是OK,如果是X话题干嘛无缝花屏。啊,不管用户以后怎么操作,OK,华屏逻辑永远都会被触发,是不是如果是外轴呢?不管用户怎么操作,花屏逻辑永远都不会被厨房。是不是通过这两个边程来。
21:00
控制了吧,总共有几个地方需要我们去做处理,总也发的话,总共有几个地方需要我们处理,其实我们步骤分了好几步呢,分了两步,第一个什么怎么防止首次抖动,那还呢,怎么防止什么。二次什么,后续的多多吗?好,其实后后续走的房子,大家应该记得在什么在他切木什么一上来什么。一上来19干嘛?就进行判断。就对什么,就对用户干嘛,用户首次操作的方向干嘛进行判断,是是如果是X轴的话,你就要做X逻辑,如果是Y轴话,就做Y轴逻辑板是吧,其实我们在什么,如果是外轴话就干嘛。
22:11
直接什么特结,结束当事人回掉的所有逻辑吧,是吧,OK,那主要是这个首次抖动咱们是怎么去保持的?第一,我们在这边干嘛,确定了。干嘛用户首次操作的方向。是吧,怎么去确保这个手势的是不是这个也是发能进来就干嘛也发他进入逻辑就干嘛变为first,直到什么时候给他智慧了。下一次他知道的时候是不是OK。直到。
23:00
上一次干嘛?他切四大的时候。干嘛不问?是吧,这是不是我们去干嘛做了首次啊?是不是,然后如果是外的,那你也应该干嘛,就称不是外的,让他去走下面的逻辑。这是不是我们首次防多方,这是我们后后续防止多的逻辑吧,是吧,因为你这个旅程只能走到一次,首次上来嘛,之后还能进入那个判断吗?进入不了了,因为你用也是发射进行一次控制嘛。是不是的。能不能理解,OK,这个防抖洞今天我们还得想啊,因为基本上所有的区域,除了这个导航,因为比较矮嘛,不做防抖洞嘛,其他所有的滑雪逻辑咱们都要做防抖洞,而且今天我们会写出啊。
24:03
我们会写一套完整的滑题逻辑,因为之前咱们写滑题逻辑只考虑啊一个方向是吧,今天我们用对象的形程我去写啊,把它写成什么一套完整的,OK,好,那这是我们啊前面讲的东西啊,呃,个人感觉那一天讲的东西还是比较难的啊,需要好好的去消化一下。
我来说两句