当前位置: 代码迷 >> HTML/CSS >> 分享一个HTML5画布兑现的超酷文字弹跳球效果
  详细解决方案

分享一个HTML5画布兑现的超酷文字弹跳球效果

热度:214   发布时间:2012-11-22 00:16:41.0
分享一个HTML5画布实现的超酷文字弹跳球效果

日期:2012/03/05? 来源: 分享一个HTML5画布实现的超酷文字弹跳球效果

?

分享一个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>
?