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 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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截取中文字符串的问题
2006/07/12 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue实现抖音时间转盘
2019/09/08 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python使用pymysql小技巧
2017/06/04 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
财务稽核岗位职责
2015/04/13 职场文书
未婚证明范本
2015/06/15 职场文书