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

2020-06-12 21:05:07易采站长站整理

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),