07_尚硅谷_h5实战_气泡效果

那我们现在就来做这个气泡效果啊，首先我们来做一个什么什么样气泡呢，我们做个大饼。啊，做这样的细胞效果。啊，就像阳光下的泡沫，是不是OK，我们做做一下这种气泡效果，做完这种气泡效果我们再来做那种啊，曲线运动，想想这种气泡效果怎么做。肯定跟开发式有关系，你就告诉你这是用开发式解了，是不是画圆嘛，而且这个圆得慢慢的变大了啊开。还记不记得？这样啊。好，我们来先写一个简单的看动画。啊零五气泡效果。气泡效果OK，好，比如说我们现在说这个开马斯动画怎么写吧，开马斯动画一定要结合定时器去用吧，开马斯动画。好，怎么写，看马斯懂啊，一个一条都不记得那。

那不行，是不是，首先我把这个看元元素把你们写一写啊开是不是好，可我们学么I不要再ID了，ID了我说他可以写吧，好要不要加P不要是不是OK还有什么是吧，也给个是吧，是是OK，居中我帮你们写了啊居中我去贴了，刚刚是不是已经写过了。好，我感觉这个居中我都要写烂了，CRL一定不是他。我在那写剧中呢，哎呀，不管了，写了哪个啊，挺高来写的居中是吧？没有骗我鼠标这边写过去总哎这边写过是吧，骗啊这你嗯那个好，这个要写一写，感觉天都不如我写的快，真的是。

C，还什么VS吧，看吧是吧，找你好，这样是不是就居中了？这样吧，我给玻璃这个颜色换一换，灰色多什么的点给成嘛是吧，去掉什么，去掉这个camera就行了。然后呢？怎么办？然后是不是得判断一下它有没有这个比啊。怎么判断有没有这个比啊？一什么这个比怎么拿的OC点什么。Get什么吧，是不是看一下有没有这支笔，是不是如果有这支笔，我们就可以去拿哪支画笔，这画面应该在什么OC点什么变成。

是吧，横吧，好，一定要穿个什么2D的画笔，是啊，OK，拿到这个画笔之后，咱们是不是就可以去画东西了，比如说我们说要写动画的话，是不是一定要循环定时器了，是不是？OK，在这个循环定时器内部的吧，有一个防腐性是不是啊，OK，我们说一直去画矩形怎么画。我说你要画东西肯定什么Ctx.CCX点也是。Are什么stop是不是，然后呢，当中是把ctx点什么，Begin pass begin pass上面去写一些什么。样式相关的是吧，我们说这个样式的话都是用camera嘛，API来做的吧，下面写是吧，路径是吧，我说现在无法矩形怎么办？CTS点什么。

带边框的矩型，最最简最最简单，号什么什么，是不是零零这个位置开始画是不是画多大的100乘以。100的是不是，你现在是不是想要去做一个动画，这样的话你是不是只能画在一个，一直在这上面秒啊是是你想做动画怎么办？每次开定时器的时候干嘛，我在外面干嘛。Wow一个什么？来嘛，等于零吗？每次进进来时来干嘛？这加干嘛，你不是要动吗，干嘛？那不就动起来了，那不就是一个动画吗。是不是是不是动画。是不是这个动画，这不就是最简单的一个看法式动画吗？是不是啊，OK，走点，那大家想想，我这里面好像还差一步，我想让这个框动起来吧，那怎么办？每次上来的时候干嘛？每次上来时候我不管怎么样啊，我不管你在这边玩什么，我把这个花布清掉怎么办？c.S点什么肯定啊，00oc.oc点。

Hat是不是只要你看一下，你看是不是这样的，怎么讲，那这个干嘛，听时器开慢一点。干嘛一秒干嘛60这里好这里哎是不是就可以了，是不是啊，OK好呃，那这个动画就出来了，好，那干嘛看是能不能回忆起来啊。一好，那我们慢慢再来啊，那我们来做这个气泡运动，好来看一下我们待会做什么，做这个气泡，看这个怎么做啊，这个气泡的话我就叫它大底啊，做泡沫叫阳光下的泡红，像形象一点吧，对吗？阳光下的口红OK。

怎么写来看一下，哎，我们把这个起跑线打开，让你看看。好，肯定要画圆的，是不是走底，而且。而且慢慢变大还要炸掉。是不是炸掉其实就干嘛，你们看到是炸掉了，其实就没透明度了。是不是首先这样，我们先我们先干嘛，你看这个位置是干嘛随机的，这样我们先做这个功能，我们先在这个画布上面给我随机的去势等于二。就一个黑色的圆。半径也是固定的。怎么做？怎么去随，怎么去随机的生存感。

对吧。70位置肯定要随机是不是，那想想其实也就是说什么，现在我把这个干掉。这个肯定得有的吧，基本上套路，基本上套路都得有吧，是不是我们待会是不是在这个里面去干嘛。去换是不是换圆怎么换呢？Ctx什么AC，然后呢。圆心，圆心在哪？圆心随圆心随机的。圆心我先给个固定的，是不看这个圆我们先不能先能不能画出来是不是，然后呢，半径。半个55是有点大。这个十，然后呢，其是互动，最终活动是不是可以不用写，不用写是不是个圆。

看一下这里，诶，这只是一个路径要换的点。是不是？也也没有。Ctx点二。是没有指定颜色点默认我去点是黑色。先不管了，先看看。有问题？F12有没有报错？五个参数需要只写了三个，另外两个是必须的吗？零到三百六乘以什么点？

判，所以一百八必须的好像是。OK啊，不尔字可以不用写啊，最终是不是有个方向的方向是不是可以不用写是吧？OK，大家想想现在我干嘛，我不用，我没有什么要求，是不是我就让你再随机的给我去生这个怎么办？这些东西都应该是随机的，除了这个半径。是的。想想我如果有一个数组，数组里面都是你要画的那些圆信息可不可以？最终你把数字里面这些圆一个个取出来，循环的给我画。是不是就可以了是吧，那我相信我首先要做的是什么。往这个数字里面去塞一些原的信息，而且这些信息塞进的时候应该是。

随机的是不是，而且一直要往里塞网。是不是一直往里塞啊，你看我这个动画是不会停的吧。你看我这个动画不会停的吗？是不是一直在往里塞啊。那么你讲说明是不是有一个永动机啊，一直往这个数字里面给我去塞一些原的信息啊。然后我有另外一个东西，一直把数组里面些圆的信息取出来画。是不是，那首先我们干嘛，我们说干嘛先干嘛往什么。AR中干嘛注入什么，远大中注入随机元信息是不是OK，我们说是根嘛，一直要注入是吧，那肯定是圆转。循环你的情是吧，OK，来一个放不行找你，我说你每个500毫秒，你往这个数组里面帮我去筛选你的信息点pui push什么东西呢？原必要，原必要的东西有还有什么。

圆心呢？在哪给我画这个圆心啊？问你这个圆心能超出我整个画布吗？不能操作等话吧，那这个应该怎么拿，而且得是随机的是吧，那么你是不是麦是不是有个叫什么让这个是不是拿到零，零到一啊，零是B区间，一是根区间啊，是不是我说这个X值是不是永远应该在我这换换不以内啊，那我应该乘以什么。O一点的吗？这是那个随机的圆形就出来了。OK，干嘛？Happy。

是不是半径我先给他干嘛定死掉？十的是吧吧，我铺一个最小值是吧，X就为。XY就Y啊，就是啊。是不是这样的，能不理解啊，然后呢，我说每个500毫秒是不是都会往这个数字里面去过下，那问你，那我是不是得拿出来画。将什么？将数组中的圆干嘛？绘制道画不上，绘制画不上，问你怎么做，我能不能写个负循环，我负循环，我挖一个I等于零，I小于什么A点。

哎，加上是不是，然后我是把这个数里面圆个嘛信息拿出来画，怎么画C点什么。C是什么？你先不管，先给我save，我先给我stone re。给我begin pass cts.begin pass，然后呢，在这边给我去ctx点什么？画圆嘛，是不是圆怎么拿？点什么是吧，然后呢，AI什么点Y，然后呢。

A2I点什么R嘛，然后呢零，然后呢360，其实我画一个字里面只要写个300就行，不用写互动，或者说写个二乘以什么M点啊，是不是问你这个我问你。是动画吗？是动画吗？不是动画，你只是将语言数组的信息拿出来干嘛？会了一次，而且很有可能这个时候干嘛？连数据里面压根连信息都没有，为什么你是500毫秒之后才去放。那这个就上来有吗。刷一下，啥也没有。是吧，还没画。啊，我这边还没画，是不是ctx点什么，你画的也是一样，所以你看看有没有刷一下有没有。

也是没有吧，为什么？因为你本来说的就是空的，而且呢，我们要做的是这个动画。我们是不是要做这种动画？做动画肯定要跟循环定时器相。配合吧。是不是啊，是不是要跟这个循环相配合，那你想想。我是不是。这边问你如果只写一个负循环，是不是把数组里面的信息拿拿出来会一次。会一次够吗？其实我每次都是把画布清掉，重新会，把画布清掉重新会。是不是你一直在不断的往里塞，我一直在不断的把数据里面信息全部拿出来，先清掉再混，先清掉再会。也在这个画的时候要不要看电视前。要不要在画的时候我要把干嘛？C，他一坨怎么办？来一个反复干嘛？每次上来先干嘛，全部清掉CTS什么，肯定啊。

段零零段oc.oc点，然后呢，oc.hat是吧，然后呢。数组里面干嘛拿出来给我重新画，相当于把画布擦掉重新画，把画布擦掉重新画。是不是真的？看看吧。说一下。看到没有，是不是把画布里面的擦掉重画，画布里面擦掉重新画。能不理解，好，OK，好，那剩下那是不是随机的圆已经出来了。有问题吗？你想你每次擦掉了，可是你这个数组这个信息还在不在，你看一下，我没有删什么，没有删这个数组里面在啊内容啊吗？看这吗，数据里面的内容永远是来我刷下看你看。

数字是不会变得越来越大，越来越大，数字里面元素我有删过吗？从来没有想过，每次去画的时候，我只是把画不清一下而已。原来的原来，原来那些圆还在不在？原来那些圆的星星还在不在这样一直都在啊，是不是每次我都会把它们干嘛重新描出来？有没有讲，那想想现在还有什么东西是要是要顺序的。半。半径是随机的吗？半径是慢慢变大。什么是随机的颜色？是随机的位置，是随机的半径，其实出来都一样，只不过它慢慢变大。是不是啊，那我是把这个颜色也搞一个。

C角是不怎么办，我们说干嘛你不是干嘛，比定pass这边可干嘛直DCDC是掉等于RGB吗？是不是二级BA里面跟什么信息啊。RGBA里面一个什么形象？不就是rgba信息吗？是不是这个rgba信息怎么填啊。我干嘛？嗯，真的。嗯，想想这里应该怎么怎么了。反正我这边是要一个啊。什么？BA，你A我我刚刚好吗？你看这个A之后干嘛也是有变化的，透明度是有变化的是吧，我所有关于圆的信息我统一放在这。

速度里面去啊行不行啊，那我是不是就干嘛R级别就可以了，嗯，那这个是不是R干嘛。冲突了，那是什么？一个是瑞吧，一个什么green，一个是B是吧，因为阿尔法吧alp吧是吧，透明的例子吧是吧？那想想这几个字应该怎么来，这几边是不是也要定啊，画一个，问下红色是不是应该随机？是，是不是随机的，OK怎么办？乘以多少是不是只你，然后呢，是不是自己是什么。二五吧，是吧，再来还有什么。不入干嘛也是成员258特别录呢，特别度我们不是干嘛随机吧，出来都是干嘛，一开始都是一的吧，那我就给你吧。

最后一个。呃，曲整，想想红绿黄要不要取整，取整下是不是应该要好一点卖点的吗？取个正好一点。找你是吧，学个证好一点吗？有问题吗？没问题吗？是吧，然后把这些数据干嘛，一定要什么先进来吧，不然是没有用的吧，是吧，走你还什么。Green blue。好，还有一个什么透明度。

是不是好，那这今天怎么了？是不是CTRLC，是不是ar.r点。a.a点现在我拿出来的颜是不是颜色应该是不一样的，刷一下。一个人都没出来。RGB is not这边干什么？Rgba。那边这边应该怎么写呢。Feel style是不是应该是个字符串？是不是啊，所以呢，怎么办哇，这就写下来有点麻烦了，是不是？这个逗号是不是也得放在这？Java。是不是两边是不是要加。能不能理解好，这边是不是也得加是吧，哇，这个写起来。

讲是不是需要这个逗号是吧，OK这边呢。加加，来一个逗号。是不是这样的？能不理解？还得干嘛，这边最后还得干嘛，加一个这个括号是不是也得加进去了。是不是这样来看一下所你。啊。我估计他脏。刷一下，大家看是不是都是不一样颜色的圆，随机生成不一样颜色的圆吧，是不是好，那再想想。现在还差什么没装？半径慢慢变大。半径是不是慢慢变大，你想半径慢慢变大，半径有没有随机。需不需要水机？

不需要水极半径，半径是你平滑的，慢慢变大。透明度是不是慢慢变啊。变小是不是怎么办？我们说半径在哪边。大是不是这个啊，透明度呢，AP吧，是不是，那能在这个里面处理吧。这边只是往AR中注入圆的随机源的信息吧，这边只把随机源吧，效果在哪？基本信息就在这边，效果是不是在你画的时候。是不是你每次进这个循环电气，我画的时候，我能不能把你这个数度稍微来来处理处理，我让你说干嘛处理处理再画。可不可以啊？猴，干嘛，我说的嘛，你每次进来的时候干嘛？哎，点它里面是不是有半径加上。可不可以？

半可不可以？嗯。行不行啊，那不就会越来越大吗，是不是。来看一下周年。是不是这样的，是不是可是太可是太大了吧。是不是这样的，肯定这样的吧，OK，只不过透明度要慢慢变小，大家看我们这边，你看它这个半径是不是大到一，大到一定。一定程度就会干嘛炸掉是不是啊，我看我们这个是干嘛太大了哇，这好恐怖啊，太大了怎么办，能不能在这边做处理啊。我们说干嘛干嘛一二干嘛小于等于50的时候，我才允允许干嘛。你这个玩意干嘛，这大嘛，最大到50吗，是吧你。

你看是不是。是不是在哪？OK，只不过还需要破掉吧。是吧，怎么才让它破掉？透明度是不是要降下来干嘛，每次到这个头，走到这个循环干嘛，我在画之前干嘛也先帮你处理一下干嘛。还点什么AP干嘛，减减不行吧，我总共就一半，是不是减等于0.1。行不行，这你看一下哇。好快，太快了吧，为为什么这么快啊，说明你是不是这个第十就跑快了是吧，一秒钟60层看一下刷一下。还得小1.0.1。

啊啊啊啊，0.01走，你说一下。哎，感觉这个怪怪的。是不是到一个点，是不是干嘛停下来了，我这个判断干嘛不用判断了干嘛，反正他待会透明度会变成什么没的嘛，只点。诶。差不多是不是啊，可是你们能不能感觉到一个问题？我数组从来没有清过，会不会出问题？你看我这个数组极其疯狂吧，而且这个数据里面有些内容其实不用不用再画了，你看有些圆的透明度大家看。推出在哪看，比如说我开这个圆，它的透明度。已经到负值了。你再画也什么画不出来，因为你上来时候它的透明度就已经是个负值是不是，那怎么办？所以说你们信息被改过就已经被改过了吧，是不是，那其实干嘛。

我们说上来我们先得干一些事情，干嘛你透明度小于零的，我就不需要你再来画，应该从这个数据里面把你干掉是不是，那干嘛。只要你这个FLP干嘛小于零或者是小于等于零了，我都需要把你。干掉，怎么干掉？数字里面有数组，数字还有什么吗？是这个数组啊，数组点什么，怎么去干掉元素啊。是不是这个是不认识啊，是不是第X个元素嘛，干掉几个干掉一个嘛，这个方法是不是又可以插入元素，又可以删除元素的。是不是这样的整理，那我们来看一下整理，刷一下，大家看这个速度。你看永远都不会干嘛，永远都不会超过四啊，因为每次你透明度为零的时候，我都会把你干掉。是不是你想让这上面元素多一点，怎么办？

放的频率干嘛，你放快一点呗，放快一点不就干嘛。多一点了嘛，是不是，你看是不是到30几就干嘛会自己降下来，永远只能出现什么30几个嘛。是不是OK，那这个相当于有点类似于波纹的这个东西，咱们是不是就。写完了。是不是能不讲。能不能理解，能理解吗？首先我们你你得搞清楚下面这个循环电子器是干嘛的。干一件事情生成。随机缘。是不是这个定时器是用来干嘛的？将数组中的圆绘制到。画不上。这个破循环干嘛的？这个是真的是来做什么绘制的，是不是这个是用来干嘛的？这就是动画，动画在的地方。

好，这个速度我先给你们干掉，能不能理解？那么你讲好，先自己先看看。