JavaScript實(shí)現(xiàn)瀑布動(dòng)畫

更新時(shí)間：2022年06月19日 09:59:22 作者：福州-司馬懿

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)瀑布動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

<!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會(huì)自動(dòng)使用最優(yōu)的幀率進(jìn)行渲染,在我的瀏覽器上是每秒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);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? ? ? //在給定的范圍內(nèi)隨機(jī)選取一個(gè)整數(shù)
? ? ? ? ? ? function randomInt(min, max) {
? ? ? ? ? ? ? ? /*
? ? ? ? ? ? ? ? 由于位運(yùn)算的操作數(shù)要求是整數(shù)，其結(jié)果也是整數(shù)，所以經(jīng)過位運(yùn)算的都會(huì)自動(dòng)變成整數(shù)
? ? ? ? ? ? ? ? 可用的取整方法：
? ? ? ? ? ? ? ? (1)~~n
? ? ? ? ? ? ? ? (2)n<<0
? ? ? ? ? ? ? ? (3)n>>0
? ? ? ? ? ? ? ? (4)n|0
? ? ? ? ? ? ? ? (5)Math.floor()
? ? ? ? ? ? ? ? (6)Math.ceil()
? ? ? ? ? ? ? ? (7)Math.round()
? ? ? ? ? ? ? ? 值得注意的是，位運(yùn)算只是去掉小數(shù)部分，并不會(huì)改變整數(shù)部分
? ? ? ? ? ? ? ? */
? ? ? ? ? ? ? ? return ~~(Math.random() * (max - min) + min);
? ? ? ? ? ? }

? ? ? ? ? ? //在對(duì)象所表示的范圍中隨機(jī)選取一個(gè)數(shù)
? ? ? ? ? ? function randomAtRange(obj) {
? ? ? ? ? ? ? ? return Math.random() * (obj.max - obj.min) + obj.min;
? ? ? ? ? ? }

? ? ? ? ? ? //在對(duì)象所表示的范圍中隨機(jī)選取一個(gè)整數(shù)
? ? ? ? ? ? function randomIntAtRange(obj) {
? ? ? ? ? ? ? ? return randomInt(obj.min, obj.max);
? ? ? ? ? ? }

? ? ? ? ? ? //瀑布
? ? ? ? ? ? var Waterful = function(width, height) {
? ? ? ? ? ? ? ? var doublePI = Math.PI * 2;

? ? ? ? ? ? ? ? var canvas;
? ? ? ? ? ? ? ? var ctx;

? ? ? ? ? ? ? ? //存放水粒子的數(shù)組
? ? ? ? ? ? ? ? var particles = [];
? ? ? ? ? ? ? ? //每幀生成或銷毀粒子的數(shù)量
? ? ? ? ? ? ? ? var particleChangeRate = width / 25;
? ? ? ? ? ? ? ? //垂直方向上的加速度(即重力), 小數(shù)點(diǎn)前的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};

? ? ? ? ? ? ? ? ? ? //拼接成一個(gè)HSLA顏色值(注意：普通函數(shù)的this指代它自己)
? ? ? ? ? ? ? ? ? ? this.joinHSLA = function(alpha) {
? ? ? ? ? ? ? ? ? ? ? ? return "hsla(" + [this.hue, this.saturation + "%", this.lightness + "%", alpha].join(",") + ")";
? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? this.init = function() { ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? //水流粒子的最大半徑
? ? ? ? ? ? ? ? ? ? ? ? var waterMaxRadius = waterWidthRange.max / 2;
? ? ? ? ? ? ? ? ? ? ? ? //水流粒子初始X坐標(biāo)的范圍
? ? ? ? ? ? ? ? ? ? ? ? var xRange = {min: waterMaxRadius, max: canvas.width - waterMaxRadius};

? ? ? ? ? ? ? ? ? ? ? ? //水流粒子寬度
? ? ? ? ? ? ? ? ? ? ? ? this.width = randomAtRange(waterWidthRange);
? ? ? ? ? ? ? ? ? ? ? ? //水流粒子高度
? ? ? ? ? ? ? ? ? ? ? ? this.height = randomAtRange(waterHeightRange);
? ? ? ? ? ? ? ? ? ? ? ? //水流粒子初始X坐標(biāo)
? ? ? ? ? ? ? ? ? ? ? ? this.x = randomAtRange(xRange);
? ? ? ? ? ? ? ? ? ? ? ? //水流粒子初始Y坐標(biāo)
? ? ? ? ? ? ? ? ? ? ? ? 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;?

? ? ? ? ? ? ? ? ? ? ? ? //水流粒子是否已經(jīng)落地變成水花
? ? ? ? ? ? ? ? ? ? ? ? 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的話會(huì)顯示該文本，否則不顯示
? ? ? ? ? ? ? ? ? ? var textNode = document.createTextNode("Your browser can not support canvas");
? ? ? ? ? ? ? ? ? ? canvas.appendChild(textNode);
? ? ? ? ? ? ? ? ? ? document.body.appendChild(canvas);
? ? ? ? ? ? ? ? ? ? canvas.width = width;
? ? ? ? ? ? ? ? ? ? canvas.height = height;
? ? ? ? ? ? ? ? ? ? //如果不支持canvas就沒必要繼續(xù)下去了
? ? ? ? ? ? ? ? ? ? if(!isSupportCanvas()) {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ctx = canvas.getContext("2d");
? ? ? ? ? ? ? ? ? ? setupRAF();
? ? ? ? ? ? ? ? ? ? loop();
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? function loop() {
? ? ? ? ? ? ? ? ? ? /*
? ? ? ? ? ? ? ? ? ? 先繪制一層朦朧的白非常重要，這樣可以省去很多用來填充顏色的粒子
? ? ? ? ? ? ? ? ? ? 將下面3句換成clearRect就能發(fā)現(xiàn)其實(shí)繪制的粒子顏色本身是很淡的，如果直接換成深的顏色就會(huì)發(fā)現(xiàn)空隙銜接處很不均勻
? ? ? ? ? ? ? ? ? ? 增大粒子數(shù)目可以發(fā)現(xiàn)顏色會(huì)變深，但是粒子數(shù)越多畫面越卡，所以先繪制上一層白色的蒙版是一種非常取巧的做法
? ? ? ? ? ? ? ? ? ? */
? ? ? ? ? ? ? ? ? ? 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>

效果：