vue实现直播间点赞飘心效果的示例代码

前言：

在开发公司项目的时候，遇到了直播间的一些功能，其中点赞冒泡飘心，就折腾了好久，canvas学的不好，自己写不来，百度找了一堆都是js原生写法，迁移到vue项目里来好多问题，百度也解决不了。自己试着慢慢解决，竟然在不知不觉中通了！废话不多说，直接上代码，复制粘贴即可使用

示例：

不动就不动吧.png

```第一步```：先在外部新建一个js文件,取名index.js（名字自己随便取）

index.js代码内容如下：


'use strict';
(function (root, factory) {
  if (typeof exports === 'object') {
    module.exports = factory();
    //CMD
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
    //AMD
  } else {
    //WINDOW
    root.LikeHeart = factory(); 
  }
})(this, function() {

  var LikeHeart = function(opt) {

    


     this.id = opt.id;
     this.x = opt.x;
     this.y = opt.y;
     this.endX = opt.endX;
     this.endY = opt.endY;
     this.orignY = opt.y;
     this.height = opt.height;
     this.width = opt.width;
     this.angle = 0;
     this.angleLeft = opt.angleLeft;
     this.angelBegin = opt.angelBegin || (-20 + rand(1,2));
     this.angelEnd = opt.angelEnd || (20 + rand(1,4));
     this.scale = 0;
     this.scaleDis = opt.scaleDis || 50;
     this.opacityDis = opt.opacityDis || 40;
     this.noScale = opt.noScale;
     this.noAngel = opt.noAngel;
     this.opacity = 1;
     this.speed = opt.speed || 0.0027;
     this.bezierPoint = opt.bezierPoint;
     this.bezierDis = 0;
     this.onFadeOut = opt.onFadeOut;
     this.IMG = opt.image;

     this.move = function (ctx) {

      if (this.opacity === 0) {

 this.onFadeOut && this.onFadeOut(this);
      }

      this.y = getBezierLine(this).yt;
      this.x = getBezierLine(this).xt;


      this.angle = rangeAngle(this);
      this.scale = getFScale(this);
      this.opacity = getFAlpha(this);


      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.angle*(Math.PI/180));
      ctx.scale(this.scale, this.scale);
      ctx.globalAlpha = this.opacity;

      ctx.drawImage(this.IMG, -(this.IMG.width/2), -(this.IMG.height/2), this.width, this.height);
      ctx.restore();
     };

  };


  
  function rangeAngle(heart) {
    if (heart.noAngel) {
      return 0;
    }
    let _angle = heart.angle;

    // 心介于[start, end]之间不断变化角度
    if(_angle >= heart.angelEnd) {
      // 角度不断变小，向左摇摆
      heart.angleLeft = false;
    } else if (_angle <= heart.angelBegin){
      // 角度不断变大，向又摇摆
      heart.angleLeft = true;
    }

    // 动态改变角度
    if (heart.angleLeft) {
      _angle = _angle + 1;
    } else {
      _angle = _angle - 1;
    }

    return _angle;

  }


  
  function getFScale(heart){
    if (heart.noScale) {
      return 1;
    }
    let _scale = heart.scale;


    // 随着距离起始点的距离增加，scale不断变大
    let dis = heart.orignY - heart.y;
    _scale = (dis / heart.scaleDis);

    // 当大于设置的阈值时变成1
    if (dis >= heart.scaleDis) {
      _scale = 1;
    }

    return _scale;
  }

  
  function getFAlpha(heart) {

    let _opacity = heart.opacity;

    let dis = heart.y - heart.endY;

    if (dis <= heart.opacityDis) {

      _opacity = Math.max((dis / heart.opacityDis), 0);

    } else {
      _opacity = 1;
    }
    return _opacity;
  }

  
  function rand (min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  
  function getBezierLine(heart){
    var obj = heart.bezierPoint;
    var p0 = obj.p0;
    var p1 = obj.p1;
    var p2 = obj.p2;
    var p3 = obj.p3;
    var t = heart.bezierDis;
    var cx = 3 * (p1.x - p0.x),
      bx = 3 * (p2.x - p1.x) - cx,
      ax = p3.x - p0.x - cx - bx,

      cy = 3 * (p1.y - p0.y),
      by = 3 * (p2.y - p1.y) - cy,
      ay = p3.y - p0.y - cy - by,

      xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x,
      yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;

    heart.bezierDis += heart.speed;

    return {
      xt: xt,
      yt: yt
    }
  }

  return LikeHeart;

});
```第二步```：引入需要用到的页面
import LikeHeart from "../../../static/js/index";
```第三步```：直接复制下面这一段

图片自己去换，至于在哪里换 
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
这个就是咯
 ```最后一步```：在html里，写上这个 
  
  

收尾：

然后就实现了。这个代码我也是百度的某个大神的，最后说明下不是我写的哈。迁移到vue中稍微修改了一下，勿喷。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。