超酷!!HTML5 Canvas 水流样式 Loading 动画
今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果。
效果预览
代码实现
HTML代码
接下来我们讲讲实现这个加载动画的大致思路和实现过程。
首先在页面上定义一个canvas
元素,用来承载这个Loading动画的画布。
<canvas id='canvas'></canvas>
接下拉需要定义一个SVG滤镜,这个滤镜用来渲染Loading圈圈粒子化的效果。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
CSS代码
这里我们先不谈页面中其他元素的样式,我们的重点是为canvas
元素指定相应的svg滤镜:
#canvas {
margin: 0px auto;
display: block;
filter: url("#shadowed-goo");
}
JavaScript代码
然后用JavaScript代码实现Loading加载动画。这里用到了canvas
的2d动画绘制对象:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
getContext()
方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
这个动画的核心是动态画一段弧线,代码如下:
ctx.fillStyle = "rgba(255,255,255," + this.al + ")";
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fill();
下面是完整的JS代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p = [];
var particle = [];
var angle = Math.PI/4;
canvas.width = 600;
canvas.height = 600;
var width = canvas.width;
var height = canvas.height;
function getRandomInt(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
function retinaReady() {
var pixelRatio = window.devicePixelRatio || 1;
var backingStore = ctx.webkitBackingStorePixelRatio || 1;
window.ratio = pixelRatio / backingStore; // public var
if (pixelRatio !== backingStore) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + "px";
canvas.style.height = oldHeight + "px";
ctx.scale(window.ratio, window.ratio);
}
}
retinaReady();
function run(a) {
var r = 140;
var x = r * Math.sin(a) + width / 2;
var y = r * Math.cos(a) + ((height / 2)-80);
var p;
p = new Particle(x, y);
particle.push(p);
}
function Particle(x, y) {
this.x = x;
this.y = y;
this.r = getRandomInt(10, 16);
this.v = {
x: 0,
y: 0
};
this.a = {
x: 0,
y: 0
};
this.al = 1;
}
Particle.prototype.update = function() {
this.a.x = getRandomInt(-0.001, 0.001);
this.a.y = getRandomInt(0.01, 0.02);
this.v.x += this.a.x;
this.v.y += this.a.y;
this.x += this.v.x;
this.y += this.v.y;
if (this.r >= 0.01) {
this.r -= 0.2;
this.al -= 0.001;
} else {
this.r = 0;
this.al = 0;
}
};
Particle.prototype.draw = function() {
ctx.fillStyle = "rgba(255,255,255," + this.al + ")";
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fill();
};
function animate() {
ctx.clearRect(0, 0, width, height);
run(angle);
requestAnimationFrame(animate);
for (var j = 0; j < particle.length; j++) {
var p = particle[j];
p.update();
p.draw();
}
if (angle <= 2 * Math.PI) {
angle += 0.04;
} else {
angle = 0;
}
}
animate();
到这里为止,这个粒子流体状的Loading加载动画就完成了,文章最后也将源码献给大家。
源码下载
完整的代码我已经整理出了一个源码包,供大家下载学习。
关注我的公众号“前端技术官”,回复关键字:3005,即可获取源码下载链接。
代码仅供参考和学习,请不要用于商业用途。
最后总结
这个Loading动画我们主要用到了SVG滤镜知识,以及HTML5 Canvas的2d动画绘制对象,结合简单的数学三角函数组合,如果你觉得不错,点个赞吧!
超酷!!HTML5 Canvas 水流样式 Loading 动画的更多相关文章
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
- 分享9款最新超酷HTML5/CSS3应用插件
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要 ...
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- 【HTML】html5 canvas全屏烟花动画特效
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 7款超酷HTML5 3D动画精选应用及源码
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 基于HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...
随机推荐
- MATLAB奔溃仅左上角显示关闭界面X
一 问题描述 今天在MATLAB调试图像增强程序时,忽然间点了MATLAB向下还原,奇怪的一幕发生了,电脑左上角仅显示关闭图标X.我就搜了MATLAB中文论坛(https://www.ilovema ...
- select 中的timeout
1. select 相关man 资料 /* According to POSIX.1-2001 */ #include <sys/select.h> /* According to ear ...
- 一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制?
可以有多个类,但只能有一个public的类,并且public的类名必须与文件的主文件名相同. 包含多个类的Java源文件编译之后会生成多个.class文件.
- Springmvc入门基础(四) ---参数绑定
1.默认支持的参数类型 处理器形参中添加如下类型的参数处理适配器会默认识别并进行赋值. 除了ModelAndView以外,还可以使用Model来向页面传递数据, Model是一个接口,在参数里直接声明 ...
- Mock 或 Stub 有什么区别?
存根 一个有助于运行测试的虚拟对象. 在某些可以硬编码的条件下提供固定行为. 永远不会测试存根的任何其他行为. 例如,对于空堆栈,您可以创建一个只为 empty()方法返回 true 的存根.因此, ...
- 什么是 spring?
Spring 是个 java 企业级应用的开源开发框架.Spring 主要用来开发 Java 应用, 但是有些扩展是针对构建 J2EE 平台的 web 应用.Spring 框架目标是简化 Java 企 ...
- Django中间件 (middleware)
中间件是处理django的请求和响应的框架级别的钩子,本质是一个类(直白一点中间件是帮助我们在视图函数执行之前和执行之后都可以做一些额外的操作) 由于其影响的是全局,所以需要谨慎使用,使用不当会影响性 ...
- 前后端分离项目部署到Linux虚拟机
最近做了一个springboot+vue的前后端分离项目,把它部署到Linux虚拟机上.下面是我的步骤和遇到的问题,需要的朋友可以看下(看的时候注意要全部看完到底部,因为我习惯是把我遇到的问题放到最后 ...
- idea常见设置一
1.顶部执行栏调整 原: 设置:勾选view==>toolbar 后: 这个一看其实没有什么太大的作用,但是你看这个按钮 这个按钮就是File==>Settings,这样会稍微方便点,只要 ...
- C++ | 虚拟地址空间
在 x86 32位系统下,进程的虚拟地址空间为 232 (4G)大小,其中在windows系统下4G地址空间中0x00000000-0x7FFFFFFF 是用户地址空间,0x80000000-0xFF ...