模拟直播间点赞效果

1、效果图

2、实现过程

1. 观察思考

• 开始编码前我们首先观察效果图的内容和结构：一个点赞按钮和发射的爱心。
• 交互：每点击一次点赞按钮，发射一颗爱心。
• 关键点：刚触发点赞按钮时爱心的透明度是1越往后透明度越低直至消失；爱心的初始位置相同，消失时的垂直高度相同水平位置不同；

2. 点赞按钮

点赞按钮的实现方式很简单：圆+垂直居中，点击按钮新增classname。话不多说直接上代码：

//html
 <div class="lovebox"
      @click="loveClick();"  
      v-bind:class="islove?'islove':''">点赞
 </div>
 //css
 .lovebox {
      position:absolute;
      bottom:2px;
      right:2px;
      width:50px;
      height:50px;
      background-color:blue;
      border-radius:25px;
      color:#fff;
      display:flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;
    }
.lovebox:hover{
      background-color:#c00;
}

3. 发射的爱心

发射的爱心是这个交互的重点。对于菜鸟并且头脑简单的我来说实现方式也是简单粗暴：

• 写一个img循环 ，img的循环次数等于点击的次数；
• img默认隐藏只有点击点赞按钮时才显示；
• 点击点赞按钮时顺手给img加一个classname,方便写“发射”的动画。
• 针对爱心“发射”时水平位置不固定可以给img绑定一个v-bind:style:right:value,value值随机。

按钮的点击次数实现起来很简单：count初始值设为0，每次点击按钮count++；
爱心默认隐藏点击按钮才显示：islove默认为false,按钮点击时设置成true（也可以用样式直接opacity:0)
给img绑定classname，使用v-bind:class="islove?'img_ani':''

//html
 <!--爱心-->
<div class="lovedemo">
  <img v-bind:src="imagePath" 
        v-for="(item,index) in count"
        v-bind:style="{right:right+'px'}" 
        v-bind:class="islove?'img_ani':''"
  />
</div>
//js
data() {
    return {
      islove:false, //
      count:0,
      right:0,
      imagePath:"爱心的url地址
    };
  },
   methods: {
    loveClick() {
      this.islove = true;
      this.count++;
      var x = 300;
      var y = 200;
      var num = Math.floor(Math.random() * 5 + 1);
      this.right = parseInt(Math.random() * (x - y + 1) + y);
    },
  },

交互完成， 重要的知识点就这么多，剩下的修修补补再加上样式就ok啦~

4. 本文用到的技术

v-show/v-bind:style/v-on:click/Math.floor()/Math.random();

5. 拓展：

Math.ceil();  //向上取整。
Math.floor();  //向下取整。
Math.round();  //四舍五入。
Math.random();  //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494
Math.ceil(Math.random()*10);      // 获取从1到10的随机整数 ，取0的概率极小。
Math.round(Math.random());   //可均衡获取0到1的随机整数。
Math.floor(Math.random()*10);  //可均衡获取0到9的随机整数。
Math.round(Math.random()*10);  //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。
因为结果在0~0.4 为0，0.5到1.4为1...8.5到9.4为9，9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。

3、收工

上代码~ 边学习边整理，如有问题欢迎指正，侵删~