vue实现直播间点赞飘心效果的示例代码
前言：
成都创新互联成立于2013年，是专业互联网技术服务公司，拥有项目做网站、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元城区做网站,已为上家服务,为城区各地企业和个人服务,联系电话:18980820575
在开发公司项目的时候，遇到了直播间的一些功能，其中点赞冒泡飘心，就折腾了好久，canvas学的不好，自己写不来，百度找了一堆都是js原生写法，迁移到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";
```第三步```：直接复制下面这一段
图片自己去换，至于在哪里换
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
这个就是咯
```最后一步```：在html里，写上这个
收尾：
然后就实现了。这个代码我也是百度的某个大神的，最后说明下不是我写的哈。迁移到vue中稍微修改了一下，勿喷。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前文章：vue实现直播间点赞飘心效果的示例代码
转载来源：http://ybzwz.com/article/isggpi.html
