Animaciones HTML 5 con SVG, CSS 3 y jQuery

En anteriores entradas hemos hablado de como hacer animaciones HTML 5 con SVG de varias maneras:

En la primera se habla de cómo hacer animaciones avanzadas con Javascript para juegos mientras que en las dos últimas se habla de como hacer animaciones con SVG.

Ésta entrada va a tratar de cómo hacerlo con un enfoque diferente, ya que se va a centrar de como es accesible cualquier SVG a través de los elementos DOM, y por tanto desde Javascript y CSS 3.

Vamos a suponer un ejemplo sencillo de un elemento rect (rectángulo) de SVG que variamos su posición mediante animate de jQuery y modificar su color con animation de CSS 3 al hacer click en un botón, añadiendo otros eventos como un evento hover y el evento click en el recuadro.

La diferencia con el resto de anteriores maneras descritas en otras entradas de blog, es el uso de jQuery para conseguir los efectos, ya que tenemos control total sobre el proceso de animación  otros elementos que estén fuera del SVG.

En primer lugar deberemos tener en cuenta el navegador a usar. El soporte total para SVG ocurre en Firefox, Google Chrome, Safari, Opera, pero no en Internet Explorer 9 (e inferiores), por lo que el siguiente ejemplo es muy probable que no funcione.

A continuación, el ejemplo:

y ahora el código fuente:

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style>
    #frame {
        width: 300px;
        height: 300px;
        border: 4px solid black;
        position: relative;
    }
    #svgtest {
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #svgtest rect {
        stroke: blue;
        fill: red;
        stroke-width: 1px;
    }
    #svgtest rect:hover {
        fill: blue;
    }

    @keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Firefox */
    @-moz-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Safari y Chrome */
    @-webkit-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Opera */
    @-o-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    </style>
<script>
$(document).ready(function() {
    $("#svgtest rect").click(function() {
        alert("Elemento rect");
    });
    $("#animar_rect").click(function(e) {
        e.preventDefault();
        var frame_height = $("#frame").css("height").replace("px","");
        var frame_width = $("#frame").css("width").replace("px","");
        var rect_height =  $("#svgtest rect").attr("height");
        var rect_width =  $("#svgtest rect").attr("width");

        // Asignamos al rectángulo el cambio de color
        $('#svgtest rect').css("animation","animacionCambioColor 12s");

        // Movemos hasta la mitad inferior
        $('#svgtest').animate({
            left: (frame_width/2)-(rect_width/2),
            top: frame_height-rect_height-1
        }, 3000, function() {
            // Movemos hasta la mitad derecha
            $('#svgtest').animate({
                left: frame_width-rect_width-1,
                top: (frame_height/2)-(rect_height/2)
            }, 3000, function() {
                // Movemos hasta la mitad derecha
                $('#svgtest').animate({
                    left: 0,
                    top: 0
                }, 3000, function() {
                    // Quitamos la asignación de la animación para poder ejecutarla otra vez
                    $('#svgtest rect').css("animation","none");
                });
            });
        });
    });
});
</script>
    <button id="animar_rect">Animar rectángulo</button>
    <div id="frame">
        <svg id="svgtest" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="1" y="1" height="50" width="50" rx="20" ry="20"/>
        </svg>
    </div>
</body>
</html>

Como podemos ver, el ejemplo es muy sencillo y puede ser útil en animaciones sencillas que tengan un alto uso de Javascript para interactuar con otros elementos, como mapas, menús o ciertos efectos que hasta ahora sólo se hacían en Flash.

Adobe Edge como programa para crear animaciones HTML 5

Hasta ahora siempre hemos hablado de programar nosotros todas las animaciones, teniendo control total y haciéndolo de la manera más optimizada (supuestamente). Desde no hace mucho, Adobe lanzó su aplicación Edge que permite crear animaciones HTML 5 desde una interfaz similar a Flash.

Podemos ver algunos ejemplos hechos en Adobe Edge y valorar si realmente necesitamos un programa externo o podemos programarlo nosotros mismos.

Aunque la opción de Adobe Edge es relativamente nueva y puede ser que todavía esté mucho por hacer para ese software, es bastante significativo que Adobe saque una línea de productos que es cláramente competidora de Adobe Flash.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí