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