JavaScript实现瀑布动画
更新时间：2022年06月19日 09:59:22 作者：福州-司马懿
这篇文章主要为大家详细介绍了JavaScript实现瀑布动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现瀑布动画的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv=“X-UA-Compatible” content="IE-edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布(waterful)</title>
<style>
body {
background: #222;
}
</style>
</head>
<body>
<script>
//判断浏览器是否支持canvas
function isSupportCanvas() {
var canvas = document.createElement('canvas');
return !!(canvas.getContext && canvas.getContext("2d"));
}
//requestAnimationFrame会自动使用最优的帧率进行渲染,在我的浏览器上是每秒60帧
function setupRAF() {
var lastTime = 0;
var vendors = ['webkit', 'ms', 'moz', 'o'];
for(var i=0; i<vendors.length && !window.requestAnimationFrame; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"]
}
if(!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
var futureTime = currentTime + timeToCall;
var id = window.setTimeout(function() {
callback(futureTime);
}, timeToCall);
lastTime = futureTime;
return id;
}
}
if(!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}
//在给定的范围内随机选取一个整数
function randomInt(min, max) {
/*
由于位运算的操作数要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数
可用的取整方法：
(1)~~n
(2)n<<0
(3)n>>0
(4)n|0
(5)Math.floor()
(6)Math.ceil()
(7)Math.round()
值得注意的是，位运算只是去掉小数部分，并不会改变整数部分
*/
return ~~(Math.random() * (max - min) + min);
}
//在对象所表示的范围中随机选取一个数
function randomAtRange(obj) {
return Math.random() * (obj.max - obj.min) + obj.min;
}
//在对象所表示的范围中随机选取一个整数
function randomIntAtRange(obj) {
return randomInt(obj.min, obj.max);
}
//瀑布
var Waterful = function(width, height) {
var doublePI = Math.PI * 2;
var canvas;
var ctx;
//存放水粒子的数组
var particles = [];
//每帧生成或销毁粒子的数量
var particleChangeRate = width / 25;
//垂直方向上的加速度(即重力), 小数点前的0可以省略
var gravity = .15;
//水流粒子
var WaterParticle = function() {
//水流粒子宽度范围
var waterWidthRange = {min: 1, max: 20};
//水流粒子高度范围
var waterHeightRange = {min: 1, max: 45};
//水流粒子落到地上溅起的水花半径范围
var waterBubbleRadiusRange = {min: 1, max: 8};
//水花溅起的高度范围
var waterBubbleSpringRange = {min: 20, max: 30};
//色相范围
var hueRange = {min: 200, max: 220};
//饱和度范围
var saturationRange = {min: 30, max: 60};
//亮度
var lightnessRange = {min: 30, max: 60};
//拼接成一个HSLA颜色值(注意：普通函数的this指代它自己)
this.joinHSLA = function(alpha) {
return "hsla(" + [this.hue, this.saturation + "%", this.lightness + "%", alpha].join(",") + ")";
}
this.init = function() {
//水流粒子的最大半径
var waterMaxRadius = waterWidthRange.max / 2;
//水流粒子初始X坐标的范围
var xRange = {min: waterMaxRadius, max: canvas.width - waterMaxRadius};
//水流粒子宽度
this.width = randomAtRange(waterWidthRange);
//水流粒子高度
this.height = randomAtRange(waterHeightRange);
//水流粒子初始X坐标
this.x = randomAtRange(xRange);
//水流粒子初始Y坐标
this.y = -this.height;
//水流粒子垂直方向上的初始速度
this.velocity = 0;
//水流半径等于水流粒子宽度的一半
this.waterRadius = this.width / 2;
//水花半径
this.waterBubbleRadius = randomAtRange(waterBubbleRadiusRange);
//水花溅起的高度
this.waterBubbleSpring = randomAtRange(waterBubbleSpringRange);
//水流颜色
this.hue = randomIntAtRange(hueRange);
this.saturation = randomIntAtRange(saturationRange);
this.lightness = randomIntAtRange(lightnessRange);
//地板高度
this.floorHeight = canvas.height - waterBubbleSpringRange.min - this.height;
//水流粒子是否已经落地变成水花
this.isDead = false;
}
this.update = function() {
this.velocity += gravity;
this.y += this.velocity;
if(this.y > this.floorHeight) {
this.isDead = true;
}
}
this.render = function() {
if(this.isDead) {
//绘制水花
ctx.fillStyle = "hsla(" + this.hue + ", 40%, 40%, 1)";
ctx.fillStyle = this.joinHSLA(.3);
ctx.beginPath();
ctx.arc(this.x, canvas.height - this.waterBubbleSpring, this.waterBubbleRadius, 0, doublePI);
ctx.fill();
} else {
//绘制水流
ctx.strokeStyle = this.joinHSLA(.05);
ctx.lineCap = "round";
ctx.lineWidth = this.waterRadius;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y + this.height);
ctx.stroke();
}
}
this.init();
}
this.init = function() {
canvas = document.createElement("canvas");
//如果html不支持canvas的话会显示该文本，否则不显示
var textNode = document.createTextNode("Your browser can not support canvas");
canvas.appendChild(textNode);
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
//如果不支持canvas就没必要继续下去了
if(!isSupportCanvas()) {
return;
}
ctx = canvas.getContext("2d");
setupRAF();
loop();
}
function loop() {
/*
先绘制一层朦胧的白非常重要，这样可以省去很多用来填充颜色的粒子
将下面3句换成clearRect就能发现其实绘制的粒子颜色本身是很淡的，如果直接换成深的颜色就会发现空隙衔接处很不均匀
增大粒子数目可以发现颜色会变深，但是粒子数越多画面越卡，所以先绘制上一层白色的蒙版是一种非常取巧的做法
*/
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255,255,255,.06)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighter";
//添加新粒子
for(var i=0; i<particleChangeRate; i++) {
particles.push(new WaterParticle());
}
//更新渲染粒子
for(var i=0; i<particles.length; i++) {
particles[i].update();
particles[i].render();
}
//绘制水花，并删除消亡的粒子
for(var i=particles.length-1; i>=0; i--) {
if(particles[i].isDead) {
particles.splice(i, 1);
}
}
requestAnimationFrame(loop);
}
}
function init() {
var waterful = new Waterful(300, 300);
waterful.init();
}
init();
</script>
</body>
</html>效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js函数与php函数的区别,以实例形式较为简单的分析了js函数与php函数语法及应用上的不同点,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
首屏加载时间是一个衡量网页性能和用户体验的关键指标,这个问题无论是在面试中还是在项目开发中都占有极其高的权重,本文为大家整理了几种JS中优化首屏加载时间的方法,希望对大家有所帮助2024-02-02
这篇文章介绍了Echarts.js实现水滴球和海洋效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍Bootstrap框架的学习教程详解，对bootstrap框架感兴趣的朋友跟着小编一起学习吧2016-10-10
项目开发过程中遇到JSON字符串回显的情况,直接显示的话效果很丑,不方便查看,因此需要在前端页面对JSON进行格式化显示,下面这篇文章主要给大家介绍了关于前端显示json格式化的相关资料,需要的朋友可以参考下2024-03-03
javascript设计模式Constructor（构造器）模式
这篇文章主要为大家详细介绍了javascript设计模式Constructor（构造器）模式 ，感兴趣的小伙伴们可以参考一下2016-08-08
关于flash遮盖div浮动层2010-07-07
对于Web项目开发尤其是前台UI的设计而言，用户体验至关重要，因为它直接关系到项目的成败，简洁，平滑，优雅的设计永远能够受到用户的青睐。2010-04-04
这篇文章主要介绍了TypeScript let与var的区别,主要从作用域等这几个方面做详细介绍，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了js实现橱窗展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论