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


Posted in Javascript onSeptember 20, 2019

前言:

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

示例:

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

不动就不动吧.png

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

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.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;
  }

  /**
   * 获得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";
```第三步```:直接复制下面这一段
<script>
import LikeHeart from "../../../static/js/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: 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 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: 30, //决定心的大小
    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 < 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
  );
 },
};
</script>
图片自己去换,至于在哪里换 
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
这个就是咯
 ```最后一步```:在html里,写上这个 
  <!-- 飘心 -->
  <canvas id="cvs"></canvas>

收尾:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
jQuery实现滚动效果
Nov 17 jQuery
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue微信分享插件使用方法详解
Feb 18 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 #Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 #Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 #Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 #Javascript
关于layui 下拉列表的change事件详解
Sep 20 #Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 #Javascript
layui动态绑定事件的方法
Sep 20 #Javascript
You might like
PHP上传图片、删除图片简单实例
2016/11/12 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
javascript关于继承解析
2016/05/10 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js 颜色选择插件
2017/01/23 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
社区春季防火方案
2014/06/02 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
助学金感谢信
2015/01/20 职场文书
跳高加油稿
2015/07/21 职场文书
初二数学教学反思
2016/02/17 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技