Corso di Laurea in Informatica Specialistica
Esame di Informatica Grafica
Prof.ssa Laura Caponetti
A.A. 2003/2004

ANIMAZIONI  IN  SVG.

(Scalable Vector Graphics)

Realizzato da: Luigi Faienza

Introduzione

Elementi Grafici SVG

Animazioni SVG

Codice Banner SVG Commentato

Banner SVG

Riferimenti

 

 

BANNER REALIZZATO IN SVG 

Un banner č una piccola immagine inserita all'interno di una pagina HTML utilizzata per "invitare" il visitatore a visitare un sito. 

Per visualizzare il Banner in SVG bisogna aver installato il Plug-in della Adobe scaricabile all'indirizzo: http://www.adobe.com/svg/viewer/install/main.html

Visto che si tratta di un banner tutti gli elmenti grafici sono contenuti all'interno di un elemento <a>, in modo che cliccando su qualsiasi punto del banner venga attivato il link al sito che vogliamo pubblicizzare (in questo caso l'home page personale della docente del Corso di Informatica Grafica).

Il banner č costituito da un foglio (Canvas) di dimensioni 500x100 pixel.

All'inizio ci sono delle definizioni (tag <defs>) di alcuni colori gradienti che verranno usati di seguito. Vengono definiti abche alcuni oggetti grafici quali il logo dell'Universitā, rettangoli,ellissi e scritte di testo.

L'animazione iniziale del logo č ottenuta posizionando il logo e impostando l'attributo di opacitā a ="0", in seguito si anima l'ellisse traslandola nella posizione del logo e ingrandendola fino alla dimensione del logo stesso. A questo punto si cambia l'attributo di opacitā del logo impostandolo a "1" con una animazione di 2 secondi di durata e inizio a 2 secondi e il logo diventa,quindi, visibile.

Si posizionano le scritte "Universitā degli Studi di Bari" e "Dipartimento di Informatica" e si disegna sopra di loro due rettangoli di colore bianco in modo da coprirle e in seguito animarli per l'effetto tendina di apparizione.

Poi, viene definito un rettangolo con colore di riempimento di tipo gradiente, vengono disegnati sopra due rettangoli con colore di riempimento bianco per poi animarli e avere un effetto tendina per l'apparizione.

A questo punto viene disegnato un altro rettangolo che conterrā il testo scorrevole.

Per il testo scorrevole si č dovuta sincronizzare la sua apparizione settando il parametro di visibilitā in modo da renderlo visibile con l'inizio dello scorrimento da destra verso sinistra.

Lo scorrimento del testo si č ottenuto animando l'attributo di posizione "x" con una traslazione che permettesse lo scorrimento completo di tutte le parole da destra a sinistra fino alla scomparsa del testo.

L'animazione del testo č stata impostata settando l'attributo "repeatCount="indefinite"" in modo da ciclare all'infinito.

 

Il codice del Banner č riportato di seguito:

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="500" height="100">

<a xlink:href="http://www.di.uniba.it/~ig">

<defs>

<linearGradient id="blue-metallic" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="1%" style="stop-color:rgb(168,178,216);stop-opacity:1"/>

<stop offset="18%" style="stop-color:rgb(0,0,128);stop-opacity:1"/>

<stop offset="48%" style="stop-color:rgb(214,218,238);stop-opacity:1"/>

<stop offset="83%" style="stop-color:rgb(192,192,255);stop-opacity:1"/>

<stop offset="99%" style="stop-color:rgb(0,0,128);stop-opacity:1"/>

</linearGradient>

<linearGradient id="black-white_2" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>

</linearGradient>

<radialGradient id="ultraviolet_1" cx="91%" cy="50%" r="50%" fx="50%" fy="50%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(255,64,255);stop-opacity:0.8"/>

<stop offset="50%" style="stop-color:rgb(64,64,255);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(64,255,255);stop-opacity:1"/>

</radialGradient>

<radialGradient id="ultraviolet" cx="49%" cy="50%" r="25%" fx="50%" fy="50%"

spreadMethod="repeat" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(255,64,255);stop-opacity:0.8"/>

<stop offset="50%" style="stop-color:rgb(64,64,255);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(64,255,255);stop-opacity:1"/>

</radialGradient>

<linearGradient id="electric-stripe_1" x1="0%" y1="0%" x2="50%" y2="0%"

spreadMethod="reflect" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0.5"/>

<stop offset="25%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>

<stop offset="50%" style="stop-color:rgb(104,0,192);stop-opacity:0.5"/>

<stop offset="75%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(0,0,192);stop-opacity:0.5"/>

</linearGradient>

<linearGradient id="electric-stripe" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0.5"/>

<stop offset="25%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>

<stop offset="50%" style="stop-color:rgb(104,0,192);stop-opacity:0.5"/>

<stop offset="75%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(0,0,192);stop-opacity:0.5"/>

</linearGradient>

<linearGradient id="black-white_1" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>

</linearGradient>

<linearGradient id="custom-paint" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(128,0,0);stop-opacity:1"/>

<stop offset="37%" style="stop-color:rgb(222,0,0);stop-opacity:1"/>

<stop offset="43%" style="stop-color:rgb(192,0,0);stop-opacity:1"/>

<stop offset="45%" style="stop-color:rgb(255,128,128);stop-opacity:1"/>

<stop offset="54%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(240,0,175);stop-opacity:1"/>

</linearGradient>

<linearGradient id="black-white" x1="0%" y1="0%" x2="100%" y2="0%"

spreadMethod="pad" gradientUnits="objectBoundingBox">

<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>

</linearGradient>

</defs>

<text x="68" y="21" style="visibility:visible;fill:rgb(64,64,255);font-size:22;font-family:Arial;stroke:rgb(45,24,174)"

transform="translate(13 71) translate(3 -43) translate(6 -3)">

Dipartimento di Informatica

</text>

<text x="98" y="16" style="visibility:visible;fill:rgb(64,64,255);font-size:24;font-family:Arial;stroke:rgb(45,24,174)"

transform="translate(50 100) translate(-56 -127) translate(-11 35)">

Universita degli Studi di Bari </text>

<rect x="87" y="2" width="305" height="27" rx="15.25" ry="1.35"

style="fill:rgb(255,255,255)"

transform="translate(349.375 15.5) scale(1.03049 1) translate(-349.375 -15.5)">

<animate begin="4s" dur="4s" attributeName="width" fill="freeze"

values="305;150;0">

</animate>

</rect>

<image x="2" y="2" width="64" height="52"

xlink:href="logouniba.jpg"

transform="translate(34 2) scale(1 1.03846) translate(-34 -2) translate(34 54) scale(1 1.03704) translate(-34 -54) translate(2 2) scale(1.03125 1.05357) translate(-2 -2)"

style="visibility:visible;opacity:0">

<set attributeName="opacity" begin="2s" dur="2s" fill="freeze" to="1"/>

</image>

<rect x="91" y="28" width="278" height="25" rx="0" ry="0"

style="fill:rgb(255,255,255)"

transform="translate(369 40.5) scale(1.02518 1) translate(-369 -40.5)">

<animate begin="4s" dur="4s" attributeName="height" fill="freeze"

values="25;13;0">

</animate>

</rect>

<rect id="textarea" x="80" y="54" width="418" height="34" rx="0" ry="0"

style="stroke:url(#electric-stripe_1);stroke-width:3;fill:url(#custom-paint)"

transform="translate(289 54) scale(1 1.32353) translate(-289 -54) translate(289 88) scale(1 1.04444) translate(-289 -88) translate(498 71) scale(1.19139 1) translate(-498 -71) translate(289 54) scale(1 0.978723) translate(-289 -54) translate(289 88) scale(1 0.913043) translate(-289 -88) translate(289 88) scale(1 0.952381) translate(-289 -88) translate(289 54) scale(1 0.925) translate(-289 -54) translate(498 71) scale(0.991968 1) translate(-498 -71) translate(289 88) scale(1 0.918919) translate(-289 -88) translate(289 88) scale(1 0.941176) translate(-289 -88) translate(289 54) scale(1 1.09375) translate(-289 -54)"

/>

<ellipse cx="34" cy="105" rx="5" ry="5"

style="opacity:1;fill:rgb(0,0,255);stroke-width:1"

transform="translate(-3.89831 -3.85965) translate(-3.55932 -4.21053) translate(-3.38983 -2.80702) translate(-5.9322 -6.49123) translate(-6.94915 -5.96491) translate(15 28) translate(11 1)"

>

<animateTransform attributeName="transform" begin="0s" dur="2s" fill="freeze"

calcMode="linear" type="translate" additive="sum" from="0 0" to="-2 -77"/>

<animateTransform attributeName="transform" begin="0s" dur="2s" fill="freeze"

calcMode="linear" type="translate" additive="sum" from="29 110"

to="29 110"/>

<animateTransform attributeName="transform" begin="0s" dur="2s" fill="freeze"

calcMode="linear" type="scale" additive="sum" from="1 1" to="6.4 5.8"/>

<animateTransform attributeName="transform" begin="0s" dur="2s" fill="freeze"

calcMode="linear" type="translate" additive="sum" from="-29 -110"

to="-29 -110"/>

<animateTransform attributeName="transform" begin="0s" dur="2s" fill="freeze"

calcMode="linear" type="translate" additive="sum" from="0 0"

to="-4.21875 3.44828"/>

<animateColor attributeName="fill" begin="0s" dur="2s" fill="freeze"

additive="sum" from="rgb(255,255,255)" to="rgb(0,0,255)"/>

<set attributeName="opacity" begin="2s" dur="4s" fill="freeze" to="0"/>

</ellipse>

<rect x="80" y="58" width="214" height="40" ry="0" rx="0"

style="fill:rgb(255,255,255)"

transform="translate(0 0) translate(-80 1) translate(187 98) scale(1 1.225) translate(-187 -98) translate(80 78) scale(1.15888 1) translate(-80 -78) translate(187 98) scale(1 0.918367) translate(-187 -98) translate(187 98) scale(1 0.955556) translate(-187 -98) translate(187 98) scale(1 0.953488) translate(-187 -98) translate(187 98) scale(1 1.09756) translate(-187 -98) translate(187 98) scale(1 0.888889) translate(-187 -98) translate(187 98) scale(1 1.05) translate(-187 -98) translate(187 98) scale(1 0.97619) translate(-187 -98) translate(187 58) scale(1 1.02439) translate(-187 -58)"

>

<animate begin="8s" dur="3s" attributeName="width" fill="freeze"

values="214;100;0">

</animate>

</rect>

<rect x="143" y="32" width="214" height="40" ry="0" rx="0"

transform="translate(150 29) translate(143 50.5) scale(0.971963 1) translate(-143 -50.5) translate(0 -4) translate(0 2) translate(250 72) scale(1 1.225) translate(-250 -72) translate(357 52) scale(1.21154 1) translate(-357 -52) translate(357 52) scale(1.00794 1) translate(-357 -52) translate(250 72) scale(1 0.897959) translate(-250 -72) translate(0 0) translate(250 72) scale(1 0.954545) translate(-250 -72) translate(250 72) scale(1 1.02381) translate(-250 -72) translate(250 72) scale(1 0.906977) translate(-250 -72) translate(250 72) scale(1 1.05128) translate(-250 -72) translate(250 72) scale(1 1.02439) translate(-250 -72) translate(250 72) scale(1 0.880952) translate(-250 -72) translate(250 72) scale(1 1.05405) translate(-250 -72) translate(250 32) scale(1 1.05128) translate(-250 -32)"

 

style="fill:rgb(255,255,255)">

<animate begin="8s" dur="3s" attributeName="width" fill="freeze"

values="214;100;0">

</animate>

</rect>

<rect x="79" y="60" width="421" height="40" rx="0" ry="0"

transform="translate(318.5 91.5) scale(1 1.02) translate(-318.5 -91.5) translate(500 75) scale(1.18765 1) translate(-500 -75)"

 

style="fill:rgb(192,255,255);stroke:url(#blue-metallic);stroke-width:3;visibility:hidden;

">

<set attributeName="visibility" begin="12s" dur="1s" fill="freeze" to="visible"/>

</rect>

<text style="fill:rgb(255,0,0)">

<tspan x="80" y="83" style="fill:rgb(255,0,0);font-size:18;font-family:Arial, sans-serif;visibility:hidden">

<set attributeName="visibility" begin="14s" dur="1s" fill="freeze" to="visible">

</set>

<animate attributeName="x" begin="14s" dur="25s" repeatCount="indefinite"

from="500" to="-1300">

</animate>

Corso di Informatica Grafica - Prof. Laura Caponetti presso l'Universita' degli Studi di Bari. Clicca qui per maggiori informazioni sul Corso.

</tspan>

</text>

</a>

</svg>