html 文字下雨效果,html5 canvas下雨雨滴动画特效
特效描述：html5 canvas下雨 雨滴动画特效。html5 canvas绘制下雨雨滴打在地面动画特效。
代码结构
1. 引入JS
2. HTML代码
var two = new Two({
type: Two.Types.canvas,
fullscreen: true,
autostart: true
}).appendTo(document.body);
two.renderer.domElement.style.background = '#aaa';
var ground = two.makeGroup();
var angle = 0;
var rain = new Array(150);
rain.next = function() {
var drop = rain[rain.index];
rain.index = (rain.index + 1) % rain.length;
return drop;
};
rain.index = 0;
var ripples = new Array(250);
ripples.next = function() {
var ripple = ripples[ripples.index];
ripples.index = (ripples.index + 1) % ripples.length;
return ripple;
};
ripples.index = 0;
for (var i = 0; i < ripples.length; i++) {
var ripple = makeRipple();
ripples[i] = ripple;
if (ripple.child) {
ground.add(ripple.child);
}
if (i < rain.length) {
var drop = makeDrop();
rain[i] = drop;
}
}
var pouring = false;
ground.add(ripples);
two.add(rain);
window.addEventListener('mousedown', function(e) {
pouring = true;
}, false);
window.addEventListener('mousemove', function(e) {
ground.scale.y = 0.33 * e.clientY / two.height + 0.33;
angle = Math.PI * (e.clientX / two.width) / 2 - Math.PI / 4;
}, false);
window.addEventListener('mouseup', function(e) {
pouring = false;
}, false);
window.addEventListener('touchstart', function(e) {
e.preventDefault();
e.stopPropagation();
pouring = true;
return false;
}, false);
window.addEventListener('touchend', function(e) {
e.preventDefault();
e.stopPropagation();
pouring = false;
return false;
}, false);
window.addEventListener('click', function(e) {
var ripple = ripples.next();
ripple.start(e.clientX, e.clientY);
}, false);
ground.scale = new Two.Vector(1, 0.4);
two.bind('update', function(frameCount) {
TWEEN.update();
if (pouring && !(frameCount % 1)) {
rain.next().start();
ripples.next().start();
} else if (!(frameCount % 5)) {
rain.next().start();
}
});
function makeDrop(i) {
var seed = Math.random();
var drop = two.makeLine(0, 0, 0, 0);
drop.visible = false;
drop.cap = 'round';
drop.noFill().stroke = 'white';
drop.tweens = {
i: new TWEEN.Tween(drop.vertices[0])
.easing(TWEEN.Easing.Sinusoidal.In)
.onComplete(function() {
ripples.next().start(drop.vertices[0].x, drop.vertices[0].y);
}),
o: new TWEEN.Tween(drop.vertices[1])
.delay(seed * 100)
.easing(TWEEN.Easing.Sinusoidal.In)
.onComplete(function() {
drop.visible = false;
})
};
drop.start = function() {
var dx = Math.random() * two.width;
var dy = Math.random() * two.height;
var ox = 1000 * Math.cos(angle - Math.PI / 2) + dx;
var oy = 1000 * Math.sin(angle - Math.PI / 2) + dy;
var dest = {
x: dx,
y: dy
};
drop.visible = true;
drop.linewidth = Math.random() * 3;
drop.vertices[0].set(ox, oy);
drop.vertices[1].set(ox, oy);
drop.tweens.i.to(dest, seed * 250 + 50).start();
drop.tweens.o.to(dest, seed * 250 + 50).start();
};
return drop
}
function makeRipple(i) {
var seed = Math.random();
var ripple = two.makeCircle(0, 0, 0);
ripple.visible = false;
ripple.noFill().stroke = 'white';
ripple.tween = new TWEEN.Tween(ripple)
.to({ radius: seed * 50 + 100, linewidth: 0 }, seed * 250 + 350)
.easing(TWEEN.Easing.Sinusoidal.Out)
.onComplete(function() {
ripple.visible = false;
});
if (Math.random() > 0.5) {
ripple.child = two.makeCircle(0, 0, 0);
ripple.child.noFill().stroke = ripple.stroke;
ripple.child.tween = new TWEEN.Tween(ripple.child)
.to({ radius: seed * 50 + 100, linewidth: 0 }, seed * 250 + 350)
.delay(Math.random() * 100)
.onComplete(function() {
ripple.child.visible = false;
});
}
ripple.start = function(x, y) {
if (x && y) {
ripple.translation.set(x, y / ground.scale.y);
} else {
ripple.translation.set(
Math.random() * two.width / ground.scale.x,
Math.random() * two.height / ground.scale.y
);
}
ripple.radius = 0;
ripple.linewidth = Math.random() * 3 + 1;
ripple.visible = true;
ripple.tween.start();
if (ripple.child) {
ripple.child.translation.copy(ripple.translation);
ripple.child.radius = 0;
ripple.child.linewidth = ripple.linewidth;
ripple.child.visible = true;
ripple.child.tween.start();
}
};
return ripple;
}