00:00
OK啊,那昨天的话,我们做了一下这个无缝的花瓶吧,啊,前天是吧,前天做一下,那按照我们的惯例啊,我们要稍微的看一看。OK啊,等零三我们每天都会有一个复习啊,OK,那项目这块的复习的话,我们可能更多的是来复习一些逻辑,或者说是一些坑啊,对不对对零散,好想想我们在对零散的时候的话,我们做了些什么。啊,其实我们就干一件事情嘛,无缝花屏吗?是不是啊,那无缝还没实现的话,我们分成几个步骤。回一下几个步骤,第一个肯定是布局啊,布局这块比较重要的是哪两个概念?你。一个是布局的啊,我们从布局这块角度出发,第一个布局很动态,首先你上面应该要知道两个概念,一个是爆火器,一个是花屏元素。
01:01
是不是我们说我们一般黄面的设计不都一个包裹期吗?包裹期里面是个画面元素吗?好,这种设计给他记住能不能讲OK,好来看一下,那第一个布局这块,我们一个什么布局的,包括期好那这个包裹器我们说应该占满了我们整个视的宽度啊。是不是好。其次我们有个什么。有什么华平元素是不第三个,我们整个华平元素,我们基本上说一开始。是不是这个动态生成的话,其实就是什么,根据你的什么。根据你图片的数量,我们去动态生成这个画面元素吧,其实就是里面每个L嘛,里面都是一些什么链接图片嘛。杨没讲,那这是我们布局这一块,我们需要什么注意的事情,是不是那布局这块需要大家去注意一个什么点啊。
02:03
注意什么点第一个坑。嘛是不你得干嘛,你得知道这个我在什么时候去调用。因为他那是个静态列表吗?懂吗?啊还有什么。我们说可能干嘛有吃什么。有时绘制跟不上。跟不上GS啊,引擎的什么渲染是不是这个时候的话,可能在布局上面的话,你拿一些信息会出问题的,特别是什么,特别是关于尺寸跟位置的信息,那很有可能就拿不到,这个时候你尽量的让什么,让整个获取的过程干嘛,稍微的。延迟一点那讲,那这是我们布局这块需要大的嘛,去注意的啊,那怎么解决。
03:06
啊,电视器是不是我们说我们在拿我三的时候是出问题了,因为我们在拿的时候整个引擎还没啊,整个什么绘制是不是还没做完啊,所以说这个数据是不是就没有啊,我们是不让他延迟了啊,50毫秒啊,这个得注意一下啊,这个经常我们在中会遇到,好,那讲完这个布局之后,我们我们做什么最基本的一套,什么最最基本的话题,那来讲这个这个最基本的话,这个这个你们需要注意注意一个思路就行了,就是你用代码,你从你用代码干嘛,把这个思路给它翻译出来就行了,我们说这个思路什么样的,拿到什么拿到元素和。手指什么一开始的位置。好,这个一开始他代表什么。
04:03
这个什么是不是手干嘛,点到什么点击到不觉,包括去上。是不是你要知道现在我们的世界是不是只要再给这个布局包裹去就行了,因为你手指再怎么划,你也不会划出这个布局包裹器,因为整个布局中包裹去再买一瓶的嘛,有没讲啊,OK,拿到手指跟元素一开始的位置是第一步,然后呢?拿到元素实时的位置。是不是拿到实时位置之后,其实我们就知道了什么,不管在哪一个时间点,我们都知道了你手指滑了多远多远,因为你有一个一开始的位置。是不是只要你不重新触发他知道,那我是不是一直认你这个他知道的一开始会。
05:00
因为你他切步的时候,你可能不会抬起手指吗?只要你在那移,那我认的是不是都是你第一次拍出它的那个位置啊。你移动多远吗?当你手指抬起来了,是不是就来第二次他知道的一个什么初始位置了,这个是你在滑吗?也就是么,我们他知道他积木,他摁的是一套逻辑吧。等到比如说这样,我点上去,那问你这个点是不是就是我一开始道,那我点上去是不是有可能手指不会松。不会抬起来的,我一直在这边摸摸摸摸干嘛,那有有那有可能你干嘛,你手指移动的位置,那就是零。是不是,那我整个元素就不会跑了,不管你手指怎么划,最终只要你没有抬起来,那我问你,我拿的这个点的距离,到它那个距离是不是都是参照一,我第一次他知道的。那可能他是木的,这个过程当中的话,这个实施位置一直在变码,那不管吗。等到可是问你,你在他心目中实时位置在变的话,我这个元素要不要跟着一起跑。
06:06
需要那些宝宝,所以说这个元素它的一个位移,我们是应该在他积木里面去设置的。你不能放到它摁里面吗?因为我需要你这个元素实时跟着我手指跑的,至于最终你跑多少,你看你抬起来的时候,你手指跟你一开始的位置干嘛,到底距离多远吗?这个能不解啊,这是我们滑最基本的一个套路啊,OK,好,那拿到元素的实时位置,那在这个时候干嘛再去干嘛。再去计算。手指是吧,实时的拼了。是不是最终呢,将偏移量干嘛。干嘛实时的同步给谁同步给谁,不给花瓶元素吗?
07:04
是不是在同步给滑平元素的时候,你得不得去拿一下它,它是上是一个位置。因为你可能这么滑的,只要你上来啊,你轻轻划一次,他是不是划过来了。是吧,这问你是不是他其实大他欺负他的完整的一条逻辑。是不是在的,那么你下一次你干嘛,是不是又要开始他上去了,他期末他是的,那么你元素是不是就。过来了,可是问你他其他的时候,这个初始位置就已经变了,一开始第一次他其他的初始位置吧,那这不是第二次他他位置吗?说每次在他时候,是不是你要把元素的处置位置得拿一下。懂吗?你不能老是参在这个位置。懂不懂啊,这整个过程我们都是事件驱动的,能不理解OK啊,那这是最基本的一套话题,好,那我说第三个点好,我们在做最基本的花瓶时候的话,我们实现了几百。
08:08
两百一百是什么定位版,还有呢,2D变换版是不是,为什么我们说最终我们要选取2D变化大。是二级变换版不会触发会吗?是吗?不是,是2D变换的时候触发的这个存会出它的影响面最小,因为它有单独的是吗?单独的图层是不是这概念啊,那定位的时候的话,是是不是在整个,虽然说你不在文档楼里面了,还好是吧,可是是不是有很多定位元素的,那这个重会崇拜的时候的话,这个代价其实还是蛮高的。那们讲以后我们讲性能优化的时候,我们可以把它这个时间精确到毫秒,我们会看到这个过程能不讲,就这时候需要你们先去理解,先去知道它有这么东西存在,那具体这个现象怎么去看,我们写完项目之后啊,我们会用的一些调试工具会带你们去看。
09:16
这这个里面讲,而且之后你们会知道这个图层不能绕开。因为图层开的很多的话,你你会适得其反。懂不懂,因为图层的创建跟销毁的话,它也是需要消耗性能的,所以说我们要取一个适中的量,懂不懂不是说图层这个东西好,那我们什么东西都做图层。那我们就没有没有必要学啊。定位了吗?你们讲这个图层是不能乱开的啊,你要有一个度啊,啊这个我们得什么,这个以后我们再来聊啊,那定位版的时候有一个很重要的东西,其实大家之前的话可能都没有去重视到它,就是这个吧。偶下茶rap茶它是一个什么过程?它是一个累加的过程。
10:07
能能讲,因为他能拿到你上一次出的语出了多久吗?是不是始终都是在这个里面能不讲,可是我问你,你每次去调整他的的时候,调整他拼音量的时候,参照的是你上一次啊。移动到了那个位置吧。不是吧?我们说of the left of left永远都是相当于什么。Of parent吗?是不是啊,所以说其实我们每次在拖动的过程当中,你那个参照物一直都是开,是不是,只不过你每次在滑动的时候,我们要去改那个那个滑冰元素点要点吗。这个left的值一直都是一个累加的过程,怎么累加的,怎么记住上一次left的值呢?通过的是o left。
11:01
是不是这样的,能不能回起来,OK,那我们说2D变换的时候就出问题了。就是什么问题,我们没有一个角色像left一样去实时记住我们2D变化的一个量是不是我们整的几种方案,两种方案第一种我们拿什么变量,变量变量它有什么缺陷?变量它有什么曲线?是不是每次只能管一个数据啊?哎,那同说我给这个变量干嘛复制成一个对象,那我也可以管多个数据啊,可是你用变量去管的话,想想你的业务逻辑是不是会极其复杂?会使我的业务逻辑变得干嘛很复杂,为什么我每次再去同步这个变量的时候干嘛,我每次在动作这个变化值的时候,我每次都要去考虑这个北大码。是不是,那你说这太不友好了。
12:01
是不是啊,OK,那怎么办?我们干嘛,我们定义了什么CS啊,函数是不是,其实这个现函数它算不上是一个组件,它只能算是一个工具类,我们最终定义完了那个无缝滑屏,整个风滑屏它就能算的上是一个组件。这能不能理解啊,OK,那这样我们再定义这个C代函数,哎,这一边就比较重要了,好大想想我们的思路是什么样的。首先我们说你得有容器去管理的数据,我变外是不很多类型的,是不是我们说干嘛。我们搞了一个对象,而且这个对象我们没有把它做成变量,这个对象他能做成变量吗?这个对象它能不能做成一个变量?这对象能不能做成一个变量,就在我那个C函数里面,我去挂一个变量行不行?
13:04
行吗?就是我在这个里面,大家看我现在是有个全上,我在这边干嘛,我不是通过什么那的身上的一个属性的,我通一个变量放在里面,大家想行不行。能不能实现?能实现,我放一个变量在里面,其实也没太大问题,可是我们说大家想我这些信息现在我放在一个节点身上,我问你在这个作用以外,我能不能拿到这些信息。能不能通过这个节点,不是通过这个节点吗?你对于新我节的一个属性呢,那我在我的业务逻辑里面,我在业务逻辑里面是不是可以实时的去拿到这些信息。是吧,因为你是我的属性嘛,跟着我这个节点跑的嘛。是不是啊,如果是变量你能拿到吗?拿不到,可是如果你是个变量的话,会不会影响我们现在的这个。
14:06
落脚。也不会,因为我们没有在外部去哪一个节点,我们没有这么做啊,我们说去哪里这个节点他身上有什么T劝。哎吗,是不是。全是嘛,是吧,我们是不是没有,我们是不是没有这么去干,可是我如果这么去写,会不会有直出来。会不会有值出来,我们来看一下,肯定肯定是会有值的吧,来看一下F22。摔吧,你看现在是不是空的,哎,然后走完,你看每次是不是这个里面都是有知道这些信息是不是就绑给了这个节点啊,你如果拿个变量的。哪个变量呢?拿个变量你在外部就拿不到这些信息,因为你在这边去画一个变量的话,只在这个里面有效,你出了这作为这个变量就是干嘛找不到了,懂不懂,而所以说我们可能操作属性来的更方便。
15:10
能理解吗?现在能不能体会到属性跟变量的一个区别?应该体会到了吧。属性应该更友好。是不是这里好,那我们再来看好,那讲完这个东西之后,我们干嘛?我们说定函数,我们通过什么,这个节点的一个属性来什么,通过节点的属性来管理什么。变换类型以及什么它说什么对应的值。等到那这个函数,我们最终给他实现什么样两个参数干嘛?两个参数代表什么?读取操作,三个参数呢,设置操作。
16:04
是不是在的,OK,那这里面有一些什么样的细节,我说两个参数使用是会废掉一个参数的,那个参数能不能对我利用一下,我说能,能省则省,是不是写组件,是写工具,工具类的时候一定要什么,一定要这种思想,那三个参数的时候,哎,我们说里面我们是根据什么来进行设置的。根据什么设置的时候,我们根据什么去分的。单位。因为有些单位是PX,有些单位是第1G,有些是没有单位的,我们是不是根据单位不一样给它们分为别类了是吧,而且还有当中很重要的一点,我一定要去循环什么,循环什么这个节点属性。是不是因为这节点首先是个对象嘛,而且每次循环的时候,我们找到你所对应的那个变换类型的时候,去拿这个变换类型所对应的值的时候,一定要从这个对象里面去拿。
17:09
你不从这个对象里面去拿一个嘛,是不准的,你拿那个value就是错的,能不讲这是一个坑,能注意吗?那整个CSS函数的定义。其实应该是比较难的啊,如果你能跟着思路写出来的话,我觉得就已经不错了。懂吗?好,那定完这个三函数时候,咱们是不完成了我们的二级方法。是吧,那以后再去我们写业务逻辑的时候,是不是只关注这个S这个了。人们讲OK,好,做好,后来我们做了什么?啊,几个逻辑。后来不知吗?无缝自动,自动花屏不就这两个逻辑吗?是不是啊,OK,那想想在做这个无缝跟自动滑屏的时候啊,其实这边我还需要跟大家去提一个点吧,就是我们在做这个定位板的时候,我们做过两个抽象。
18:06
记不记得一个是抽象什么图片的下标是一个抽象的是什么U的位置?这是两种截然不同的思路。啊,我需要你全部掌握它啊,然后做无缝跟自动滑冰的时候,我们说无缝咱们怎么做的。我怎么做的?复制一组图片,是不是当什么点击?第一组第一张时干嘛?瞬间瞬间跳到什么,跳到第二组的第一张是吧,然后呢,当点击什么第二组的最后一张是。
19:06
当点击第二种。最后一张时你要干嘛?瞬间跳到第一组的最后一张。是吧,我们这逻辑这里面你要注意,有时候可能这个过度触发不了。过度触发不了,有很多情况,元素没有渲染完,变换的类型不统一,既已经跑太快,这个过度干嘛被重置了是吧?说GS代码很复杂的时候,你一定要有自己的独立思考的能力。是不是最好的方式就是打断点?能理解好,那还是那个问题,要搞清楚同步跟异步的一个执行状态,什么时候是同步的代码,什么时候异步的代码。是不是啊,OK,然后呢,自动滑屏。
20:03
那自动画面就好多了,就干嘛通过什么定时器,是不是通过循环定时器好,我们说循环定时器在写效果的时候,你也得注意干嘛上来就干第一函数包括。是不是第一函数包裹,第二上来干嘛?请清楚行函数包裹不得干嘛?重启定时器,函数包裹就是为了重启定时器,是不是天公是什么轻定时器呢?第一个让干嘛,暂停。逻辑吧,是不是,可是一般在这个函数内部的第一部就应干嘛清洁日期吧,这个是因为什么?因为模式干嘛循环循环定时器的逻辑干吗,没有必要干吗。
21:11
开启多少?是吧,没有必要同一时刻开启多次嘛,都已经循环了吗?那没讲你开启多次是干嘛,照样是还是个循环吗?那你开多个也干嘛也没用。怎么讲,那最终我们要解决什么?解决自动滑屏跟什么。和。无缝的冲突。是的,这边其实解决冲突及其简单,因为你们都使用变量。是不是使用同一个可以说是index变量就可以是吧,是这有这跟我们做PC项目的时候它是有区别的,PC项目是因为不是变量没没没法同步,因为PC项目时话,我们是不是有一个什么this.in的问题啊,能不讲我们是一个属性跟变量在一起嘛,所以你没有办法打过能没讲啊,那其实在我们这边它比较简单的。
22:18
懂吗?好,那个这一块是咱们昨天一天的啊,前天一天的东西啊,那这个东西呃,思路上面应该不怎么难啊,啊,因为咱们已经做过这个PC项目了,是不是主要你是看移动端的写法跟PC是很不一样的,是不是OK。
我来说两句