js如何实现直播点击飘心效果的方法

发布时间：2020-08-20 09:45:58 作者：小新
来源：亿速云阅读：217

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 &#63; module.exports = e() : "function" == typeof define && define.amd &#63; 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 &#63; 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) &#63; 1 : -1),
  m = e.uniformDiscrete(250, 400),
  w = function(t) {
  return t > i &#63; 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 &#63; 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) &#63; (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] &#63; arguments[1] : e.uniformDiscrete(2400, 3600),
   i = arguments.length > 2 && void 0 !== arguments[2] &#63; 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);
 
});

感谢各位的阅读！看完上述内容，你们对js如何实现直播点击飘心效果的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。

js如何实现直播点击飘心效果的方法

相关阅读