溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript如何實現瀑布動畫”，在日常操作中，相信很多人在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>效果：
到此，關于“JavaScript如何實現瀑布動畫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
