仿照抖音直播点击飘心效果

/**
 * @ProjectName flutter-hearts-zmt
 * @Version 0.0.0
 * @Author Jiangshilong(https://github.com/JSL8023)
 * @Update 2018-03-22 17:24 pm 
 */

! 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);

});

演示地址：http://demo.jb51.net/js/2018/html5_canvas_dzdh/

原文地址：https://blog.csdn.net/qq_36591333/article/details/79959687