animación CSS simple, ¿debería estar haciendo esto en lienzo o SVG?

las dos primeras teclas están operativas (la tecla más a la izquierda y la tecla negra justo al lado). aqui esta alojado para que lo veas

http://23.23.184.26/miller/keyboardanimation/main.html

Tengo que volver a dibujar TODO el teclado porque la naturaleza tridimensional de cada tecla no deja un perfil cuadrado que pueda reemplazar con una imagen cuadrada. No veo soporte en ninguna parte para elementos trapezoidales ...

¿Debería estar haciendo esto en SVG o lienzo o algo así? Siento que la forma en que estoy haciendo esto es realmente tonta.

Y, a veces, recibo un destello blanco extraño entre las transiciones (creo que solo en IE9)

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        a{
            color:white;
        }
        #main{
            background:white url('0.gif') no-repeat 0 0;
            position:relative;
            z-index:0;
            width:506px;
            height:319px;
        }

        #key1{
            position:absolute;
            width:50px;
            height:75px;
            top:175px;
            left:55px; 
        }
        #key2{
            position:absolute;
            width:50px;
            height:75px;
            top:100px;
            left:85px;
        }
        /*uncomment this to show button zones*/
        /*#key1:hover, #key2:hover{
            border:1px solid red;
        }*/
    </style>
</head>

<body>
    <div id="main">
        <div id="key1" onMouseDown="document.getElementById('main').style.background = 'url(1.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
        <div id="key2" onMouseDown="document.getElementById('main').style.background = 'url(2.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
    </div>
</body>

preguntado el 22 de mayo de 12 a las 20:05

Puede que te interese mi animación en una curva demo, que usa SVG internamente para animar cualquier propiedad en el espacio 2D. -

1 Respuestas

No está usando animación CSS :-/, está haciendo una transición de fondo simple usando Javascript.

Dicho esto, también hay otro pequeño detalle, si usa lienzo para dibujar y animar el piano, necesitará "volver a dibujar" el piano que no cambia y cada parte del piano que cambia.

Le sugiero que haga esto en SVG y lo anime, ya que tendrá menos partes para animar :-).

¡Saludos! gonzalo g

contestado el 22 de mayo de 12 a las 20:05

Además, el parpadeo se debe al tiempo que tarda en cargar las imágenes, ya que las imágenes solo se cargan cuando se usan (o al usar una técnica de precarga de imágenes) - ggarcia24

meh, estoy aprendiendo. ¿Esperaba evitar svg ... pero supongo que hay una biblioteca (raphael) para eso? - 3z33etm

No he hecho animaciones complejas (nada más elegante que un círculo moviéndose o algo así), así que no puedo ayudarte en eso :-S. Pero que yo sepa, ahora es muy fácil de hacer :-). Tal vez este sitio podría ayudarlo un poco, tiene muchos ejemplos. srufaculty.sru.edu/david.dailey/svg - ggarcia24

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.