炫酷的 loding效果（canvas）

改成vue里使用 

 

<template>
  <div class="myLoading">
    <div :id="$route.name" class="inner-loading"></div>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLoading();
    });
  },
  methods: {
    initLoading() {
      var $ = {};
      $.Particle = function (opt) {
        this.radius = 7;
        this.x = opt.x;
        this.y = opt.y;
        this.angle = opt.angle;
        this.speed = opt.speed;
        this.accel = opt.accel;
        this.decay = 0.01;
        this.life = 1;
      };

      $.Particle.prototype.step = function (i) {
        this.speed += this.accel;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;
        this.angle += $.PI / 64;
        this.accel *= 1.01;
        this.life -= this.decay;

        if (this.life <= 0) {
          $.particles.splice(i, 1);
        }
      };

      $.Particle.prototype.draw = function (i) {
        $.ctx.fillStyle = $.ctx.strokeStyle =
          'hsla(' +
          ($.tick + this.life * 120) +
          ', 100%, 60%, ' +
          this.life +
          ')';
        $.ctx.beginPath();
        if ($.particles[i - 1]) {
          $.ctx.moveTo(this.x, this.y);
          $.ctx.lineTo($.particles[i - 1].x, $.particles[i - 1].y);
        }
        $.ctx.stroke();

        $.ctx.beginPath();
        $.ctx.arc(
          this.x,
          this.y,
          Math.max(0.001, this.life * this.radius),
          0,
          $.TWO_PI
        );
        $.ctx.fill();

        var size = Math.random() * 1.25;
        $.ctx.fillRect(
          ~~(this.x + (Math.random() - 0.5) * 35 * this.life),
          ~~(this.y + (Math.random() - 0.5) * 35 * this.life),
          size,
          size
        );
      };

      $.step = function () {
        $.particles.push(
          new $.Particle({
            x: $.width / 2 + (Math.cos($.tick / 20) * $.min) / 2,
            y: $.height / 2 + (Math.sin($.tick / 20) * $.min) / 2,
            angle: $.globalRotation + $.globalAngle,
            speed: 0,
            accel: 0.01
          })
        );

        $.particles.forEach(function (elem, index) {
          elem.step(index);
        });

        $.globalRotation += $.PI / 6;
        $.globalAngle += $.PI / 6;
      };

      $.draw = function () {
        $.ctx.clearRect(0, 0, $.width, $.height);

        $.particles.forEach(function (elem, index) {
          elem.draw(index);
        });
      };

      $.init = () => {
        $.canvas = document.createElement('canvas'); // 创建一个'canvas'节点
        $.ctx = $.canvas.getContext('2d');
        $.width = 300;
        $.height = 300;
        $.canvas.width = $.width * window.devicePixelRatio;
        $.canvas.height = $.height * window.devicePixelRatio;
        $.canvas.style.width = $.width + 'px';
        $.canvas.style.height = $.height + 'px';
        $.canvas.style.position = 'absolute';
        $.canvas.style.top = '346px';
        $.canvas.style.left = '810px';
        $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        $.min = $.width * 0.5;
        $.particles = [];
        $.globalAngle = 0;
        $.globalRotation = 0;
        $.tick = 0;
        $.PI = Math.PI;
        $.TWO_PI = $.PI * 2;
        $.ctx.globalCompositeOperation = 'lighter';
        const El = document.getElementById(this.$route.name);
        El.appendChild($.canvas);
        $.loop();
      };

      $.loop = function () {
        requestAnimationFrame($.loop);
        $.step();
        $.draw();
        $.tick++;
      };

      $.init();
    }
  }
};
</script>

<style lang="scss" scoped>
.myLoading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 200;
  .inner-loading {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 3000;
    position: relative;
  }
}
</style>

原文：几种炫酷的加载动画_weixin_43844392的博客-CSDN博客_vue 炫酷加载动画动画一// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { ba...https://blog.csdn.net/weixin_43844392/article/details/100988255