Vue realizes example code for realizing the live function


When developing company projects, some of the functions of live broadcasts, all of whom praised them, and tossing for a long time, Canvas Not good, I can’t write it yourself, Baidu has found a bunch of JS native writing, migration to the Vue project, there are many problems, Baidu can’t solve it. I tried to slowly solve it, I didn’t know anything! Not much nonsense, directly on the code, copy the paste can be used

vue实现直播间点赞飘心效果的示例代码 Do not move it, no move .png

“ “ `First step` `: First create a JS file outside, name index.js (name you casual) index.js code content is as follows: / ** * 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) {/ ** * initial heart * @Param {Object} * @ Object.x {number}Heart starting position x * @ Object.y {number} Heart position y * @ Object.Endx {Number} Heart end position x * @ Object.ene {Number} Heart End position y * @ Object.height {Number} High * @ Object.Width {Number} Widel * @ Object.Angelbegin {Number} The left and right swing angle (can be negative) * @ Object.Angegrand {Number} left and right swings end angle * @ Object.angleleft {bool} Start From the right swing * @ Object.noscale {bool} Whether to use a zoom heart animation * @ Object.scaledis {Number} Zoom Heart critical value (default from the starting position to the elevated 50) * @ Object.nofadeout {bool} Using Fadeout * @ Object.opacitydis {Number} Fadeout Center (Default Distance End Position 40) * @ Object.Speed ​​{Number} Rolling Speed ​​* @ Object.bezierPoint {Obj} Bessel Curve 4 points Reference https : //aaaaaA at.github.io/beziermaker.js/playground/playground.html * @ Object.fadeout {function} After each heart fadeout, callback * @ Object.image {Obj} image object * / this.id = OPT. ID; this.x = OPT.X;THIS.E = OPT.Y; this.Endx = OPT.Endx; this.endy = OPT.E; this.Height = Opt.height; this.width = OPT.WIDTH; THIS. Angle = 0; this.angleleft = opt.angleleft; this.angelbegin = OPT.Angelbegin || (-20 + rand (1, 2)); this.angelar = OPT.Angelard || (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.mg = 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.scale = getFScale (this); this.opacity = Getfalpha (this); ctx.save (); ctx.translate (this.x, this.y); ctx.rotate (this.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 ();};}; / ** * Calculate the method of left and right swings * / function rangeangle (heart) {if (heart.noancyl) {return 0;} let _angle = heart.angle; // Heart Converged angle IF between [start, end] f (_angle> = heart.angelar) {// The angle is constantly smaller, swaying left heart.angleleft = false;} else fNgle
= heart.scaledis) {_scale = 1;} Return_Scale;} / ** * Method for calculating transparency * / function getfalpha (heart) {let _opacity = heart.opacity; let dispi = heart.y – Heart .endy; if (Dis Import LikeHeart from “../../../static/js/index”.Export Default {Props: [” ClasstimePlayer “,” Videourl “], DATA () {Return { Width: 175, // Initial Width Height: 400, // Initial HeartList: [], // Initial Array HeartCount: 0 // Accumulate Count At Some};}, Methods: {Getrandomdis () {ix (Math.random ()> 0.5) {Return – ()} else {return + (Math.random () * 43);}}, createheart ()}}, createheart ()}}, createheart () {this.HeartCount ++; let positionArray = [{x : 100, Y: 400, ENDX: 100, Endy: 100}]; let img = new image (); // img.src = “../ ../ static / img / “+ math.ceil (math.random () * 2) +” .png “; img.src =` ../../ static / img / $ {math.ceil (Math.random ) * 5)}. PNG`; let p1 = {x: 100 + this.getrandomdis (), y: 300 + this.getrandomDis ()}; let p2 = {x: 100 + this.getrandomdis (), Y: 200 + this.Getrandomdis ()}; return new limited, x: positionArray [0] .x, y: positionArray [0] .y, endx: positionArray [0] .endx, endy: positionArray [0] .endy, onfadeout: this.removeItem, noangel: true, // Decide whether it is from small to large // Noscale: true, // decide whether to swing left and right width: 30, // Determine the size of the heart HEIGHT: 30, 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
 picture itself replaced, as for where IMG.SRC = `. ./../ static / img / $ {math.ceil () * 5)}. PNG`; this is a `` `last step` `: In html, write this   <= 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;

});
```第二步```:引入需要用到的页面
import LikeHeart from "../../../static/js/index";
```第三步```:直接复制下面这一段
 < this.heartList.length; i++) {
    if (this.heartList[i].id !== item.id) {
     array.push(this.heartList[i]);
    }
   }
   this.heartList = array;
  },
  },

  
  
 
 mounted() {
  // 飘心
  var _this = this;
  var ctx = document.getElementById("cvs").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());
  }, 700);
  document.getElementById("cvs").addEventListener(
   "click",
   function() {
    console.log(111111)
    _this.heartList.push(_this.createHeart());
   },
   false
  );
 },
};
   Tell:   
Then it is realized. This code is also a Baidu The big god, final explanation is not what I wrote. Migrate to Vue, I have changed it slightly, don’t spray.

The above is all the contents of this article, I hope to help everyone. I also hope that everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment