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

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

在官网中也用过例子，但是效果不是特别好，在网上找了一个vue的方法(https://www.jb51.net/article/170438.htm)，然后更改了一点，可以在uniapp中用

解决方法
1.新建一个index.js文件

/**
 * LikeHeart
 * @version: 1.0.0
 * @author tennylv
 * @date 2018-05-24
 *
 */
'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) {
 
    /**
     * 初始化心
     * 
     * @param {object} 
     * @object.x {number} 心起点位置x
     * @object.y {number} 心起点位置y
     * @object.endX {number} 心结束位置x
     * @object.endY {number} 心结束位置y
     * @object.height {number} 高
     * @object.width {number} 宽
     * @object.angelBegin {number} 左右摇摆起始角度(可为负值)
     * @object.angelEnd {number} 左右摇摆结束角度
     * @object.angleLeft {bool} 是否起始从坐往右摇摆
     * @object.noScale {bool} 是否使用缩放心动画
     * @object.scaleDis {number} 缩放心临界值(默认从起始位置到升高50)
     * @object.noFadeOut {bool} 是否使用fadeOut
     * @object.opacityDis {number} fadeout心临界值(默认距离结束位置40)
     * @object.speed {number} 上升速度 
     * @object.bezierPoint {obj} 贝塞尔曲线4个点的值参考https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html
     * @object.fadeOut {function} 每个心fadeOut之后回调
     * @object.image {obj} 图片对象
     */
 
     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.007;
     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;
  }
 
  /**
   * 获得min-max的随机整数
   */
  function rand (min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
  }
 
  /**
   * 获得贝塞尔曲线路径
   * 一共4个点
   */
  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;
 
});

2.在页面中引用（不要写错自己的图片地址img.src）

<template>
	<view class="liveRoom">
		<canvas id="cvs" style="width: 200upx; height: 400upx;">
		</canvas>
		<image src="../../../static/live/heart-active.png" id="heart">	   
		</image>
	</view>
</template>

<script>
	import LikeHeart from "./index";
	export default {
	 props: ["ClassTimePlayer", "videoUrl"],
	 data() {
	  return {
	   width: 175, //初始宽度
	   height: 400, //初始高度
	   heartList: [], //初始数组
	   heartCount: 0 //累加计数初始值
	  };
	 },
	 methods: {
	  getRandomDis() {
	   if (Math.random() > 0.5) {
	    return -(Math.random() * 43);
	   } else {
	    return +(Math.random() * 43);
	   }
	  },
	  createHeart() {
	   this.heartCount++;
	   let positionArray = [
	    {
	     x: 65,
	     y: 200,
	     endX: 50,
	     endY: 50 + this.getRandomDis()
	    }
	   ];
	   let img = new Image();
	   // img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
	   img.src = `../../../static/live/heart-active.png`;
	   let p1 = {
	    x: 50 + this.getRandomDis(),
	    y: 70 + this.getRandomDis()
	   };
	   let p2 = {
	    x: 100 + this.getRandomDis(),
	    y: 100 + this.getRandomDis()
	   };
	   return new LikeHeart({
	    id: this.heartCount,
	    x: positionArray[0].x,
	    y: positionArray[0].y,
	    endX: positionArray[0].endX,
	    endY: positionArray[0].endY,
	    onFadeOut: this.removeItem,
	    noAngel: true,//决定是否左右摆动
		noScale: true, //是否使用缩放心动画
	    width: 20, //决定心的大小
	    height: 20,
	    image: img,
	    bezierPoint: {
	     p0: {
	      x: positionArray[0].x,
	      y: positionArray[0].y
	     },
	     p1: p1,
	     p2: p2,
	     p3: {
	      x: positionArray[0].endX,
	      y: positionArray[0].endY
	     }
	    }
	   });
	  },
	  removeItem(item) {
	   var array = [];
	   for (var i = 0; i < this.heartList.length; i++) {
	    if (this.heartList[i].id !== item.id) {
	     array.push(this.heartList[i]);
	    }
	   }
	   this.heartList = array;
	  },
	  },
	 onReady() {
	  // 飘心
	  var _this = this;
	  var ctx = document.querySelector('#cvs > canvas').getContext("2d");
	  (ctx.canvas.width = _this.width),
	   (ctx.canvas.height = _this.height),
	   (function loop() {
	    ctx.clearRect(0, 0, _this.width, _this.height);
	    _this.heartList.forEach(function(item) {
	     item && item.move(ctx);
	    });
	    requestAnimationFrame(loop);
	   })();
	  // setInterval(function() {
	  //  _this.heartList.push(_this.createHeart());
	  // }, 100);
	  document.getElementById("heart").addEventListener(
	   "click",
	   function() {
	    console.log(111111)
	    _this.heartList.push(_this.createHeart());
	   },
	   false
	  );
	 },
	};
</script>

<style lang="scss" scoped>
	.liveRoom {
		position: relative;
	}
	#cvs {
		bottom: 20upx;
	}
	#heart {
		position: absolute;
		bottom: 0upx;
		left: 70upx;
		width: 60upx;
		height: 60upx;
	}
</style>