博客

第一步：在vue项目里首先起一个叫flutter-hearts-zmt.js的js文件

/**
 * @ProjectName flutter-hearts-zmt
 * @Version 0.0.0
 * @Author 李港豪
 * @Update 2022-01-24 17:24 pm
 */
import 'jquery'
!(function(t, e) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = e() : typeof define === 'function' && define.amd ? define(e) : t.BubbleHearts = e()
}(window, function() {
  'use strict'

  function t(t, n, r) {
    var i = e.uniformDiscrete(89, 91) / 100
    var o = 1 - i
    var u = (e.uniformDiscrete(45, 60) + e.uniformDiscrete(45, 60)) / 100
    var a = function(t) {
      return t > i ? Math.max(((1 - t) / o).toFixed(2), 0.1) * u : u
    }
    var c = e.uniformDiscrete(-30, 30)
    var f = function(t) {
      return c
    }
    var h = 10
    var s = n.width / 2 + e.uniformDiscrete(-h, h)
    var d = (n.width - Math.sqrt(Math.pow(t.width, 2) + Math.pow(t.height, 2))) / 2 - h
    var l = e.uniformDiscrete(0.8 * d, d) * (e.uniformDiscrete(0, 1) ? 1 : -1)
    var m = e.uniformDiscrete(250, 400)
    var w = function(t) {
      return t > i ? s : s + l * Math.sin(m * (i - t) * Math.PI / 180)
    }
    var v = function(e) {
      return t.height / 2 + (n.height - t.height / 2) * e
    }
    var p = e.uniformDiscrete(14, 18) / 100
    var 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)
      var i = f(e)
      var o = w(e)
      var 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
    var n = Math.floor
    var 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
  }({}))
  var n = function(t, e) {
    if (!(t instanceof e)) throw new TypeError('Cannot call a class as a function')
  }
  var 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
    }
  }())
  var i = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(t) {
    return setTimeout(t, 16)
  }
  var o = (function() {
    function o() {
      n(this, o)
      var t = this.canvas = document.createElement('canvas')
      var e = this.context = t.getContext('2d')
      var r = this._children = []
      var 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)
        var 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
}))

第二步：html部分

// 必要的，用来显示生成的飘动的小心
 <canvas id="cvs"></canvas>

第三步：canvas 样式部分,不写样式的话点赞将看不见漂浮

canvas {
  display: block;
  position: absolute;
  bottom: 100px;
  right: -24px;
  z-index: 20;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

第四步，要有需要的vue文件里边引入

import '@/common/flutter-hearts-zmt'

第五步：methods部分

//自定义的点赞按钮触发，按钮位置随意，会自动寻找按钮位置并且在上方飘动小心
    fabulous() {
      const assets = [ // 点赞飘出来的图片，可以修改
        'http://v.bootstrapmb.com/2019/9/g1ka86005/img/1.png',
        'http://v.bootstrapmb.com/2019/9/g1ka86005/img/2.png',
        'http://v.bootstrapmb.com/2019/9/g1ka86005/img/3.png',
        'http://v.bootstrapmb.com/2019/9/g1ka86005/img/4.png',
        'http://v.bootstrapmb.com/2019/9/g1ka86005/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 为赏桃的按钮
        // 随机飘动
        stage.bubble(images[random.uniformDiscrete(0, images.length - 1)])
        // 垂直向上飘动效果
        //    	let image = images[random.uniformDiscrete(0, images.length - 1)];
        //    	stage.bubble(image, 3000, function(lifespan) {
        //    		if(lifespan >= 0) {
        //    			stage.context.drawImage(
        //    				image,
        //    				(canvas.width - image.width) / 2,
        //    				(canvas.height - image.height) * lifespan,
        //    				image.width,
        //    				image.height
        //    			);
        //    		} else {
        //    			return true;
        //    		}
        //    	});

      })
    }

备注：1、在网上查到了很多，没有一个管用的，都不知道是在哪直接复制下来自己也不验证就传的，这是我真实项目总运用的，并且改成了绝对管用

2、如果在使用中看不见漂浮并且没报错的情况下请检查图片是否可以访问