Animación física

sapales · #1 (**permalink**) 18/12/2012, 09:00

Hola:

Quiero hacer una simulación de dos bolas que se acercan una a otra (una va de izquierda a derecha y la otra de derecha a izquierda) hasta chocar. La velocidad de cada bola es configurable por el usuario. El cálculo no me preocupa pero no sé como mostrarlas y animarlas. Con posicionamiento relativo, absoluto,... ¿podéis ayudarme?

Gracias.

memoadian · #2 (**permalink**) 18/12/2012, 10:15

creo quesería con absolut, para que puedas manipularlas perfectamente

un ejemplo burdo sería este que acabo de hacer:

pruebalo, pero solo funciona en navegadores que usen css3.

no es un choque ni nada, solo animé dos bolas.

otra forma sería con js

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <style type="text/css">
        #caja{
            position:relative;
            width:100%;
        }
        #bola1{
            animation:choquebola1 5s infinite;
            padding:30px;
            border-radius:50%;
            background:red;
            position: absolute;
            left:0;
        }
        #bola2{
            animation:choquebola2 5s infinite;
            padding:30px;
            border-radius:50%;
            background:blue;
            position:absolute;
            right:0
        }
        @keyframes choquebola1{
            from{left:0%;}
            to{left:50%;}
        }
        @keyframes choquebola2{
            from{right:0%;}
            to{right:50%;}
        }
    </style>
</head>
<body>
<div id="caja">
    <div id="bola1"></div>
    <div id="bola2"><div>
</div>
</body>
</html>

sapales · #3 (**permalink**) 18/12/2012, 10:44

Perdona, ¿qué evento dispara el movimiento?

memoadian · #4 (**permalink**) 18/12/2012, 11:03

en ese ejemplo que puse ninguno, la animación se da sola. Pero con algo de javascript puede ser cualquiera.

onmouseover, onclick, onmousenter, hover, focus, etc.