0
私のアニメーションにはちょっと残っていますが、私は真偽を設定して、ページの下部にある紙吹雪を一定の高さに落ち着かせていました。これを行うには... JSではなく新しいことです。HTML5キャンバスのアニメーションが下に落ち着く
私はだから我々は何をする必要があるか粒子が下落しているとして、我々はことを整定条件に追加することである
var confettiSettle = true;
...
if (confettiSettle == true){
...
}
(function() {
var canvas;
var ctx;
var confettiHandler;
//canvas dimensions
var W;
var H;
var mp = 150; //max particles
var particles = [];
var angle = 0;
var tiltAngle = 0;
var confettiActive = true;
var confettiSettle = true;
var animationComplete = true;
var deactivationTimerHandler;
var reactivationTimerHandler;
var animationHandler;
var colorOptions = ["DodgerBlue", "OliveDrab", "Gold", "pink", "SlateBlue", "lightblue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"];
$(window).resize(function() {
canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
});
$(document).ready(function() {
$('#stopButton').click(DeactivateConfetti);
$('#startButton').click(RestartConfetti);
$('#settleButton').click(SettleConfetti);
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
InitializeConfetti();
});
function InitializeConfetti() {
var currentColorIndex = 0;
var colorCount = 0;
particles = [];
animationComplete = false;
for (var i = 0; i < mp; i++) {
if (colorCount >= 10) {
colorCount = 0;
currentColorIndex++;
if (currentColorIndex >= colorOptions.length) {
currentColorIndex = 0;
}
}
colorCount++;
var particleColor = colorOptions[currentColorIndex];
particles.push({
x: Math.random() * W, //x-coordinate
y: (Math.random() * H) - H, //y-coordinate
r: randomFromTo(10, 30), //radius
d: (Math.random() * mp) + 10, //density
color: particleColor,
tilt: Math.floor(Math.random() * 10) - 10,
tiltAngleIncremental: (Math.random() * 0.07) + .05,
tiltAngle: 0
});
}
StartConfetti();
}
function drawConfetti(particle) {
ctx.beginPath();
ctx.lineWidth = particle.r/2;
ctx.strokeStyle = particle.color;
ctx.moveTo(particle.x + particle.tilt + (particle.r/4), particle.y);
ctx.lineTo(particle.x + particle.tilt, particle.y + particle.tilt + (particle.r/4));
return ctx.stroke();
};
function draw() {
ctx.clearRect(0, 0, W, H);
var results = [];
for (var i = 0; i < mp; i++) {
(function(j) {
results.push(drawConfetti(particles[j]));
})(i);
}
update();
return results;
}
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function update() {
var remainingFlakes = 0;
angle += 0.01;
tiltAngle += 0.1;
for (var i = 0; i < mp; i++) {
if (animationComplete) return;
var p = particles[i];
p.tiltAngle += p.tiltAngleIncremental;
if (!confettiActive && p.y < -15) {
p.y = H + 100;
} else {
p.y += (Math.cos(angle + p.d) + 3 + p.r/2)/5;
}
p.x += Math.sin(angle);
p.tilt = (Math.sin(p.tiltAngle - (i/3))) * 15;
if (p.y <= H) {
remainingFlakes++;
}
if ((p.x > W + 20 || p.x < -20 || p.y > H) && confettiActive) {
if (i % 5 > 0 || i % 2 == 0) //66.67% of the flakes
{
particles[i] = {
x: Math.random() * W,
y: -10,
r: p.r,
d: p.d,
color: p.color,
tilt: Math.floor(Math.random() * 10) - 10,
tiltAngle: p.tiltAngle,
tiltAngleIncremental: p.tiltAngleIncremental
};
} else {
if (Math.sin(angle) > 0) {
//Enter from the left
particles[i] = {
x: -5,
y: Math.random() * H,
r: p.r,
d: p.d,
color: p.color,
tilt: Math.floor(Math.random() * 10) - 10,
tiltAngleIncremental: p.tiltAngleIncremental
};
} else {
//Enter from the right
particles[i] = {
x: W + 5,
y: Math.random() * H,
r: p.r,
d: p.d,
color: p.color,
tilt: Math.floor(Math.random() * 10) - 10,
tiltAngleIncremental: p.tiltAngleIncremental
};
}
}
}
}
if (remainingFlakes === 0) {
StopConfetti();
}
}
function StartConfetti() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
(function animloop() {
if (animationComplete) return null;
animationHandler = requestAnimFrame(animloop);
return draw();
})();
}
function ClearTimers() {
clearTimeout(reactivationTimerHandler);
clearTimeout(animationHandler);
}
function DeactivateConfetti() {
confettiActive = false;
ClearTimers();
console.log('deactivate');
}
function StopConfetti() {
animationComplete = true;
if (ctx == undefined) return;
ctx.clearRect(0, 0, W, H);
}
function RestartConfetti() {
ClearTimers();
StopConfetti();
reactivationTimerHandler = setTimeout(function() {
confettiActive = true;
animationComplete = false;
InitializeConfetti();
}, 100);
}
function SettleConfetti() {
\t \t
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1000/60);
};
})();
})();canvas {
display: block;
position: relative;
z-index: 1;
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
if（confettiSettle == 'true'） 'ブール変数を直接取る方が良いif（confettiSettle）'あるいはどんな場合でも比較したい場合は（親しみやすいまで）試してみてください'if（confettiSettle == true）'は引用符がないことを通知する（文字列ではないので） – arhak
Okは、感謝の仲間をしてアニメーションをページの一番下には幸運がありません。 – James
私は関数draw（）{ctx.clearRect（0、0、W、H-20）を修正しました。どのような種類の底に落ち着くが、うまくいきません。 – James