16_尚硅谷_h5实战_第三屏实现

好，那我们先把这个work这一瓶做掉啊，这边比较简单啊，这两瓶都比较简单，没有什么GS代码啊，除了这个飞机啊，这个飞机跟这个比，咱们暂时先不画啊，放到最后咱们一起画能不理解啊，这个飞机不是画出来的啊，这飞机是张图片，你不要让我把这个飞机画出来啊，这个机器人也是个图片啊。好，我们来看，好，我们先做这一题吧。好。零二。TCTRLCV02。好PC项目每天实现。嗯，其实做这个东西我还想告诉大家一件事情，就是说其实你们以后去了公司，你们发现这种东西的话，会有框架。就是这种滑屏啊，以后你们会遇到用框架可能调用方法就。就出来了，懂不懂可是看你个人啊，看你个人之后对这个宽带的理解啊，如果你觉得用个调用方法，你也不想知道大体人家是怎么实现的话，你就调方法吧，是不是有点追求的人都应该知道啊，都应该想呗，为什么调了这个方法就可以怎么实现，是不是，那基本上的逻辑跟我们现在每一行写的代码都差不多，能理解吗？啊，所以说你们还是应该从原生的这个这个这个应用开始啊，去写起，慢慢的再去写到框架啊，不要一上来只用框架，到最后你发现就是会一个只会掉API的人啊，那就比较尴尬，大家看一下。

好，那我们先来做我们的第三瓶。第三瓶好，那第三瓶这一块的话，其实我这边是有一些参数的，OK，把这个拎过来可以抓C第三瓶。CR，好，那看看先放在这边啊，好，第三瓶我们来看样式，先合起来，JS也啊，那起码也合起来，GS也先合起来啊，咱们现在是不是干嘛什么东西都没有分离开了呀，就是一个最最原始的阶段啊，就是如何去写下，就是这么写项目啊，你们会发现这么写项目其实不是很好去阅读。

是不是就项目大的时候，可能我们要写到几千行，那这个时候干嘛，我多敲一点空格的话，应该能到2000行啊，就是可能那个时候的话，你会看这个代码的话就有点费劲了，有点啊，那所以说代码的话也是需要一个比较良好的组织形式的啊，以后我们会去学好，那我们来看那第三题，首先先写它的S码结构。Section第三在哪？Works嘛，吃热汤。是吧，OK，走你好，这个里面的话，大家想想你看到了几样东西啊。不要看比啊，你把笔给忽略了，总共几个结构？

啊，这是第一个结构。是不是这是第二个结构，机器人也算一个结构，是不是三个结构，是不是，那我们这三个div吧，稍微语句化点吧，组长，那这个还是叫这样吧，我把这边D全部改成什么。Section。好，这里CTRLCCTRLV。好，全部等成三形。全部改成三，是不是样式那块也要改一改的。样是哪边？是不是我记得我也写个D，是不是这边LYY加速的DNA什么三个形来看一下没有坏掉吧，是吧，好还有一个问题啊，刚刚刚这边有个问题忘了这说一下，刚刚这边。这个是没有换掉啊，这个换来干嘛换。

这个没问题吧，好，那接下去就可以真的合起来了，好，那OK，其他的LY也全部合起来。好，我们就看这个works works里面总共几个结构，三个结构上来，这个上来我们怎么先去这个怎么先让它给我们展示work啊，点过去也可以，是不是啊，当然最好的方式话怎么办？我们说咱们不是有一个木偶函数嘛，是吧，找到这个木。我这个木函数自动调一次行不行？OK，去第二瓶啊，去沃克斯，应该是第三屏吧，是吧，这里好刷一下，那默认是不就学第三题了？好，那我们就在这上面画好看怎么画。好几个结构，三个结构上面应该是他的HD的啊，这个比较简单啊，OK，有一个class吧，好，这叫WKS。好，底下还有什么，这算我们的had的是吧，是是不是有个列表是吧？嗯，这种列表的话直接给div吧，或者给那个三也行是吧，直接给div吧，啊也不要什么太强的语义化嘛，类似的是吧，这种列表的话直接。

直接给UI的形式嘛，这个地方比较简单嘛，直接给给D行不行。是不是class叫做item是吧？好，这个item内部应该有几样东西？你看是不是有个遮到的。有一个这个成的，而且它应该是有个图的是吧，OK，卖这个嘛，里面的。来看看能不能找到。Pencil笔跟飞机都在这啊，我画的好，哎，是不是他们三个是吧？好，这是第一个吧，OK，然后呢。

要不有个结构？有个什么结果？有一个这什么就做must，是不是这里面有有几样东西。文字的字体吧，是不是啊，OK。是不是有文字跟字体啊，文字跟字体怎么写，搞个SPA是吧？OK，这个文字是什么啊，我是这么，我有一头张小飞，我有一条。我有一头张小飞，OK，走，你好，然后呢，还有什么艾克嘛，是吧，搞一个div吧，肯定待会是有个背景的，是不搞一个I CU icon OK走好，现在我们是不这个it应该有几个。

这个it应该几个四个是不是这点1234是不是也可以啊，我是一个类似的嘛，里面有四个it嘛，这给它换掉，换成什么二。三。四这不多一个，那就干掉一个，肯S好看一下说一下。是不是有四个是吧，这个文文字我们改改，我有一头张小飞。我从来对不起，我从来等不起啊。突然一天，突然一天心血来潮啊，其他去赶集，其他好问其他去感集，其他去赶集，OK这里好，那这个文字待会我们是有用的，好OK来看一下现在是不是这样，OK，然后走你那我们看怎么办。好，那这个历史咱们什么就算结构算完了吧，还里面应该有什么是吗？是不是，那就搞几个SPA吧，三个SPA ctrl c。

拎进来。很圈啊，是进来，而且这个字是干嘛读在一行的，是不是我是大写的现在OK，这个字是干嘛独在一行的什么最后他个标，不要感觉这个标好low啊是吧，标不low可以变量是么B啊。OK，这里一看呢，就是在几边BR就出来这看好这里，好好来看一下这里。文字呢，怎么可能盖住？怎么可能盖住？这什么鬼？嗯。

这还能隐藏我什么都没写啊。真盖住了。为什么会盖住啊？看下面是不是干嘛？你是不是有点。哦，他是定位的吧。啊。这个历史是定位的。我什么样式都没写呢，是不是？你看肯德尔家是不是也有个叫做类似啊，不是换名的问题是什么？底下是不是这个历史上咱们写的不好，是不是以后不然还会出出现这个问题吗？还出现这个问题，再换名字那是干嘛。小明字很费脑的，你知道为什么头发那么少，小明字小的，这个技术好一点，你这个头发也会多一点，好来看一下。

刷一下这本书就过来了，OK，然后然后还做什么。还有机器人是吧，机器人再来个机器人呗，机器人就是个div，你敢不敢信？OKCLA是吧？反正会定位的是吧？这你干嘛？我们叫沃克斯。啊，这个我这个命名其实可以命名成我什么123的嘛，这个不会重明吧，是不是。这不会聪明吧？好，那我这边不是刚又来写了完好上一下是不是过来啊，OK，那我们来写教声好这里看手法下过来了，写下手法吧，好首你首先啊，不是首你懂吧，首先首先这个workers里面这个什么head的吧，它是不是这个文本是有。钥匙档啊，这个钥匙我直接扣过来了啊，这也没有什么好讲究的，大家看一下有个空抬就C，我把这个空抬拿过来，我们是不是有个钥匙专门写什么公共钥匙呢？OK，为什么把它定义成公共钥匙呢？好，你会发现是很多字都是一样的，你看整单里面是不是很多字都是一样的啊，所以说我们把它定义成一个空开头啊，OK，它就是什么。

就是换一个字体颜色，字体大小行高稍微变得小一点啊，字体加粗了啊，字已知之间的间隔。小了叠到一块了才会出现这种效果嘛，抠的很近嘛，这能理解吧，啊这这这这就不行了，OK，然后呢，把这个空抬头干嘛，给谁用起来。这不这个吗，他是吧，这里看一下完美啊，写完是不是感觉。位置不对，其他都还行吧，是吧，OK，这个粉色是不是应该可以改掉。

咱咱们先不改，先把放在这OK好看它的位置吧，好位置还没看有没有信息。标题上部空袭50，右领下100左50。上午空气它是不是按照这个来算。Boxer，不要想。呃，我们的区域是不是这样的。是不是是不是我里面只要一个，他待会要去干嘛。它是上面是不是有有一些空隙大是吧，看这空隙不到。上右下左右右边是不是没有啊啊，我们就我们就按照这个来吧，上下左。OK，给谁啊，我一吧，OK，那咱们应该在哪去写了？Work下面吧，是吧，OK，我们说这是第几篇。第三名。

OK John，好，它底下了谁？呃，Work啊，一是不是重点，OK，唱一个干嘛？吧，是上面。50右零上右下左吧，五十零一百五十五十零一五十好少了什么，感觉少了少了点什么，少了皮草。OK，这里看一下。看这个马没睡觉。嗨了吧，是不是W1是不是没有马丁，是没有什么鬼。

Works worksworks em。哇，这都能写错。我也是服了。为什么？为什么？为什么为什么？没有运用上吗？觉得写错了吗？下什么list下的？问，是底下的？哦。可以吗？好过来了是不是OK，这里好选择题的问题是吧，然后呢。然后是做这个列表是吧，一看他们就要什么浮动的吧，OK，这里。嗯，我们做第三笔。

啊，不用单写，就这么翻，OK，好，嗯。里面的什么？Works是谁啊？二吧？OK works2提到了什么？二底下什么？我给的是所有的艾特，这些艾特应该干嘛？浮动起来是吧，OK，他们底下的这个应该哪些吧，点艾特应该弗洛特为。特别left是吧，就看一下应该到一块去了。好，是不是倒了一排啊，是不是OK，嗯，我们来看一下这些有没有尺寸呢。前三项是干嘛？列表左西左边是不是有50的空隙啊。是吧，OK，跟这个跟这个一样，跟这个标题一样的吧，是吧，那给他50。

谁呀，他吧，有一个monkey left来个50TAX啊，OK，谁谁要是敢，谁要是敢，要是感兴趣的可以去量道，那这个我不量啊。列表整体动作。啊，应该给谁给给谁给温克斯二。是吧？好。说一下是不是在哪？OK，来看底下的每一个item。那么前三项是200乘两百二乘以1338，第四项是不是稍微宽，稍微宽1.ok，那怎么办？前三项。是不是这边Y是么多，先四个六个嘛，搞成一样的二百二幺三三是吧，宽是220P高呢。

1233PX是不是OK，最后一项干嘛？单独写吧，那怎么办？来一个那什么last行不行？可以吧，OK，它的Y是应该什么？稍微大一点。3332是不是改到这里来一个332，这里还是给他改掉，是不是一样的，还是好这里说一下。好像没怎么变了，不管了，是不是在哪，OK，然后说他什么。然后说他们之间有一个移像素的空隙吧，左右存在移像素空隙，那怎么办？是不是这些it啊，那个什么左右都有啊，马上下为零左右001是吧，刷下。有个一小时空西吧，是不是OK，然后呢，咱们要做这个遮皱了吧，这个遮罩是不是遮到的大小，是不是跟我这个什么，大家想现在我是把这个艾给干嘛确定住了，艾特底下有几样东西啊。

艾特底下其他多像两个嘛，一个是image，一个是mask嘛，是不是啊，这个mask是不是像这个image的尺寸的话。不用管吧，是不，我这个ma是不要跟我这个艾特一模一样大。是不是这个道理啊，因为你要干嘛遮上去的嘛，是吧，那怎么办，Ma哥这个艾特一模一样，大拿top来了那个嘛。还什么这些行为？原来是吧，你底下一个什么鬼？艾底下一个什么鬼？艾底下个什么点mask是吧？你这个玩意要跟我一样大，那怎么办？你心为什么？是吧，为零为零为零，波特为零。

那是不是就一样大了，这脸啊，给他一个背景，看看八客光的平衡，看一下是不是跟他一样大的。直接照上去了是吧，给低个宾格才能看到，也叫非得搞低宾衡。是不是最后一个干嘛，最后一个。最后一个。这首歌为什么要单独给一下？这个为什么要单独给一下，最后一个为什么单独干，我把它覆盖了。啊。

不应该啊，为什么它只有这个点。好，还有前面。这么点。你这个ma个参照是什么吗。奇官，我也是吗？马斯克，那你成到这个ID了吗？最后最后爱不在这吗？不知道睡没睡觉是吧？啊，对对，还还不知道你没睡觉。是不是最后一个没生效吧，是不是那边写错了。Tap。哦，应该用last是吗？我们说这个是不是相对于来说的。你看换成什么。

嗯，这个选择是不是用错了，应该什么，那last试试。这个外。我记得他们俩之间是有坑的，一个是以元素为中心的。还是没有。拉。诶，是拉桥的吗？对。Next啊，Next是干嘛？繁序是不是你要选最后一个应该是动吗？Last吧，那last应该也可以。说下是吧，刚前面加的话是干嘛代表反去吧，是不是好，那怎么办。是不是就过来了？OK，过来之后我们来看还有什么鬼。Must都是不管了。Mask里面有什么？

大看我有一头小被罩，我把它搞多一点。大家看一下这年。我有一头有两头OK，有三头啊。好，这里你看这个换行丑不丑。还行。呃，大家看这边这个换行，这这里面这个文字，大家看这里面这个文字是不是四边都有，四边都有空隙的，你看它换行的时候，是不是四边都有空隙的，咱们画完的时候呢。你看头上就没有没有空隙吧，就会感觉不是很好看是吧，那一般你要看到这个四周都有空隙的，其实干嘛很简单，谁啊是不是这个ma斯啊，一般这个ma斯都是什么box，因为box啊，然后干嘛叫他定为10PS好，这个就是四周都会有什么，恭喜。

算。啊，有没有看到，那这样的话就会稍微的好看一点，能不理解，OK，而且一开始的话，我们说你们是我这个身份给他干掉，身份写在了哪。给他干掉。它其实一开始是没有颜色的吧，这点一开是不对应，一开始是什么，应该是一个黑色的罩在上面的，只不过一开始是透明的，我们看不到而已。真的没讲干嘛，一开始上来干嘛。应该是有个背景的，这个背景应该是什么颜色。嗯嗯，想想。直接给黑色吧，OK，我不我们直接给零八，这样是不是可以刷一下。

你是看不到的是吧，你看如果ocd给一呢。是不是就有黑就有就什么黑就有黑的上面啊，为什么不搞白合罐呢？因为里面还有字体。懂吗？我们不能只不能只考虑被体透明吧，是不是整体这个元素都是透明的？OK，那么我不成列为零。是吧，OK，那先干嘛。嗯，Color是什么？颜文字是白颜色吧，那给一个什么color y完是吧，首先不让它透明，这里看一下。这应该不应该也是不应该是全黑吧，给个点吧。差不多吧，是不是OK，还差什么。呃，是不是有这个什么还的是吧，还有底下什么。

图片是不是已经有了？图片怎么没有图片？图片不都在下面吗？是不是明是不是在下面啊，我们把这个什么I康给换了吧，Icon是不是也得送来，OK，那我这icon给谁啊。Mask底下有什么？还有个什么icon是吧，找到这个ma，它底下还有个什么。点ICOI码看这个icon。好，呃，这造成。呃，我们没有完全按照它的格式来吧，是吧，OK，那就按照我们的来吧。这道图标宽十高什么三吧，我多。32PX。看34PXOK，给个背景，先看下它在哪，OK教你。刷一下。是不是在这边啊？OK，让他居中就行了。

上下未定左右。好就过来啊好，他要求垂直水平居中吗？与文字的空隙为实是不是就行了啊，它跟这个文字是有关系的吧，OK，干嘛给个马就行了，其实啊啊，给个马就行了，不要垂直随平居中啊，Marketin。特团VI10篇小遮好上来。是不是这边啊，然后呢，给他一个什么background，什么URL imagine底下的什么。找一找。有没有这个啊。好，你们看不到，我也看不到，那怎么办，看不过来。Image底下有个ul image底下。怎么都是蜘蛛啊？

兄弟，你还看不爽？啊。我的天。是不是在这？OK，给个什么找你好，这个颜色干嘛干掉。S。强迫症。看一下这点。是不是在这，然后浮上去的时候干嘛。让下面这个上来是不就行了是吧，那怎么办。在谁身上大？在他自己身上嘛，OK，你就把给这个什么。I是吧，这个I在干嘛？后悔的时候怎么办？什么刚行吗，是吧。调整一下位置吧，为什么调整？

这个位置调整我们最会了，怎么办？上来自己玩。是不是这个元素啊，给他那个什么白光是什么。默认我给个零零。零嗯，0PS吧，是不是是不是这样呢。嗯。在的是这个啊，OK，我慢慢调一下。应该是。晚上是不是这样，差不多。啊，负35啊LC，那就调调整成零负35是不是就可以了，LC那怎么办？零负35是不是就可以了，你来关掉。刷一下。瞬间过来了吧，要有个过渡是吧？OK，来一个全三形。

全三星，给几秒？给个一秒吧。好给谁啊，白色的。看一下，刷一下。哎，是不是就过来了是吧，可能还快一点吧，那这个时间你们自己去调是吧，默认他什么。默认整个城都是是吧，什么时候这个城会出来？后上去是后面到谁身上去是吧。再身上去后是吧，应该是癌症嘛，是癌症上去干嘛喝的时候让底下的谁。点马他是什么，我点变成多点吧。是吧，OK，这我们之前都一起吗？玩的玩的不想再玩了吧，是吧，这点是吧。

喝上去之后是不是就出来了是吧，可是你喝上去时候应该有什么过渡，只有过度马K过渡是吧，来个什么全三角形一模一样的给谁。给谁啊是吧，走，你来说下。那是不是就过来了是吧，我们还差什么里面图得干嘛放大旋转，也就是说在我干嘛艾特干嘛后过的时候，我得让谁？不是马克了吧？是让什么麦去了吧，是不是，是让什么让我让去干嘛？Transform。是吧，OK。全是phone要干嘛？要放大也要旋转是吧？放大跟旋转在一起的时候需要注意顺序吗？

放大灯旋转。不用这样不用是吧，那我去干嘛，随便赚个多少。30度是不是OK，是掉多少1.5吧，这里来看一下。刷一下。谁要OPPO？Item it吧，It是容器嘛，我知道为什么。是吧，你。OK，加一个什么过渡，这个过渡。一般就有过渡是不是OK走引料干嘛，这边下面都是后面的吧，是不是OK干嘛，我们说是有过渡他吧。这是MAS吧，应该是这样，他的应该吧，是不是来自什么全三性啊，给谁啊。

全风是不是告诉劝风，你待会应该有不懂刷一下。差不多是吧，只不过他比我们快一点。是不是我们稍微干嘛慢一点啊，效果是不是已经差不多了，OK，唱什么。机器人是吧，机器人，我们看机器人什么参数，是不是WORKS1WORKS2已经全部做完了，OK，走，你现在做谁。五三这个比较简单嘛，有不感觉OK，我是三找你，我三。咋做，OK，这个也做完了是吧，OK。宽松拿过来就行了。167。宽度万次为多少高度呢？191是不是OK，它肯定是他背景图啊，是吧？You arel imagine下机器人我刚看到。

差不多到了出来机器人。这里看一下它在哪。刷一下。是不是在这肯定要定位什么，定过来了吧，OK，而且我们看我们这个定位都是相当于谁的定位的，现在。WORKS3，在哪边，是不是在这，也就是说我们看这个三个星有没有给定位啊。有我们这个性不是垂直水平驱动的吗？是不，你看我们这个三形在哪边，在这边你看垂直水平驱动的吗？它有定位属性的吗？所以是不是这个work是参当于这个什么S去做做定位的，OK，看这个值为多少。那的值我们给了多少啊，这个我们不去量了，节约点时间是吧，900个嘛，少一百七吧，OK，那等于多少？不给一百七吧，没有定位吧，OK。

为什么？二是落是吧，找你。是不是在占道，是不是啊，OK，把这个粉色的背景给它干掉。谁有粉色背景？粉色背景给了谁片好难找，粉色背景应该给了这个。唱不唱？O，这边是吧，你看是不是在这干掉它好把这个根嘛正好。一波兰强迫症找你好，来看一下，应该没有，是这背景。是吧？没粉色背好难看啊。这个背景图比我们深一点。是不是可能是我的背景图的嘛。应该是他没有居中啊，应该是他没有居中，咱们居中了是不是，那这样吧，我们把这个被句中，我们换换他是不是用的三啊，我们改成四吧。

零差不多是不是OK，那四跟三换换啊，这个小问题啊，小问题这样好，然后干嘛，他是不是得动啊，这样这种动画要用写吗。这么有规律的动画需要用解释写吗？直接什么？叫啥？你完全可以做吗？来看一下那怎么办，是不是这个我给他一个什么吧，叫做是不是叫做关键字的名字啊，有个我三木行不行，OK，然后呢，几秒钟。

是。仓库。啊，没几个数心值啊，第一个关键字的名字啊。没有参数。没有参数自己改，那直接给我给个三秒行不行是不是啊，我说你是线性的一个运动是吧，然后呢。还因为干嘛一直在做嘛。多少次嘛，那咱们是不是就差这个关键字啊，关键这么定义啊，At keep是不是定一个关键字，名字是不是OK改造什么。是不是让干嘛，一开始这个位置到什么。往前走啊，往前走，这个是大很小啊。变小了吧，那是怎么办？

是不是走到50%相当于干嘛走了还要回来？是吧，走到这边还要回来，那怎么办？这把我给0%的时候，咱们不动50%的时候走到什么。一半吧是吧，百分百的是不是还得回来，其实默认我0%跟百分百不写的话，就是你的默默认状态就在这就就在这个点上呗，然后到这边的时候，这个应该什么。其实我们不用控制的，那也行吗？我说全是form的嘛。Translator AA，往前走吧。往前走是正还是负啊，走个300PX看看啊，他能走到哪。啊，应该干嘛，付了500万是吧。差点意思，他不掉头，人是掉头的吧，你看他干嘛？

这什么鬼，是不是这个机器人有点low，怎么办？怎么办？哎，怎么怎么越来越快，我给他卖一点。怎么他去掉个头啊，到哪边翻转百分之多啊干嘛？哎，这个怎么写。写前面写后面，行走现在叫什么？180度是不是应该写后面是吧？周年来看下。这走着走怎么还怎么还变瘦了，是不是OK，是不是干嘛应该是是不是干嘛到这个点的时候干嘛立马转头啊，这个也体现了我们说0%~50%代表的这个时间段啊，是不是啊，这个时间段你看是不是是不是会会有什么会有一个过渡的一是吧，0%的时候干嘛我没有让你转嘛，那是不是从1%慢慢的转到什么180度啊，你看嘛，慢慢的什么过程中转到一个80方，那怎么样，他立即翻转过来。

到这个点立即分钟过来分这块干嘛。49%这一块，其实CTRLC干嘛，你还没有转懂吗？而且19%这一块干嘛，我说这个怎办。应该还是一个零度是吧，那这个值怎么办？因为这两个这个这个没关系吧，相当于0%~4%全部走完呗，百分之就差什么1%嘛，是吧，那稍微什么意思一点是吧，这里。

是不是，可是回去他还是赚了吧，为什么回去你是还是从这180度转成我。一开始的，要是我一开始是多少多。没有指定嘛，那就零嘛是吧，那干嘛，你要保证你回去的时候干嘛，CTRLC，你应该还是去什么0PX吧，可是你这个转的度数应该还是。180。是不是这点试试？是不是这个能不能理解啊，那这个机型咱们是动画里写做完啊是吧，这么有规律的动画的话，不应该用加去写吗？啊这么有规律规律动画，我这个你没写就可以干嘛。

搞定他吧，那你讲可是这个到底干嘛，熟不熟是吧，其实这边要写的好一点的话。是不是这样好？那这样话能稍微好一点，这能理解吗？这能理解啊，那是不是这一题我们就做完了啊，比较难的就是这个东西你干嘛熟不熟，也就是说你有没有忘记。懂吗？其他的我感觉就比较简单。能理解吗？OK。