|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-03-05
日期：2012/03/05 来源： 分享一个HTML5画布实现的超酷文字弹跳球效果
今天我们分享一个来自于html5canvastutorials 的超酷弹跳球效果，这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体，如果你的鼠标逼近这些小球，它们会四散而逃，当你的鼠标离开后，它们又自动复原，效果很酷，希望大家喜欢！
<script>
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function initBalls(){
balls = [];
var dark = "#202020";
var red = "#EF2B36";
var blue = "#2B99E6";
var green = "#02A817";
//G
balls.push(new Ball(173, 63, 0, 0, dark));
balls.push(new Ball(158, 53, 0, 0, dark));
balls.push(new Ball(143, 52, 0, 0, dark));
balls.push(new Ball(130, 53, 0, 0, dark));
balls.push(new Ball(117, 58, 0, 0, dark));
balls.push(new Ball(110, 70, 0, 0, dark));
balls.push(new Ball(102, 82, 0, 0, dark));
balls.push(new Ball(104, 96, 0, 0, dark));
balls.push(new Ball(105, 107, 0, 0, dark));
balls.push(new Ball(110, 120, 0, 0, dark));
balls.push(new Ball(124, 130, 0, 0, dark));
balls.push(new Ball(139, 136, 0, 0, dark));
balls.push(new Ball(152, 136, 0, 0, dark));
balls.push(new Ball(166, 136, 0, 0, dark));
balls.push(new Ball(174, 127, 0, 0, dark));
balls.push(new Ball(179, 110, 0, 0, dark));
balls.push(new Ball(166, 109, 0, 0, dark));
balls.push(new Ball(156, 110, 0, 0, dark));
//B
balls.push(new Ball(248, 125, 0, 0, dark));
balls.push(new Ball(246, 120, 0, 0, dark));
balls.push(new Ball(245, 110, 0, 0, dark));
balls.push(new Ball(235, 100, 0, 0, dark));
balls.push(new Ball(220, 90, 0, 0, dark));
balls.push(new Ball(235, 90, 0, 0, dark));
balls.push(new Ball(240, 90, 0, 0, dark));
balls.push(new Ball(245, 85, 0, 0, dark));
balls.push(new Ball(250, 75, 0, 0, dark));
balls.push(new Ball(245, 65, 0, 0, dark));
balls.push(new Ball(235, 55, 0, 0, dark));
balls.push(new Ball(225, 53, 0, 0, dark));
balls.push(new Ball(215, 51, 0, 0, dark));
balls.push(new Ball(200, 51, 0, 0, dark));
balls.push(new Ball(200, 61, 0, 0, dark));
balls.push(new Ball(200, 71, 0, 0, dark));
balls.push(new Ball(200, 81, 0, 0, dark));
balls.push(new Ball(200, 91, 0, 0, dark));
balls.push(new Ball(200, 103, 0, 0, dark));
balls.push(new Ball(200, 116, 0, 0, dark));
balls.push(new Ball(200, 127, 0, 0, dark));
balls.push(new Ball(223, 135, 0, 0, dark));
balls.push(new Ball(210, 135, 0, 0, dark));
balls.push(new Ball(235, 135, 0, 0, dark));
balls.push(new Ball(240, 132, 0, 0, dark));
// i
var oOffset = 67;
balls.push(new Ball(oOffset + 210, 136, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 133, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 123, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 113, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 108, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 101, 0, 0, blue));
balls.push(new Ball(oOffset + 210, 70, 0, 0, blue));
// n
balls.push(new Ball(310, 135, 0, 0, red));
balls.push(new Ball(310, 130, 0, 0, red));
balls.push(new Ball(310, 120, 0, 0, red));
balls.push(new Ball(310, 110, 0, 0, red));
balls.push(new Ball(310, 100, 0, 0, red));
balls.push(new Ball(320, 95, 0, 0, red));
balls.push(new Ball(330, 95, 0, 0, red));
balls.push(new Ball(340, 100, 0, 0, red));
balls.push(new Ball(340, 110, 0, 0, red));
balls.push(new Ball(340, 120, 0, 0, red));
balls.push(new Ball(340, 130, 0, 0, red));
balls.push(new Ball(340, 135, 0, 0, red));
// 1
balls.push(new Ball(368, 135, 0, 0, green));
balls.push(new Ball(374, 135, 0, 0, green));
balls.push(new Ball(382, 135, 0, 0, green));
balls.push(new Ball(374, 129, 0, 0, green));
balls.push(new Ball(374, 119, 0, 0, green));
balls.push(new Ball(374, 109, 0, 0, green));
balls.push(new Ball(374, 99, 0, 0, green));
balls.push(new Ball(374, 89, 0, 0, green));
balls.push(new Ball(365, 94, 0, 0, green));
balls.push(new Ball(470, 89, 0, 0, dark));
balls.push(new Ball(440, 89, 0, 0, dark));
balls.push(new Ball(430, 115, 0, 0, red));
balls.push(new Ball(435, 119, 0, 0, red));
balls.push(new Ball(440, 125, 0, 0, red));
balls.push(new Ball(450, 129, 0, 0, red));
balls.push(new Ball(460, 129, 0, 0, red));
balls.push(new Ball(470, 125, 0, 0, red));
balls.push(new Ball(475, 119, 0, 0, red));
balls.push(new Ball(480, 114, 0, 0, red));
return balls;
}
function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};
}
function updateBalls(canvas, balls, timeDiff, mousePos){
var context = canvas.getContext("2d");
var collisionDamper = 0.3;
var floorFriction = 0.0005 * timeDiff;
var mouseForceMultiplier = 1 * timeDiff;
var restoreForce = 0.002 * timeDiff;
for (var n = 0; n < balls.length; n++) {
var ball = balls[n];
// set ball position based on velocity
ball.y += ball.vy;
ball.x += ball.vx;
// restore forces
if (ball.x > ball.origX) {
ball.vx -= restoreForce;
}
else {
ball.vx += restoreForce;
}
if (ball.y > ball.origY) {
ball.vy -= restoreForce;
}
else {
ball.vy += restoreForce;
}
// mouse forces
var mouseX = mousePos.x;
var mouseY = mousePos.y;
var distX = ball.x - mouseX;
var distY = ball.y - mouseY;
var radius = Math.sqrt(Math.pow(distX, 2) +
Math.pow(distY, 2));
var totalDist = Math.abs(distX) + Math.abs(distY);
var forceX = (Math.abs(distX) / totalDist) *
(1 / radius) *
mouseForceMultiplier;
var forceY = (Math.abs(distY) / totalDist) *
(1 / radius) *
mouseForceMultiplier;
if (distX > 0) { // mouse is left of ball
ball.vx += forceX;
}
else {
ball.vx -= forceX;
}
if (distY > 0) { // mouse is on top of ball
ball.vy += forceY;
}
else {
ball.vy -= forceY;
}
// floor friction
if (ball.vx > 0) {
ball.vx -= floorFriction;
}
else if (ball.vx < 0) {
ball.vx += floorFriction;
}
if (ball.vy > 0) {
ball.vy -= floorFriction;
}
else if (ball.vy < 0) {
ball.vy += floorFriction;
}
// floor condition
if (ball.y > (canvas.height - ball.radius)) {
ball.y = canvas.height - ball.radius - 2;
ball.vy *= -1;
ball.vy *= (1 - collisionDamper);
}
// ceiling condition
if (ball.y < (ball.radius)) {
ball.y = ball.radius + 2;
ball.vy *= -1;
ball.vy *= (1 - collisionDamper);
}
// right wall condition
if (ball.x > (canvas.width - ball.radius)) {
ball.x = canvas.width - ball.radius - 2;
ball.vx *= -1;
ball.vx *= (1 - collisionDamper);
}
// left wall condition
if (ball.x < (ball.radius)) {
ball.x = ball.radius + 2;
ball.vx *= -1;
ball.vx *= (1 - collisionDamper);
}
}
}
function Ball(x, y, vx, vy, color){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.color = color;
this.origX = x;
this.origY = y;
this.radius = 10;
}
function animate(canvas, balls, lastTime, mousePos){
var context = canvas.getContext("2d");
// update
var date = new Date();
var time = date.getTime();
var timeDiff = time - lastTime;
updateBalls(canvas, balls, timeDiff, mousePos);
lastTime = time;
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// render
for (var n = 0; n < balls.length; n++) {
var ball = balls[n];
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
context.fillStyle = ball.color;
context.fill();
}
// request new frame
requestAnimFrame(function(){
animate(canvas, balls, lastTime, mousePos);
});
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var balls = initBalls();
var date = new Date();
var time = date.getTime();
/*
* set mouse position really far away
* so the mouse forces are nearly obsolete
*/
var mousePos = {
x: 9999,
y: 9999
};
canvas.addEventListener("mousemove", function(evt){
var pos = getMousePos(canvas, evt);
mousePos.x = pos.x;
mousePos.y = pos.y;
});
canvas.addEventListener("mouseout", function(evt){
mousePos.x = 9999;
mousePos.y = 9999;
});
animate(canvas, balls, time, mousePos);
};
</script>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-03-07
这DEMO加载也太慢了吧
|
| 返回顶楼 | |
|
发表时间：2012-03-07
酷毙了，很炫
|
| 返回顶楼 | |
|
发表时间：2012-03-07
最后修改：2012-03-07
<canvas id="myCanvas" width="500px"></canvas>
帮楼主补充 |
| 返回顶楼 | |
|
发表时间：2012-03-07
牛逼啊，正在学html5...
|
| 返回顶楼 | |
|
发表时间：2012-03-07
最后修改：2012-03-07
HTML5只支持IE9
|
| 返回顶楼 | |
|
发表时间：2012-03-07
qpshenggui 写道 HTML5只支持IE9
IE内核系列中确实就IE9支持部分特性，其他浏览器中一般版本高的都能多少支持部分特性。 |
| 返回顶楼 | |
|
发表时间：2012-03-07
ie好像不行，我用chrome才能运行，效果很酷
|
| 返回顶楼 | |
|
发表时间：2012-03-08
2B的人还在用什么IE，现在是个聪明人都用chrome了
|
| 返回顶楼 | |
|
发表时间：2012-03-08
我用chrome在其他tab页面移动鼠标 ，为什么那个动画也动？
|
| 返回顶楼 | |
