vue实现直播间点赞飘心效果的示例代码
5星 · 超过95%的资源 71 浏览量
2020-10-16
08:58:05
上传
评论
收藏 67KB PDF 举报 
vue实现直播间点赞飘心效果的示例代码实现直播间点赞飘心效果的示例代码
主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工
作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言：前言：
在开发公司项目的时候，遇到了直播间的一些功能，其中点赞冒泡飘心，就折腾了好久，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;
资源评论
有只风车子2023-07-28这个文件提供了一个简洁而实用的示例，让人可以快速实现直播间点赞的效果。
晕过前方2023-07-28这个示例代码易于理解和学习，即使对Vue不太熟悉的人也能轻松上手，非常适合新手入门学习。
兰若芊薇2023-07-28这个文件提供了一个实用的示例，适用于任何需要在网页中实现点赞飘心效果的项目，大大提高了用户体验。
实在想不出来了2023-07-28这个文件很有趣，通过简单的代码实现了直播间的点赞飘心效果。
神康不是狗2023-07-28这个示例代码展示了Vue如何优雅地实现直播间的点赞飘心效果，让人眼前一亮。
