在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,帆布学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了。自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用
示例:
不动就不动吧. png
”“第一步“”:先在外部新建一个js文件,取名index.js(名字自己随便取)
index.js代码内容如下:/* *
* LikeHeart
* @version: 1.0.0
* @author tennylv
* @date 2018-05-24
*
*/使用严格的;
(函数(根、工厂){
如果(typeof出口==='对象'){
模块。工厂出口=();//CMD
}else if (typeof定义===δ堋?,define.amd) {
定义(工厂);//AMD
其他}{//窗口
根。LikeHeart=工厂();
}
})(这个函数(){
var LikeHeart=函数(选择){/* *
*初始化心
*
* @param{对象}
* @object。{x}数量心起点位置x
* @object。y{号码}心起点位置y
* @object。endX{号码}心结束位置x
* @object。恩迪{号码}心结束位置y
* @object。{号码}高高度
* @object。{号码}宽宽度
* @object。angelBegin{号码}左右摇摆起始角度(可为负值)
* @object。angelEnd{号码}左右摇摆结束角度
* @object。angleLeft {bool}是否起始从坐往右摇摆
* @object。noScale {bool}是否使用缩放心动画
* @object。scaleDis{号码}缩放心临界值(默认从起始位置到升高50)
* @object。noFadeOut {bool}是否使用渐隐
* @object。opacityDis{}数量渐隐心临界值(默认距离结束位置40)
* @object。速度{}数量上升速度
* @object。bezierPoint {obj}贝塞尔曲线4个点的值参考https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html
* @object。渐隐函数{}每个心渐隐之后回调
* @object。{obj}图形象片对象
*/这一点。id=opt.id;
这一点。x=opt.x;
这一点。y=opt.y;
这一点。endX=opt.endX;
这一点。恩迪=opt.endY;
这一点。orignY=opt.y;
这一点。身高=opt.height;
这一点。宽度=opt.width;
这一点。角=0;
这一点。angleLeft=opt.angleLeft;
这一点。angelBegin=opt.angelBegin | |(-20 +兰德(1、2);
这一点。angelEnd=opt.angelEnd | |(20 +兰德(1、4));
这一点。规模=0;
这一点。scaleDis=opt.scaleDis | | 50;
这一点。opacityDis=opt.opacityDis | | 40;
这一点。noScale=opt.noScale;
这一点。noAngel=opt.noAngel;
这一点。不透明度=1;
这一点。速度=opt.speed | | 0.0027;
这一点。bezierPoint=opt.bezierPoint;
这一点。bezierDis=0;
这一点。onFadeOut=opt.onFadeOut;
这一点。IMG=opt.image;
这一点。移动=function (ctx) {
如果这一点。不透明度===0){
这一点。onFadeOut,,this.onFadeOut(这个);
}
这一点。y=getBezierLine .yt(这);
这一点。x=getBezierLine .xt(这);
这一点。角=rangeAngle(这个);
这一点。规模=getFScale(这个);
这一点。不透明度=getFAlpha(这个);
ctx.save ();
ctx.translate(这一点。x, this.y);
ctx.rotate (this.angle * (Math.PI/180));
ctx.scale(这一点。规模,this.scale);
ctx。globalAlpha=this.opacity;
ctx.drawImage(这一点。IMG,——(this.IMG.width/2)——(this.IMG.height/2)。宽度,this.height);
ctx.restore ();
};
};/* *
*计算心左右摇摆的方法
*/函数rangeAngle(心){
如果(heart.noAngel) {
返回0;
}
让_angle=heart.angle;//心介于(开始、结束)之间不断变化角度
如果(_angle祝辞=heart.angelEnd) {//角度不断变小,向左摇摆
的心。angleLeft=false;
}else if (_angle & lt;=heart.angelBegin) {//角度不断变大,向又摇摆
的心。angleLeft=true;
}//动态改变角度
如果(heart.angleLeft) {
_angle=_angle + 1;
其他}{
_angle=_angle - 1;
}
返回_angle;
}/* *
*计算缩放角度的方法
*/函数getFScale(心){
如果(heart.noScale) {
返回1;
}
让_scale=heart.scale;//随着距离起始点的距离增加,规模不断变大
让说=rignY - heart.y;
_scale=(dis/heart.scaleDis);//当大于设置的阈值时变成1
如果(dis祝辞=heart.scaleDis) {
_scale=1;
}
返回_scale;
}/* *
*计算透明度的方法
*/函数getFAlpha(心){
让_opacity=heart.opacity;
让说= - heart.endY;
如果(dis & lt;=heart.opacityDis) {
_opacity=数学。马克斯((dis/heart.opacityDis), 0);
其他}{
_opacity=1;
}
返回_opacity;
}/* *
*获得min-max的随机整数
*/函数兰德(最小,最大){
返回Math.floor (math . random() *(最大值-最小值+ 1))+分钟;
}/* *
*获得贝塞尔曲线路径
*一共4个点
*/函数getBezierLine(心){
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残雪=3 * (p1。x - p0.x),
bx=3 * (p2。x - p1.x) -残雪,
ax=p3。x - p0。x - cx - bx,
cy=3 * (p1。y - p0.y),=3 * (p2。y - p1.y) - cy,
唉=p3。y (p0。y - cy -,
xt=ax * (t * t * t) + bx * * t (t) +残雪* t + p0.x,
欧美=ay * (t * t * t) + * * t (t) + cy * t + p0.y;
的心。bezierDis +=heart.speed;
返回{
xt: xt,
欧美欧美
}
}
返回LikeHeart;
});
”“第二步“”:引入需要用到的页面
从“. ./. ./. ./进口LikeHeart静态/js/指数”;
”“第三步“”:直接复制下面这一段
& lt; script>
从“. ./. ./. ./进口LikeHeart静态/js/指数”;
出口默认{
道具:“ClassTimePlayer”、“videoUrl”,
数据(){
返回{
宽度:175//初始宽度
身高:400//初始高度
heartList:[],//初始数组
heartCount: 0//累加计数初始值
};
}，
方法:{
getRandomDis () {
如果(math . random()在0.5){
返回(math . random () * 43);
其他}{
返回+ (math . random () * 43);
}
}，
createHeart () {
this.heartCount + +;
让positionArray=[
{
x: 100,
y: 400,
endX: 100,
恩迪:100
}
];
让img=新形象();//img。src=" https://www.yisu.com/static/img/" + Math.ceil (math . random() * 2) +“中将”;
img。src=https://www.yisu.com/zixun/static/img/$ {Math.ceil (math . random () * 5)} . png”;
让p1={
x: 100 + this.getRandomDis (),
y: 300 + this.getRandomDis ()
};
让p2={
x: 100 + this.getRandomDis (),
y: 200 + this.getRandomDis ()
};
返回新LikeHeart ({
id: this.heartCount,
x: positionArray[0]以下方式,
y: positionArray [0] .y,
endX: positionArray [0] .endX,
恩迪:positionArray [0] .endY,
null
null
null
null
null
null
null
null
null
