033-直播间模块-点赞布局原创

好了，另外咱们赶着呀往前继续啊，来到我们的杨左的直播间，现在我要对杨左呀，给他点赞了啊，我喜欢啊杨总这个直播间啊，咱们以前不都说嘛，对吧，给人这个点赞啊，点赞也是情，点赞也是爱啊，那在这儿的话呢，给我点点主播的小红心哈，帮主播点一下关注等等的，对吧，就是这么来的，咱们点完这个之后呀，咱们也知道这个功能的话呢，应该是我们分为这么几步吧，点完这个小红心之后，首先呀，咱们在界面部分考虑一下，一个出现一个动画，哎，这个小心的话上升的啊这种动画啊，列位也都用过这个抖音啊，知道啊这种小动画，点赞之后一个星星往上飘这种动画，嗯，这是一块我们的界面部分，第二部分呀，就是我们的通信部分列外，咱们点完赞之后，那得知道什么呀，我自己点完赞之后呢，我需要把这个聊天区中再显示出一条的我。

啊，这个给主播点赞啦，同样的，那别人在看直播的时候也能看到，说哎哟，引兵给主播点赞啦，对吧，他们能看得见，所以这块运用到即时通讯的I'm这块儿啊，然后除此之外，咱们还得把这个谁给谁点赞的这个信息，引兵给杨组这个用户点赞的这个信息存到咱们自己的数据库中，另外为什么要存呢？因为将来我们好统计杨祖点赞的数量呀，啊你要注意即时通讯那个东西，它只是帮助我们啊来进行通信的啊，说把这个消息通知了其他的这个人啊，广播给其他人，把这个点赞的消息广播给其他的人啊，他并不会来记录说诶，点了一次了，点了两次，点了三次了，所以说在这里啊，我们的工作是我们要用即时通讯来进行发送消息啊，广播给其他广大人民群众，而我们又要利用我们自己的后台，然后把我们谁给谁点。

赞的这个数据存到我们的数据库中，这样的话我们方便我们之后统计说杨左收到了100个赞，谁谁谁收到了200个赞，哎这种的啊，所以接下来咱们按照这样一个方式来开发，在这一小节中，咱们只负责把界面给做好就行了，哎，出现了一些点赞的气泡啊，其实在这里就是改变背景图，做了点动画而已，当然方法有很多，可在这里介绍的就是我们写了一个animation，然后不断的切换背景的这样一个动画。好了，在这里科现在呀，告诉大家，我们将来的话会有一组这样的动画在我们这个我粘过来吧，在给大家大家打开哈，是有这样一组动画啊，所以将来的话呢，这也是其中的一张动画，其实还有很多啊，将来每一个新的位置也不一样，而我们在这实现的原理就是我们不断的切换我们背景的这个图片，我们把背景图片从这0%的时候是这张10%几的时候是这张20%几的时候就是另一张的最。

最终的话呢，把这个animation动画给执行起来就可以了，好了，这就是咱们所有的这个思路，那这样的话呢，我们首先列外啊，跟课文要写的就是来到我们这个当年写包卷代码的时候，你得把这个先给它注掉，咱们以前用的image这一块，咱们现在不用了，好了没了，换成啥呢？哎，就换成课文所说的咱们用的是这个view，然后你给它设置一个动画好不好，Class等于一个anation啊，Animation的话呢，是我写了一个class的名字，那我对应的在这个class啊这个地方我开始写我的这个布局了，对不对，点anation，那这个animation的话呢，就是咱们给它怎么样，它这张图片它不可能再按照之前那种方式啊，在弹性和这个地方显示的这个位置上了，所以客人准备啊，用固定定位给它定位到刚才这个底部来，因为将来我们要换这个背景图，而不能换image的，对不对，换。

顶图，我们给它固定好包是零这个位置，Red这块的话呢，我估算一下，因为当时咱们要求的是我们的每一个item的宽度的话呢，就每一个item宽度应该是个120，列外每一个都是120，我呢是想贴着这个地方来布局我这个动画，所以客们在这里的话呢，是想把我这个动画就放在这个位置上了啊，那这样的话，我这个right值设置成这个多少呢？我们设置成这个地方就行了，我们呃让它挨着，让它挨着这个挨着这个箭头这个位置，那所以在这里这个箭头本身是60，这块是120，箭头的话呢是60，所以说箭头左边应该会有30，右边会有30，箭头自己是60，那这样的话我就90，所以我距离右边这一块的话，我就给它弄成什么90这个地方就行了，所以在我的这一个代码中啊，N在这个room包里面给他。

一个什么90RPX，好RPX，我们这个距离啊，然后再就是宽度，宽度的话我按照比例量出来了，是130RPX啊高度的话呢，是咱们的282PX那半ground image给它怼上来，怼上这张图片，另外可以看一下把这张图片咱们给它URL来指向这一个地址，嗯，我这个地址是在我们的这个地方啊，把它给复制过来，是咱们的远程服务器的这样一个地址，我给它粘过来了啊，粘到这个地方来好了，一保存之后的话呢，咱们再把这张图片的办公上的size咱们给它设置一下啊，外公上size就跟咱们这个宽高的话呢，是一样的，2PX，然后282PXOK，保存之后的话呢，哦，这张图片它就在这个位置，但它其实的话是这么宽的这个地方呢，另外可以看一眼啊，它这么宽的啊，咱们现在正好要给它放在了这个位置上来了，好吧，那接下来。

的话呢，就是我们是点一下之后开始切换我们的好多好多这一个图片，是这个时候我们在有这一个动画啊，坑在这里呀，这个动画实在太长了，而且图片太多了，所以坑直接就把这个动画提前笑给粘过来了，行吧，哎，在这里的话，这个动画咱们就不去洗了，但这个动画你一看就明白，只不过有点啰嗦，来看一眼吧，在这里的话呢，有这样一个动画来，我们有一个key frames like，这一个key frames0%的时候好宽高，这都没问题啊，背景图片的话呢，是这个看见了吗？是这个，然后5.26%的时候就变成了这张背景图片了啊，就变成了这张了又。啊，好像是好像这个比刚才那个好像这个改变了一点点，我我不太感觉出来哈，就后面这一块的话，每一块的话都是稍微的给他变动了一下，所以它是有一个很平滑的，你看一下好像这个图片变大了，我感觉啊，咱们从这从中间找一张吧，从这边找啊，所以这些图片的话是它不一样，所以它其实就用多个动画，多张图片组合起来了这一个动画，那接下来QQ服就干这个事啊，列位在这里也不用自己去写了哈，就在这里将啊cover代码中的这块代码给它抄过来就行了，好吧，啊，就是我们的这个key frame，然后接下来我们就写一个any nation啊，太长了，写一个any nation，然后写一个什么key frame，就把这个like给它拿过来，然后咱们在这里写一个什么infinite，然后执行这一个什么一秒钟，好，点击之后保存，咱们来看一眼这个动画的效果，来两位重新编译一遍。

那咱们进来之后看一下这个动画效果就是这样的。对不对啊，就这样的一个效果啊，点他自己啊，其实就是多张背景图片的话呢，在这里啊，进行这一个切换的这个动画效果啊，就是一个点赞的这样一个效果啊，所以在这啊，大家就把这块给粘过来，但是不，他不能一开始就在这里进行这个点赞的这个切换呀，所以我们可以在这里的话呢，做一个什么呀？诶好像这个动画好像有点怪哈，我可以在这里给他执行一个什么呀，Animation animation timing function，我这样，因为咱们也想一想，他是从这个地方，他慢慢的过渡到它，其实咱们没必要，咱们只需要他的一步过渡过来，他在这不是有一个steps吗？写一个一，大家还记得这个意思吗？Timing function啊，咱们可以从0%~5.26%，只经过一步就从这直接变到这，再变到这，再变到这啊，图片够多，所以他动画已经很连贯了，不用那种慢慢的，哎，给我切过去这种的，不用那种效果啊，所以在这里的话了来啊，所以在这里哈，变成一步就可以了，没必要了。

的话呢，平滑过度这样的话呢，性能的话呢，这个不会那么吃咱们的这个CPU啊，慢慢的过度就一步过去啊，一个四代四好了，接下来就是这个animation啊，咱们不能一上来就给它，另外是咱们点完按钮再给它，所以咱们需要一个什么呀，单独的一个class给它放进来，所以思路很明确，就是我点按钮之后，我把这个这个东西给他，然后给了他之后，他就会有这个动画，但是他会一直有，有人说就给他改一写成不写inended，那就只执行一次，那你后面再点的时候，由于上面已经有一个class了，就不会再执行了，所以这个思路就得这样呀，就是我们点完了之后啊，我们让这个class加进去了，然后过了一秒钟再把这个class给它移掉啊，然后等我们再点的时候，然后再加上去，所以这样这个动画点一次有一次，哎，这样一个功能好的，另外这个功能的话，咱们其实在这里也非常方便，咱们只需要借助一个三幕就可以了。

然后我们通过一个三目，一个true，一个false，对吧，如果是true的时候有这个start false的时候就没有这个start，那我们就在我们的这个WXML中，咱们对应的这个class后面这里咱们写一个三目，咱们写一个is an这个值的话，如果是true的情况下的话呢，咱们就给它加上这个start false的话就没有，所以大家可以想象一下，如果为true start这个class加进去了，那这样就会有动画is animation false就没有了呗，那这样的话，咱们把这个is animation做成咱们root bottom下面的一个状态啊，初始值是个false，它没有呀，那这个时候的话，你给它点了一下按钮，我就给它改成处了啊，所以在这里放tap，咱们一个hand这一个animation，然后在这个handle animation中啊，在咱们对应的GS中来坑，给他写这样一对代码啊，在这个method里面套着去写啊在。

这里咱们只需要将它给改成this.set我们的data，把这个is animation，咱们给它改成这个true，这不就有动画了吗？来重新的编译一遍啊，咱们来看一下啊，好像我这块编译的时候写的有问题是吧？WXM2中我看看WXML中这里的话好像写出了问题来了，在class class这块是一个双引号里面，双大括号里面，哎哟，这块写了一个问题哈，问号怎么改成冒号了，问号哈，问号好了一保存，咱们这次再来重新的编译一遍，咱们来体验一下这个效果，列外啊，来重新编译一遍哈。

啊，怎么又出什么问题了，我看来我又得清一下缓存了，是不是让我好了重新的再编译一下啊。编辑完了之后呀，咱们就可以来看一下这个效果了哈，可能点一下才会有这个动画了，这次对不对，来点一下点点有这个动画了，点怎么没有动画呢？啊，我这个单词写错了，这个我我我看一下啊，在这里这个S怎么给它改成handle到这个了啊，咱们之前这个值是is animation，再把这个值给它改成这个true啊，这块写错了，马上摔死英雄汉呀，来好重新咱们编译一遍哈，这块又出了这个渲染问题了，小心。

点击杨左之后的话呢，再咱们点一下，点一下就就有了这个动画了，对不对，但一直会有啊，咱们也说了哈，就是这个动画的话呢，咱们让它执行的是一秒钟，那就一秒钟啊，再给它移除掉，或者更短的时间，咱们给它移除掉就行了，所以坑只需要在这里写一个什么定时器啊，咱们在这个set time out，然后对应的一秒钟结束啊，或者是更短的时间，800毫秒结束啊，咱们就让这个Z4.setdata，咱们再给它改成is animation改回来这个false，那这样这个值变成false甲之后的话，它是不是就哎把这个star这个class就给咱们移除了，一旦移除了之后啊，我们就没有这个动画了，点一下之后了，跟客人来测一下，点第一次的时候，诶有动画你看，然后再点对不对，点一下就有一个动画，点一下就有这样一个动画啊，所以点赞的这个动画的话呢，诶咱们就完成了列外好吧，OK，关于点赞中的这个动画方面，咱们就输到这里。

点啊，咱们在下一小页中，咱们再来说，那我点完赞之后，我是不是还得回到我的live直播间组件，然后再执行我的，哎，跟我们计时通讯R'M的啊这块处理，再就是跟我们自己的后台的一个处理好了这一小件咱们就到这儿。