javascript - raphaël - ¿Cómo se hace la animación en Raphael?
raphaël 2.1 0 javascript vector library (2)
Jugué un poco (y escaneé la fuente) y parece que necesitas especificar la transformación en una forma como {transform:''M 1 .5 .5 1 15 25''} . Echa un vistazo a este violín para ver algunas transformaciones.
Por cierto, las transformaciones no funcionan exactamente como esperaba, y no puedo pretender que entiendo por qué ... Soy bastante nuevo para Raphael y SVG. De todos modos, espero que esto te ayude a moverte en la dirección correcta.
Intento realizar algunas animaciones con sets en Raphael, pero aunque una animación de opacidad funcionó, no puedo mover un conjunto (o incluso un círculo) alrededor del lienzo.
Encontré en la web que mover un conjunto debería hacerse con la configuración de la traducción, no con las posiciones x, y (ya que pueden ser diferentes para cada elemento del conjunto, y solo x e y pueden no ser suficientes para mover algunos elementos), pero no funciona para mi Nada se mueve, a pesar de que las devoluciones de llamadas de animación se ejecutan a tiempo, como se esperaba.
Hasta este punto, la mejor manera en que puedo usar el siguiente código es ver cómo está pasando el tiempo (en la consola) ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Set, circle animation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
<script type="text/javascript">
$(document).ready (function()
{
var canvas = Raphael (''canvas'', 400, 300);
window.tset = canvas.set()
.push(
window.tap = canvas.circle (100, 100, 40)
.attr ({stroke: ''blue'', fill: ''red''})
);
setTimeout (function()
{
console.log (''Starting tset animation #1.'');
window.tset.animate ({translation: ''15,25''}, 1000, function()
{
console.log (''Starting tap animation #1.'');
window.tap.animate ({translation: ''15,25''}, 1000, function()
{
console.log (''Starting tset animation #2.'');
window.tset.animate ({translate: ''15,25''}, 1000, function()
{
console.log (''Starting tap animation #2.'');
window.tap.animate ({translate: ''15,25''}, 1000, function()
{
console.log (''Starting tset animation #3.'');
window.tset.animate ({translation: ''matrix(1, 0, 0, 1, 15, 25)''}, 1000, function()
{
console.log (''Starting tap animation #3.'');
window.tap.animate ({translation: ''matrix(1, 0, 0, 1, 15, 25''}, 1000, function()
{
console.log (''Starting tset animation #4.'');
window.tset.animate ({transform: ''matrix(1, 0, 0, 1, 15, 25)''}, 1000, function()
{
console.log (''Starting tap animation #4.'');
window.tap.animate ({transform: ''matrix(1, 0, 0, 1, 15, 25)''}, 1000);
});
});
});
});
});
});
});
}, 1000)
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
Para mover un conjunto en Raphael, use:
// move to (100,100) over 1 second
theSetNameGoesHere.animate({transform: "t100,100"}, 1000);