logo El diario de Pepe Molina (Caricatos)

yo

Hemos hecho un par de animaciones rotando nuestro logo y las manecillas de un reloj analógico.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

No perdáis una hora, porque no estáis seguros de un minuto

Benjamin Franklin, político y científico estadounidense (1706-1790).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

SVG animado: algunos ejemplos sencillos

emoticón de Caricatos Publicado el día 15 de febrero de 2013
id=116; categorías: Vicisitudes de un Webmaster, Programación

Hemos hecho un par de animaciones rotando nuestro logo y las manecillas de un reloj analógico. Ahora nos toca volver a animar nuestro logo pero con movimientos lineales. Básicamente moveremos la imagen en tres direcciones:

Horizontal Vertical Diagonal

Para obtener las tres (3) animaciones con un solo fichero, debemos pasarle como parámetro el tipo (t) y los valores serán:

  • t=v --> tipo vertical
  • t=h --> tipo horizontal
  • t=d --> tipo diagonal

El código lo mostramos en este enlace al extra: logo_animado_path_svg (donde se puede comentar y valorar), y junto a estas líneas:

// descripción para la sindicación:
/*
	Este comodín sirve para animar el logo con tres (3) movimientos lineales.
*/
$tipo = (isset($_GET["t"])) ? $_GET["t"]:"v";
if (!in_array($tipo, array("v", "h", "d")))	$tipo = "v";

if ($tipo == "v") $poner =<<< vertical
		<use x="0" y="-40" transform="rotate(180 20 -20)" xlink:href="#logo_svg" />
		<animateMotion path="M 0 0 V 40 Z" dur="2s" repeatCount="indefinite" />
vertical;

elseif ($tipo == "h") $poner =<<< horizontal
		<use x="-40" y="0" xlink:href="#logo_svg" />
		<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="40" dur="2s" repeatCount="indefinite" />
horizontal;

else $poner =<<< diagonal
		<use x="0" y="-40" xlink:href="#logo_svg" />
		<use x="-40" y="0" xlink:href="#logo_svg" />
		<use x="-40" y="-40" xlink:href="#logo_svg" />
		<animateMotion path="M 0 0 L 40 40 M 0 0 Z" dur="2s" repeatCount="indefinite"/>
diagonal;

header("Content-type: image/svg+xml");
echo <<< svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40" preserveAspectRatio="yes">
	<defs>
		<image id="logo_svg" width="40" height="40" xlink:href="http://www.pepemolina.com/logo.png" />
	</defs>
	<g>
		<use x="0" y="0" xlink:href="#logo_svg" />
$poner
	</g>
</svg>
svg;

Vemos nuevos elementos en nuestra imagen svg que comentaremos a continuación.

Los entresijos

Entre las novedades vemos el elemento "defs" (definiciones), y dentro definimos un elemento image, con identificador (id) "logo_svg".

La imagen, tal como indica su id, es nuestro logo y tiene definidos los atributos de tamaño. Luego vemos una etiqueta "g" donde agrupamos un elemento nuevo: "use", donde se "usa" la imagen definida en la sección defs; y también vemos una variable php cuyo valor es según el tipo de animación, uno o tres elementos "use" similares pero con distintos valores de posicionamiento (x, y). También se agrupa la etiqueta de la animación (animateMotion o animateTransform).

Ya habíamos usado animateTransform en nuestras anteriores animaciones y eran del tipo "rotate" (rotación); en este caso hemos usado translate (traslado), y su uso es similar, así que no nos detendremos en explicarlo. En el caso de animateMotion encontramos atributos similares como dur (duración) y repeateCount (repeticiones), pero las coordenadas se definen con el atributo "path", cuyo contenido es el mismo del atributo "d" (data/datos) de la etiqueta de igual nombre: "path".

Recorridos del "path"

Para entender, al menos básicamente, los valores del recorrido, debemos pensar que cada recorrido es una serie de letras o comandos seguidos de coordenadas. Empezamos con el comando M (moveTo/mover a coordenada), y en ambos casos sigue con "0 0"; o sea que el inicio de nuestro recorrido es la coordenada (0, 0), pero para no confundirnos, iremos por partes. El primer recorrido:

path="M 0 0 V 40 Z"

Comprobamos que comienza desde el origen que ya comentamos, y sigue con la instrucción "V" (línea vertical) con el valor 40. Un solo valor porque no varía la coordenada x; o sea pasa de (0, 0) a (0, 40). Luego vemos la instrucción "Z" (close path) que indica que hemos terminado y cerramos el recorrido (volviendo al origen (0, 0).

El otro recorrido "path" es diagonal:

path="M 0 0 L 40 40 M 0 0 Z"

También iniciamos el recorrido en la coordenada (0, 0), pero la siguiente instrucción es "L" (LineTo/línea), seguido de las coordenadas (40, 40), o sea desde la esquina superior izquierda a la esquina inferior derecha. Y antes de cerrar el recorrido nos movemos (M) al origen, consiguiendo el efecto de un movimiento contínuo en diagonal... si omitiésemos el último comando "M", o lo hubiésemos reemplazado por un comando "L", el efecto sería similar al recorrido vertical antes descrito.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.116) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 4186 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO005.gif
http://www.pepemolina.com/postales/Musicales/Imagen1.gif
http://www.pepemolina.com/postales/Musicales/Imagen2.gif
http://www.pepemolina.com/postales/Musicales/Imagen3.gif
http://www.pepemolina.com/postales/Musicales/Imagen4.gif
http://www.pepemolina.com/postales/Musicales/Imagen5.gif
http://www.pepemolina.com/postales/Musicales/Imagen6.gif
http://www.pepemolina.com/postales/Musicales/Imagen7.gif
Postal Digital
Postal Digital
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio