js实现直播点击飘心效果

本文实例为大家分享了js实现直播点击飘心效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>直播点击飘心效果</title>
 <style type="text/css">
html, body {
 height: 100%;
 position: relative;
 width: 100%;
}
canvas {
 display: block;
 position: absolute;
 bottom: 100px;
 right: -24px;
 z-index: 20;
 cursor: pointer;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.journal-reward {
 position: absolute;
 bottom: 70px;
 right: 20px;
 height: 60px;
 width: 60px;
 display: block;
 z-index: 21;
 cursor: pointer;
}

</style>
</head>
<body>
 <img src="img/reward.png" class="journal-reward" />
<script src="jquery.min.js"></script>
<script src="flutter-hearts-zmt.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

flutter-hearts-zmt.js

! function(t, e) {
 "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.BubbleHearts = e()
}(this, function() {
 "use strict";

 function t(t, n, r) {
 var i = e.uniformDiscrete(89, 91) / 100,
 o = 1 - i,
 u = (e.uniformDiscrete(45, 60) + e.uniformDiscrete(45, 60)) / 100,
 a = function(t) {
 return t > i ? Math.max(((1 - t) / o).toFixed(2), .1) * u : u
 },
 c = e.uniformDiscrete(-30, 30),
 f = function(t) {
 return c
 },
 h = 10,
 s = n.width / 2 + e.uniformDiscrete(-h, h),
 d = (n.width - Math.sqrt(Math.pow(t.width, 2) + Math.pow(t.height, 2))) / 2 - h,
 l = e.uniformDiscrete(.8 * d, d) * (e.uniformDiscrete(0, 1) ? 1 : -1),
 m = e.uniformDiscrete(250, 400),
 w = function(t) {
 return t > i ? s : s + l * Math.sin(m * (i - t) * Math.PI / 180)
 },
 v = function(e) {
 return t.height / 2 + (n.height - t.height / 2) * e
 },
 p = e.uniformDiscrete(14, 18) / 100,
 g = function(t) {
 return t > p ? 1 : 1 - ((p - t) / p).toFixed(2)
 };
 return function(e) {
 if(!(e >= 0)) return !0;
 r.save();
 var n = a(e),
 i = f(e),
 o = w(e),
 u = v(e);
 r.translate(o, u), r.scale(n, n), r.rotate(i * Math.PI / 180), r.globalAlpha = g(e), r.drawImage(t, -t.width / 2, -t.height / 2, t.width, t.height), r.restore()
 }
 }
 var e = function(t) {
 var e = t,
 n = Math.floor,
 r = Math.random;
 return t.uniform = function(t, e) {
 return t + (e - t) * r()
 }, t.uniformDiscrete = function(t, r) {
 return t + n((r - t + 1) * e.uniform(0, 1))
 }, t
 }({}),
 n = function(t, e) {
 if(!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
 },
 r = function() {
 function t(t, e) {
 for(var n = 0; n < e.length; n++) {
  var r = e[n];
  r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
 }
 }
 return function(e, n, r) {
 return n && t(e.prototype, n), r && t(e, r), e
 }
 }(),
 i = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(t) {
 return setTimeout(t, 16)
 },
 o = function() {
 function o() {
 n(this, o);
 var t = this.canvas = document.createElement("canvas"),
  e = this.context = t.getContext("2d"),
  r = this._children = [],
  u = function n() {
  i(n), e.clearRect(0, 0, t.width, t.height);
  for(var o = 0, u = r.length; o < u;) {
  var a = r[o];
  a.render.call(null, (a.timestamp + a.duration - new Date) / a.duration) ? (r.splice(o, 1), u--) : o++
  }
  };
 i(u)
 }
 return r(o, [{
 key: "bubble",
 value: function(n) {
  var r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e.uniformDiscrete(2400, 3600),
  i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : t(n, this.canvas, this.context);
  return this._children.push({
  render: i,
  duration: r,
  timestamp: +new Date
  }), this
 }
 }]), o
 }();
 return o
});
// 图片地址在此处更换 可换成你的图片
var assets = [
 'img/1.png',
 'img/2.png',
 'img/3.png',
 'img/4.png',
 'img/5.png',
];
assets.forEach(function(src, index) {
 assets[index] = new Promise(function(resolve) {
 var img = new Image;
 img.onload = resolve.bind(null, img);
 img.src = src;
 });
});

Promise.all(assets).then(function(images) {

 var random = {
 uniform: function(min, max) {
 return min + (max - min) * Math.random();
 },
 uniformDiscrete: function(i, j) {
 return i + Math.floor((j - i + 1) * random.uniform(0, 1));
 },
 };

 var stage = new BubbleHearts();
 var canvas = stage.canvas;
 canvas.width = 170;
 canvas.height = 300;
 canvas.style['width'] = '170px';
 canvas.style['height'] = '300px';
 document.body.appendChild(canvas);
 //journal-reward 为赏桃的按钮
 document.getElementsByClassName('journal-reward')[0].addEventListener('click', function() {
 //随机飘动
 stage.bubble(images[random.uniformDiscrete(0, images.length - 1)]);

 }, false);

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现鼠标点击飘爱心效果

    本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

  • js实现直播点击飘心效果

    本文实例为大家分享了js实现直播点击飘心效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>直播点击飘心效果</title> <style type="text/css"> html, body { height: 100%; position: relative; widt

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

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

    前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

  • Android仿直播特效之点赞飘心效果

    本文实例为大家分享了Android实现点赞飘心效果的具体代码,供大家参考,具体内容如下 一.概述 老规矩先上图 好了,基本就是这个样子,录完的视频用格式工厂转换完就这个样子了,将就看吧 二.定义我们自己的Layout /** * @author 刘洋巴金 * @date 2017-4-27 * * 定义我们自己的布局 * */ public class LoveLayout extends RelativeLayout{ private Context context; private Layo

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

  • Android控件实现直播App点赞飘心动画

    Android控件实现直播App点赞飘心动画

    现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助 贝塞尔曲线 相关知识,我使用三阶贝塞尔曲线来实现轨迹动画. 运行效果 一.具体实现流程 仔细分析整个点赞过程可以发现,首先是"爱心"的出现动画,然后是"爱心"以类似气泡的形式向上运动. &quo

  • android实现直播点赞飘心动画效果

    android实现直播点赞飘心动画效果

    前段时间在写直播的时候,需要观众在看直播的时候点赞的效果,在此参照了腾讯大神写的点赞(飘心动画效果).下面是效果图: 1.自定义飘心动画的属性 在attrs.xml 中增加自定义的属性 <!-- 飘心动画自定义的属性 --> <declare-styleable name="HeartLayout"> <attr name="initX" format="dimension"/> <attr name=&

  • Android控件实现直播App特效之点赞飘心动画

    Android控件实现直播App特效之点赞飘心动画

    现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助 贝塞尔曲线 相关知识,我使用三阶贝塞尔曲线来实现轨迹动画. 运行效果 一.具体实现流程 仔细分析整个点赞过程可以发现,首先是"爱心"的出现动画,然后是"爱心"以类似气泡的形式向上运动. &quo

  • jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果.分享给大家供大家参考,具体如下: 鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图: 是不是很炫酷,直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.c

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

随机推荐