00:00
重点来看交互。交了上来。我看先把最外边的这个东西是不是写好。啊,写好写好了以后我们来分享交互。交互的时候,你需要看需要哪些条件。什么时候?我才会有交互的动作,是不是在用户在手指在上下左右滑动的时候啊,也就第一点,我们需要一个滑动视线。再我问一下大家,就我当前这个页面,我向上滑和向下滑它出来的页面一样吗?就我不管向哪边跑,他是不是要出去了,马上进场的页面一样吗?你比如说我向上滑是不是进场是这个黄颜色的,然后我如果说这个页面我向下滑是不是进场是进的。那这个是根据什么来确定谁来谁来进场?
01:00
滑动的方向,我刚才已经说了,我向下滑,向下滑方向不一样,它进场的页面是不一样,那其实我们就是根据啊进来的滑动的方向来确定谁来进场。这是我们第二个要准备的,要分析的,再有一个就是说,在我手指滑动的时候,我必须得知道当前是哪个页面。怎么知道我们其实有坐标?待会儿我们要动态的去计算出来我是哪个页面,否则的话,你根本不知道下一个谁来出场。你只有根据你的坐标是不是能够计算出来当前这个页面对应的这个类啊,根据这个类我是不是能找到对应的页面。大家能懂我的意思吗?你得知道这是谁,然后紧接着他下边谁跟出来。啊,那知道了这些以后,我们就开始。上完第一步,我先去定义,哎,一个滑动的功能函数。
02:07
为什么说我上来就定义一个函数呢?我定义这个函数专门为了滑动作用的时候做准备,之前有没有给大家提到过一个叫函数化分钟?就是你以后在开发的时候,你写一个功能点的时候,你要养成一个习惯,上来先去定一个函数。定义函数的目的,首先我最终可以实现复用,这是最好的。如果说不复用的话,也有一个好处是方便你维护管理,而且这个功能点明确。啊,来给它起一个名字。就叫做目录配置吧,滑动页面,移动页面。那么这个函数有了我,你第一个函数,我说了滑动的功能函数,也就是说当我手指滑动的时候,我必然会调用这个函数,让它去报在页面上什么发挥作用啊。那然后我手指一滑动,我们刚刚又确定一个东西,我得确定你手指滑动的方向,你是向上还是向下。
03:07
那这个时候我是不是得计算出来这个方向。根据你手指滑动。那我可以这样去做。初始化数据在这大家看到啊,呃,第二啊,Decoration这个单词是方向的意思,我先初始化一个,哎对象,这个对象里边呢,你随便写上。右。然后来个大的吧,表示下三。然后再来一个还有什么。Left,我是不是初始化的对象里面有四个K对应的value,分别1234,就是来标识一下方向。大家不要纠结这为什么写1234,其实我写什么都无所谓。对不对,就是初始化一个数据而已,那当用户去调用这个函数的时候,你比如说我手指向上滑动,我给他传一个方向继续,比如说就把这个传进去,那我函数内部是不是就知道了,它是向上滑动呀。
04:11
懂我的意思吗?到时候这个函数要传时差,那么你可以先给他声明一个行参。到时候一定要用,我比如说向上网,我点up是不传进来,传进来以后里边要干什么。你是不是得去判断它传进来是上下还是左右啊。这我可以说是是他匹配方向。这个方法大家用过没有?Switch Switch是不是就可以进行匹配,匹配谁啊,匹配你用用户传进来的它。对不对。至于说里面怎么写,是不是用它那用户传进来的,比如说他传进来是decoration.up那我就让他到这。
05:00
这样的话不就相当于我知道它是向上吗?对不对啊,其他的一样往下写。关键是我知道了,用户向上滑了,我接下来要干嘛?咱们上来是不是分装了,已经写了四个方向的动画类了。那当这些页面它能动作的时候,说白了就是把对应的动画类加到对应的页面上,这个页面就开始走了,就好像我们刚开始给这些图片加动画类是一样的。所以我们应该确定一个出场页面的动画类,还有一个马上要进场页面的。动画类。能懂我的意思吗?你比如说就拿第一个页面来说,我向上马上一滑,哎,刚刚那个页面是不是还在往出走。走的时候是凭什么,是因为它上面有那个动画类,肯定叫Mo to。Top,它是不是才能往上走。同理,这个页面是不是从下面一直往往里面走啊,那是因为它有一个动画,那叫摸,From bottom。
06:09
到这儿大家能不能懂?行,那这样的话看着啊。我在这个函数内部,我去初始化。两个动画类。来一个in class。哎,为空这初始化你为什么都行,这表示的是哎。进场的动画类,那同理还有一个out,我用out来表示out class他也没空,这个表示的是。出场的动画类,这个大家能懂吗?现在维护,那么我知道方向了,我是吧,就知道了对应出场的动画类为什么。能理解吗?你方向是不是向上,那出厂的页面我对应要加的动画类,其实我们肯定能确定下来了,叫PG-P点,这是不是我们的命名规范,后边这应该写是move to top。
07:16
这个动画类我们刚写完了,没问题吧,接下来还有一个,你有出的就有进的,进场的是PPT。杠杠move,然后from哎头。匹配完这两个动画类,也说你用Switch的时候一定不要忘了一个东西,Break。什么退出这个循环?那接下来我们再来给大家复制一会上游呢,我们再来一个上右,哎哎竖值针这样上右边的话,这应该是出厂是去哪。你向手指向右滑,我的页面是不是要往右走?所以这是不是right?
08:00
你往右走了,左边是不是要有个页面要顶进来。这不就left吗?这两个能理解了,接下来还有两个,其实就简单了。这应该是当注意这儿不能随便乱写,是因为你最终是不是要和这个去匹配。必须和他一样,哎,那这个时候down的这儿就是move to。当然了,我在这表示的是下,所以这应该是bottle。From top最后一个。Left。好诶,Left left这的话就是想法吗?整一个left在这。来一个。Right。没问题吧?现在我的动画类也有了,哎,方向也知道了,然后我们让大家思考的话,你接下来要干嘛?
09:01
你动画类有了,你是不是只需要加到对应的页面上,它就可以去动作了,就好像我们刚刚写的步骤一样,咱们是不是先把这些动画类先去定义完,定义完然后我们接下来是不是加到对应的图片上,只要图片一加载,这个图片动画就开始了,一样的道理,所以我们现在是不是就差一个要参与动画的页面了?能懂吗?那这个时候我在这。哎,初始化。参与动画的页面其实只有两个,参与动画一出一进。同时参与的话呢,只有两个能懂吗。玩一个,比如说我这儿来一个叫last背景。我先放在这儿,还有一个Y一个哎,No page。没空。那这个里面怎么写呢?我怎么确定是哪个页面,这个时候你得根据页面里边人家自己唯一的标识来决定是不是就是这个类。
10:08
这是不是就标识我们每一个页面的。这大家能跟得上吗?好,它标识的,那这样的话我问一下大家,我们上来起的叫配置杠几杠几,我能这样直接这样写死吗。如果说写死的话,每次参与动画呢,都是第一个页面。而你通过我写好这个,你也能发现,我有时候根本就没有第一个页面了。所以这是不是不能写死,但是前边这个配件我能写死。命名规范嘛,因为它是个类目,先给它加一个点,待会告诉大家为给啥加。然后后边的坐标你是不是得动态的去计算出来。能理解吗?那这个时候。看着啊。我在这儿再去初始化一个东西。初始化按两个坐标。
11:05
五一个就是no的一个对象。No是什么意思?No表示是当前的意思,当前的意思Co是纵向坐标,肉是横向坐标,都为一当前,你想一下你拿到项目的话,你这哎,就拿这个来说,一刷新,我是不是拿到的是第一个页面。第一个页面的坐标是什么?K杠一杠一吧,那它的横向纵纵向是不是正好是一。我再去玩一个last。表示肉。如果说我们加载出来这是当前页面,那我刚刚的last就表示说,如果说有滑动,它之前是不是应该有上一个页面。但是现在还没有吗?
12:02
是不是没有这个页面。你想它已经是第一个了,也是在他头顶上没有,那所以我在这统一的没有这个页面把坐标都给它设为零。大家不要去纠结这为什么设为零,我先告诉你,这个只是一个初始化,接下来我们通过上来第一个页面的坐标可以算出来。这个没多少了。那知道了这个no坐标,大家看看我这这个no,我这应该怎么去定义这个动画类。配角杠杠,后边你是不是得拼串?No点扣这是不是纵向坐标还少一个东西。不要忘了他。再加一个弄点肉,这是不是拼起来就是第一个页面的坐标类啊。那这个大家应该也会了,加一个哎,Last点扣,然后再去拼一个杠,再来一个拉点。
13:12
肉。注意我现在初始化的这两个页面,这不是no表示当前的吗?Last是上一个,哎,既然你有上一个,也就是说明了这两个页面针对的是滑动之后的初始化变量。对不对,我们什么时候有上一个比方,就拿这个来说话,他华完,哎,我们看到这是不是当前页。刚刚滑滑出去那个什么,上一个页面。好。现在和大家说一下,我刚刚这个前面为什么加一个点。现在这个class我知道了,看着啊,我把Switch收起来。我们再回到to的语法里边,我们之前获取一个对象,能不能通过甲一个class来拿到它?
14:02
可以吧,那也是说我现在我可以直接把这个放进来。相当于是我把后面的字符串放进来了,而且这个点我是不是给他带上了,那这样的话是不是拿到了,就是当前页面那个大对象。能懂不?你当前的页面当对象有了,我确认的动画类也有了,那我把动画类加给你是不是就OK了?懂我的意思吗?和咱们刚刚写这个步骤一样,你这类确定了,页面也找到了,把类是不是加给他就行了,注意这个当前页是不是说的是滑动之后这个当前页啊,那这个时候我这应该是。And class and谁?滑动之后的当前也是不滑动之前他要去,他是要进场的那个。什么意思呢,打卡。这个还没划吧,咔,一划它是不是上一页啊,这个家伙是不是当前页啊,他是不是从外边进来的,进来的话我应该是用out class还是用in class。
15:12
其实你们下来看我这儿的这些注释写的很清楚,这不是进场的动画吗?是不是给了他?那同理,你是进场的,你想要进场,必须是上一个家伙先出去。就是这个last page,他应该给他一个动画,谁呀,Out class是不是先让他先出?那么我们现在做的操作是加,哎,动画类加到对应的页面上。或者说是加到哎,参与动画的。页面上。光有光有这两部不够。我们再来分析。
16:02
这个是马上要出去的那个,我打个比方,你上来我先把这个汉字移除掉,给了他上来我们看到的是不是第一个页面。好,你现在让第一个页面往上走,那这个页面是不是要上去。对不对,但是他进场的时候,他一直有一个属性叫hand。Hi的,什么display闹呢?也就是说他现在属于隐身状态,你是不是必须让人家动画能看见的时候,你先得把这个head移除掉。所以说在这,哎,这个进场的no page,他进场之前我们应该先去。能给他先去remove一个class,谁是不hi的属性?懂吗?大家。啊能懂,那咱们在这里好,那这些做完,我们函数其实已经分装完一半了。我们已经做到的是将动画力加到对应的页面上了,现在我们就切最后一把火,哎,给他来一个滑动事件。
17:09
这没问题吧?好来,呃,这比如说来个先来向上滑动。向上滑动,向上滑动之前呢,我先把这个动画内关掉啊。这个音袋子是不是我们设置初始样式的?嗯,我在这儿定一个东西啊。我又定义了个类,大家看着啊,我问一下你这个是干嘛的。提高层级的,因为现在哎这些div是不是都开启了定位啊。其实我不加这个类没有一点影响,但是我想加大它。是因为这个类,我把它的层级往上提了起,我的意思是谁的页面显示在我的屏幕上,我把这个层级给了谁,表示他的权利高一点。
18:05
待会我要问你们要这个东西能懂吧,我不加他也没关系,是因为我页面显示的时候,其他的页面是隐藏的,所以跟成绩也没有太大的关系。加上这个只是为了让你们发散一下思维,好来向上滑动,那我现在要考虑的是去绑定一个世界。给谁绑定啊大叔,就我们现在的页面。给谁绑定合适?给contain,其实给这个配件绑定不就行了吗?康现在有个问题,你看它的高度是多少。它是没有高度啊,但是谁有每一个配置都有,看到没有。而每一个配角是不是公共类呀,那所以咱们这儿可以怎么去写。是不是就是他?就每一个页面嘛,因为你的手指是不是有可能作用在这个页面的任何地方呀。
19:03
然后绑定滑动事件,我们上午学的叫sweep这一把,你可以利用它的这些四个方向的,这个时候我们能直接确定这就是向上滑。好。向上滑动也有了,那当手指向上滑动的时候,其实我们第一步能想到是不是就是调用这个函数。一调用函数里面的代码不就开始执行吗?最终执行到这儿,就是将动画类什么加到对应的页面。但是调用的时候千万不要忘了一个东西。你是不是得告诉人家的方向,你现在下的话是不是传给他?我这讲的慢呢,大家能跟得上吗?来,我们来看一下。我花了啊,这不下上滑了。没调用。为什么?
20:00
首先你看这儿没报错。为什么没调用呢?忘了,我上午其实已经说了一遍,我说下午会不会你们要的。你现在是不是滑动时间啊。你凭什么能滑动呢?你手指作用的时候,我认为你在翻页,它是不是有一个默认行为,那所以说这个时候我们是不是应该是把默认行为给他禁止掉。又因为你是满屏的,其实到现在为止我没有其他的滑动事件,那我在这儿我就可以整一个它。星号。我们来看一下。叫touch action静止的话是不是行了。刷新一下,滑一下,这个时候是不还没有动作啊,我给大家证明一个东西。来看一下。
21:00
这个页面没有动,但是我先打个咳报,你得先看到你的滑动这个是否生效了。往上。诶。打那附件配件。Swim up。我们这是不是没进来,没进来我看一下,咱们把这个换一个他试试。还没滑动,那我知道哪儿错了。其实不是咱错了,你看着啊。有可能我复制一下这个地址。我重新打开一份。介绍。Co。是浏览器的问题,有有时候啊,不是你写错了,我刚刚什么故意一直强制刷新了好几次啊。他就是不出来,这个时候我其实我已经确保我写的没问题的话,你可以重新打开一个页签,千万不要死磕这个去改这个BUG1改改个一两天能懂吧,啊灵活一点,重新开一个页面,这不很明显就对了吗?能懂吗?
22:06
现在先来看啊,我重新刷新一下,我给大家动作一下,咔一划。首先这个动画动啊。但是有没有发现有什么问题啊?我本意是想让这个页面直接从当前的位置,是不是想向上走。但是你看一下它的运动轨迹。他从这上来的。对不对啊,为什么会出现这种情况呢?是因为你这写的太着急了。太着急了,这个函数调用为什么这样说,当我向上滑动的时候,我上来说了,我初始化这两个变量,只是上来的时候是不是用一下no这个。坐标啊,但是你接下来滑动的时候,你应该是动态的去算出来我马上要出场的坐标和要进场的坐标,只有确定了这两个,才能保证你页面的动画是准确无误的。
23:05
懂我的意思吗?那这个时候我先写一个,看看大家能不能理解。我先给大家打印个东西啊,弄点扣,然后还有个弄点肉看着。刷新一下,这不是第一个页面吗?走,你其实这个坐标为什么是一和一,就是因为我初始化的那一下。对不对啊,我这初始化不就是一和一吗?那既然知道我滑动之前的坐标了,我能不能算出来马上要出场的last page的坐标,还有叫进场的no的坐标。能不能出来?给大家点反应时间。我现在是没滑动之前我是不知道这个页面的坐标。一和一吧,你这一滑动不就拿到了吗。然后这是滑动之前的坐标啊。你得算出来参与两个页动画的页面,一个出厂也是滑动之后,我是不是有个拉配件。
24:05
同样,你成为了历史,我下决心马上要有个人接替你,叫刀配甲。你只有知道了这两个页面的坐标,动画才能对。那我问问大家,我应该先算哪一个?先算哪一个?先算哪一个,你得看看它滑动之后的页面,哪一个跟我滑动之前有关系。你想我滑动之前是他把我咔一滑,它是不是在上面啊?它是不是成拉斯配镜了?其实滑动之后的last page和你滑动之前的坐标是一模一样的。不就这个页面吗?你还能把我这个这个类改了吗?懂我的意思吗?这不手机屏幕吗?你滑动之前的坐标是不是一杠一啊。
25:00
我滑动了之后,我向上走,这个页面是不是现在摆放在这了,而接替它的应该是二杠一吧。那一杠一是不是和我滑动之前的一杠一是一个页面啊。能懂吗?那也就是说我可以这样去写,大家看着。有没有同学理解我为什么这样写?顺便说一下。啊,谁能说一下,反正他都没看到。我现在做的一个操作是拿一个数值给一个变量去赋值。能懂不?其实这你不要说拉子肉等于弄点肉啊这么复杂,其实这就相当于是一个一。而后边这个拉点扣,我是不是初始化的一个变量,我说过我之后肯定要去覆盖它。
26:06
所以说之前初始化的零和零只是为了咱们写的规范一点,你初始化的变量先放在那表示一下。现在这个last是针对于你滑动之后你出场这个页面的坐标,我是不是和滑动之前的一样,不应该就是唯一啊。懂我的意思吗?那同理,它的横向坐标是不是也是和滑动之前这个坐标是一模一样的?那现在这一步我们应该是计算滑动之后,哎拉配件。页面的坐标。算出来以后,你方向知道了,出场页面的坐标知道了,你肯定能算出来进场页面的坐标。就拿这个来说,我就问一下大家。
27:00
这个坐标是不是一杠一,我我现在不滑,我就告诉你我向上走,那我问你马上进场的页面坐标应该为几。一为什么是210?怎么算出来的?你向上滑,它下面这个是不往上顶,结合我们刚开始定义的坐标,它是不是应该加一就完了。那马上我在这儿能不能算出来进场的no.no点扣。但是不要急。不要急,为什么这样说你你要确定一个问题,你向上滑动是在每个页面都可以去滑动吗?看着啊。第一个可以坐标为二可以。这坐标为三的话,纵向可以,当前是纵向是么?为四还可以,如果说你要把这个项目写完的话,你我给你收起来看,你看一下它纵向坐标最多到五,也就是当前的页面,但是这个页面我还想向上滑,能滑吗?
28:04
不能滑是因为下面没有了,所以向上滑的时候应该给他设定一个条件。就是说我的纵向坐标应该是小于五。懂我的意思吗?你滑。什么意思呢?大再看一遍,这个现在是滑动之前吧,我问一下呢,我一滑刚刚那个什么陈为滑动之后了。我现在站的立场是就确定它滑动之后的坐标,滑动之后刚刚唯一是不是可以。现在为二也可以。V3的也可以,这是V4的也可以,这个如果说能滑动的话,它是个滑到上面是拉丝的配置。拉配应该划上去等于五对不对。但是现在拉配如果是等于五的,它能向上走吗?不能走,那也就是说我在这儿应该去判断一下。
29:01
如果说这个拉点扣,它应该是小于五。我才。去调用这个函数。说白了,扣是什么意思啊,就是滑动以后的坐标吗?现在我拉page是这个页面啊,是不是在我头顶上?四杠一也是我拉配置的纵向坐标最大为四,所以我这是不是写了一个小于五。哎,只有进这个里面再让它调用,那这样是不是更好一点。能不能懂?没事啊,大家如果说老师哪一块不懂,我可以再讲,没关系,咱们迟下几分钟就迟下几分钟。有没有问题?那这个调用之前我们还有一些工作没做呢,你现在是不是只知道出厂页面的坐标?我在这应该是计算滑动之后进场页面的。
30:01
坐标进场页面的坐标一个就是no点,它应该等于什么?这不是出场页面的坐标吗?你是不应该等于拉点扣?加一啊。还有一个no点肉,你别忘了还有个水平坐标了拉肉。韩佳一吗?现在你是垂直水平方向,画纵横向坐标是不会变的。所以直接等于它。能懂吗?那这个时候我再来刷新一下,刚刚这个就废了,它浏览器反应不过来了。我就拿这个。走,你。最起码现在出场进场,这个是按照我们预期的轨道在进行的。那都不。这是向上滑动,如果说大家坐到这儿能理解的话,接下来的东西其实不难。再来一份。
31:01
来,我们先做一个对立面,就是向下滑动,向下滑动的话,你需要改的地方先把我为什么收起来,一点一点去改,避免你出错。我不知道你们有没有注意下,下滑动的话,其实是叫。当然后你应该能想到的是先把它改了对不对。告诉人家我下下滑嘛。我问现在问大家个问题,这一步我现在用动它吗。又没有动。记住了,这一步永远不用动。是因为你第一次从第一面第一个页面作用的时候,我是不是能算出来上一个页面的坐标。那也就是我每一次滑的时候,是不是正好是拿着当前这个no点扣的坐标,再算出来滑动以后的坐标。所以说这一步永远不用动,为的是要算出来马上要出场的是谁。怎么算?就是根据你滑动之前当前页面的坐标来算出来的。
32:05
这一步不用动条件,你得换。你向上滑是大于五,其实向下滑解的。小于一。什么小姨?这不就是大于一吗?我写的大于应该是大于,为什么看着。向下滑什么意思啊,手指是不是往这个方向作用啊,那你这咔咔你头上没有啊你。肯定是要大于一。那同理,当你向下滑的时候,这是坐标要减一。水平用不用动。好。看一下。向上没问题,向下没问题。上线就OK了。来。没做完了,咱们要做的工作还有很多,还有很多,好,现在上下是不是还完了?呃,我先把左右的给大家写完。
33:04
再来一份。来把这个复制一份。在哪呢?是不是在这儿,我们应该是先来个向左滑动,向左滑动的话先把这个改了。Left,那接下来进到里边。这儿不用动。不用动,然后呢,条件你这一把又得换。我先告诉你,纵向也有条件,第一个我说过,其实你看我写好这个能看出来。第一个水平方向只有杠一,没有杠二,而234是不是都有?第五个设备也没有。首先,纵向你的坐标不能为一和五,只能为二、三、四。然后你看这个是不是左右划不了。当水平方向啊,也纵向为234可以了,再看水平方向,当我水平方向为一,我是不是可以向左。
34:08
那再向左还有吗。没有,也就说这个条件应该是这样写大于一,并且。小于几五,并且。你最好是写个等等等于一,因为我们现在是不是只有两个页面啊。能懂吗?那这得改水平滑动纵向运动吗?横向呢?写成加一也行,在这写成二也行,是因为我们现在只有两个页面,但是最好是写成加一,那如果说你还有三四个页面呢,对不对。啊,那这呢换个left,那同理,咱们直接把什么向右的写了一块看效果,那在这呢是向右滑动,向右滑动先把这个改了right,然后哪边需要画。
35:10
方向换。条件你这儿的话。只有两个页面,这肯定是二了。那这个呢。介意。行了。那。什么意思?一个是纵向,比如说相当好的时候是吧,它一个是很重的在变,纵的是不变的。纵向滑是横坐标这边,那那你可能理解错,我刚开始定义这个的意思了。
36:03
对呀。可能理解成第一个是S。做好理解。哦,你的意思这应该是水平的,这应该是Y轴是吧?你的意思是根据咱们生活的习惯X弯是吧。哦,这样好理解是吧,其次这个个人习惯的问题啊,这个你怎么定义都可以,就纵向还有横向。啊,不过这个都没关系啊,你们根据个人情况啊,你先定义它是横向也行,是先定义纵向也纵向也行。能懂不?我为什么第一个这是纵向,是因为咱们纵向的页面比较多,横向是不是一般来说水平只有两纵向往下排,哎,所以把纵向放到前面,你看这也能直观的看到,就是12345往下排吗?吓我一跳啊。来没关系啊,咱们继续上下,然后左右是不是动不了,然后滑到这。
37:07
再看。是不是动不了了,为什么?或者我先给你看一下,我告诉你怎么能动,我再刷新一下。上下左右是不是都能看了,但是就动不了了。动不了了,到这儿为什么会这样?想动,你必须得每次得刷新一下。我可以帮你们把这个这打开,你盯着这三个看。刷新来收起来,这不是这三个吗。我滑动一次来看这个类是不是多了一个。我。全部划完,你会发现这些类一直在,既然这些类一直在,你再想往它上面添加,人家是不是已经有这个类了,动画不会执行了。而我们添加这个类,为的是让动画是不是开始执行。
38:03
懂我的意思吗?那动画执行完了,请问这个类还要它吗?你应该是在动画执行完毕的那一刻,把当前这个类移除掉,因为我下一次再作用的时候,我要去添加新的类。懂我的意思吗?那现在问题来了,什么时候动画执行完?我先说一个啊,动画执行完。清楚。动画类。以及做一些扫尾工作。什么时候动画执行完?动画执行完的意思,说白了,我现在问你动画的时间是多少?我怎么知道过渡了多长时间呢?不要忘了一个东西,我们现在什么定义的动画类,是靠我们上来这四个方向的动画。
39:06
这不就是动画过渡的时间吗?0.6秒,那也就是说我在这儿可以这样写。进入到这个时间点的时候,是不是正好是动画执行完那一刻?这一这一步不是将动画添加到页面上,它就开始动作嘛,动作的时候我开开启一个延时定时器,记录一下这个时间600毫秒以后,是不是正好是动画执行栏的那一刻。能懂吗?理解不了。你想一想,我们动画,这不是动画的所有属性吗?动画名字,那这个0.6秒是干嘛的,就是你动画去过渡的时间。在0.6秒。那也就是说,这我不是延时了600毫秒吗。然后当动画过渡完了,我首先要清掉之前这两个页面上附属的这些类。
40:06
第一个你出厂的页面,你是不是出去了,出去了以后应该是先把你身上带的那个out class给我移除掉。能懂不同理,马上是不是要有一个之前那个no,他进场的时候身上是不是也带了一个动画类。叫class,它叫in class。没问题吧?但还不够。你想,这个家伙都出去了。我们是不是漏了点东西,想一想。来,有的同学想到了。当我这个页面移除这一刻,意味着我已经完全占据了我页面视口的位置。你是不是已经退位了,你相当于这个皇帝,他被人家打倒,人家登基了,你是不是退位了,退位的时候你应该低调一点,将你那个你的身份是不是隐藏掉,我们上来是不是应该给他身上去加一个类叫hide hide是我提前定义好的一个display为none的属性,是不是隐藏掉它当前的这个。
41:17
Little。还有东西现在来问你们要一下。我来之前是不是定义了个他。我说了谁显示在我视口窗口的位置,我是不是给他这个类表示他的身份比较高贵一点。那你现在你这个页面是不是相当于你这个皇帝已经退位了。你是不应该是先把你手中的这个权利交出来。是不是就是他?配件。我叫应该是。
42:00
这些东西大家能理解吗?当然了,你交出权利了,那紧接着我这个是不是要先把这个权利拿到手。对不对。好,做完这些,我们来看一下。看着。刚才是没滑动好能滑,看我现在是不是能一直来来回的玩这个刚刚,哎,这为什么是个空白。就是咱下面是不是没写。现在是吧,我这一整的动作了。好了,到现在为止,其实还有一些问题。有没有发现这个动画看着特别不舒服啊?我再给你水平看划一个,你根本就看不到这个页面的动画。动画呢?到底执行了吗?不是动画没加,我们动画加了。你有没有发现和我,我再让大家看一遍,我写好的。
43:03
看着啊。这是这个。然后看咱的。这是咱的。你会发现有什么比较怪异的地方。盯着看啊盯着看,我马上进场这个动画。当我页面从这一露头的时候,这些图片的动画已经在执行了。对不对。再看一遍。动画是不是其实已经在走了,什么时候走页面,只要一加载,一加载到是否这我能看到页面动画就执行了。你看不到右侧这个动画的原因是当我这个页面刚一露头的时候,这这个图片的动画已经执行了,等到你看到这些位置的时候,人家执行完了。
44:00
能理解我的意思吗?本质问题出现在哪?你再看一下人家这个啊。That。我先卡到这儿,我这个页面马上都要交接完了吧,你能看到图片吗?是不是看不到图片,他什么时候能看到图片。交接完那一项,再来看一遍。看图片是不是才显示出来了,这样的话才能保证我们外边的div交接完了以后,动画开始执行,也是用户看到的是完整的动画。说白了,你动画什么时候执行,就是你动画这个类加到某一个DOM节点上,只要这个DOM节点被加载出来。逗号是不是就发挥作用了?现在我们应该是保证一个东西。你这些div你隐藏的时候,你的图片也应该干嘛?隐藏起来。我先给大家加上。
45:02
这样你们好理解一点,全部让他隐藏。来,咱们来看一下。就拿这个来说,大家看着啊。这是不是和我刚刚暂停了一下的效果一样?你说我们最起码要保证一个东西,在我页面过渡的过程中,我不希望这个图片被加载出来,如果是一加载那个动画类类就开始执行了。能懂不?那现在你是不是看不到图片啊,什么时候让图片出来?当动画就是我这个完全接管这块区域,我让图片一出来,是不是动画开始执行啊。那怎么写?什么时候动这个div完全接管了他那了。说白了还是外面这个动画是不是过渡完了。过渡完了,是不是也是在我们这个set timeout里面。
46:03
也就是说当我进场这个页面啊,我这要进来的时候,我进来之前我应该是做一个这。到这一步,三个塔600毫秒的时候,动画已经什么进全部进来了,但是你要紧接着做一个事情。你让他下边的。P是不是它页面啊,我能不能用find找不找到它下面所有的image。你妹子不就是它里面的标签吗?我应该干一件事情。干嘛?将人家身上图图变身上那个移汗的属性,是不是移除掉就完了。那同同理,你上面出厂页面,你负元素你都隐藏掉了,你子元素应该也隐藏掉,因为你下一次再进来的时候,我在我负元素闪亮登场的时候,女子元素还是属于隐藏的状态。
47:01
能懂不?所以说在这儿我们应该是让拉配他出场结束以后,他立马去找到他下边所有的意味者,然后呢,给他去添加一个属性就是害的。得到不。那这个时候我再来刷新一下,咱们来看一下。来,我卡住它,大家看我动画没执行完,你能看到这个图片吗?现在是不是看不到,那这个时候来。走,你。有没有发现动画政策了,就是这已过度完咔图片一加载一一旦移除了类那的属性,我是不是就加载完了,就要加载,一加载动画就开始。你再看一下这个,现在你才能看到这个动画,哎,这样的话才算正常。
48:00
然后做到这一步,再给大家看一个,看着啊,我连续滑动两次。有什么问题没有?这还是两次,你咔咔连续滑动五次呢。大家之前你们最早在做轮播图的时候,有没有做过这种效果?萝波,你比如说我有四张图,你是不是有可能要左右龙波?我点击按钮图片走一张,那图片没走完的时候,你连续点击那个按钮,你让不让它连续的快速的滑动。之前这个需求你们应该做过吧?那我刚刚呢,哎,这种问题就是。和你们之前轮廓是一样的,也就是说在我这个DIV2个div之间没有过度完的时候,用户再滑的话,我应该让它失效。这个应该会做怎么写。
49:03
我们可以去,哎,初始化变量。表示。页面呃,没有在滑动,你比如说Y一个。木等于false。没问题吧,我初始化你能变量吗?那也就是说我每次上来,我应该是先去判断一下页面是否在。滑动if。如果说is不为。直接出去是不是就完了?而你四个方向的动画上来,其实都应该去判断一下。有没有问题?放到这儿来,还有一个。这没问题吧?好,还有最后一步了,我们什么时候将这个is moving改为?
50:10
调用move的时候,说白了大家想表达的是我动画开始那一刻。对不对。动画开始那一刻在哪儿?是不是这一步?什么叫动画开始?你调用move还不是要执行里面的逻辑吗?咱们第一次实现滑动的时候,是不是就写到这儿?写到这儿的意思是将动画类什么加到对应的页面上,它就发挥效果了。所以你紧接着在这个下边,你就可以去写一下A和A。Is moving等于什么?写完了吗?很好,那你如果说这写完你就不管的话,你只能房东一次。滑动一次以后a movie是不是永远没出啊?
51:01
所以说,我们应该在动画执行完的那一刻,再将这个东西重置为。False。什么时候动画执行完?不就是这个600毫秒以后吗,所以在这。改为false。然后来刷新一下。找你一次没问题,我再上线。我连续花。还会有刚才那种效果吗?哎,没有了。那到这儿为止,其实我上下左右包括交互都讲,下边还有空的话,你会发现和我们只要你上面能做出来下面的东西一样的。所以我们做到这儿,如果说大家能把这个做出来就没什么问题。我的先把这个视频停一下。
我来说两句