炫酷的 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

炫酷的 loding效果（canvas）相关推荐

android 炫酷进度条,Android打造炫酷进度条效果
本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 HorizontalProgressbarWithProgress的代码 import android.conte ...
iOS动画开发之五——炫酷的粒子效果
iOS动画开发之五--炫酷的粒子效果在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
android svg动画框架,Android实现炫酷SVG动画效果
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互 ...
纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html 滤镜制作线条,PS滤镜简单制作炫酷的线条效果
今天为大家分享利用PS滤镜制作炫酷线条效果方法,教程很不错,值得大家学习,推荐过来,喜欢的朋友快快来学习吧! 步骤启动PS软件 ctrl+n新建一空白文档,尺寸为 800x600px,背景色设置为黑 ...
Unity 之 ShaderGraph 实现超级炫酷的溶解效果入门级教程
Unity 之 ShaderGraph 实现超级炫酷的溶解效果入门级教程前言一,效果展示二,原理介绍三,实现效果四,使用示例五,完整图示前言若你的工程还没有进行基础配置,请查看我的博文 ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...

炫酷的 loding效果（canvas）

炫酷的 loding效果（canvas）相关推荐

最新文章

热门文章