Heim > Artikel > Web-Frontend > Schneeflocken-Animationseffekt, implementiert durch natives JS
Schneeflocken-Animationseffekt, implementiert durch natives JS
- 不言Original
- 2018-05-05 11:44:201898Durchsuche
In diesem Artikel wird hauptsächlich der von nativem JS implementierte Schneeflocken-Animationseffekt vorgestellt, der Implementierungstechniken im Zusammenhang mit numerischen Javascript-Operationen und dynamischen Operationen von Seitenelementattributen umfasst.
Dieser Artikel erzählt Beispiel für natives JS. Realisierter Schneeflocken-Animationseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>www.jb51.net JS下雪动画</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.masthead {
background-color:#333;
display:block;
width:100%;
height:400px;
}
</style>
<body>
<p class="masthead"></p>
<script>
(function () {
var COUNT = 300;
var masthead = document.querySelector('.masthead');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = masthead.clientWidth;
var height = masthead.clientHeight;
var i = 0;
var active = false;
function onResize() {
width = masthead.clientWidth;
height = masthead.clientHeight;
canvas.width = width;
canvas.height = height;
ctx.fillStyle = '#FFF';
var wasActive = active;
active = width > 600;
if (!wasActive && active)
requestAnimFrame(update);
}
var Snowflake = function () {
this.x = 0;
this.y = 0;
this.vy = 0;
this.vx = 0;
this.r = 0;
this.reset();
};
Snowflake.prototype.reset = function() {
this.x = Math.random() * width;
this.y = Math.random() * -height;
this.vy = 1 + Math.random() * 3;
this.vx = 0.5 - Math.random();
this.r = 1 + Math.random() * 2;
this.o = 0.5 + Math.random() * 0.5;
};
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';
var snowflakes = [], snowflake;
for (i = 0; i < COUNT; i++) {
snowflake = new Snowflake();
snowflakes.push(snowflake);
}
function update() {
ctx.clearRect(0, 0, width, height);
if (!active)
return;
for (i = 0; i < COUNT; i++) {
snowflake = snowflakes[i];
snowflake.y += snowflake.vy;
snowflake.x += snowflake.vx;
ctx.globalAlpha = snowflake.o;
ctx.beginPath();
ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
if (snowflake.y > height) {
snowflake.reset();
}
}
requestAnimFrame(update);
}
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
onResize();
window.addEventListener('resize', onResize, false);
masthead.appendChild(canvas);
})();
</script></body></html>Verwandte Empfehlungen:
p5.js erzielt einen Feuerwerks-Blüheffekt
JS implementiert den Schiebepuzzle-Überprüfungseffekt (mit Code)
Das obige ist der detaillierte Inhalt vonSchneeflocken-Animationseffekt, implementiert durch natives JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!