Kretanje po predefiniranoj liniji

Probajmo animirati objekt da se kreće po predefiniranoj stazi. Za to koristimo <t:animateMotion> tag. Napravit ćemo jedan div na kojem ćemo primijeniti animaciju.

<div style="position:relative;top:10;left:10;width:80; background-color:ff8855;text-align:center" id="osvemu"> O svemu </div>

Sada definiramo animaciju u SMIL-u koja izgleda ovako:

<t:par repeatCount="indefinite" begin="pocmi.click" end="stani.click"> <t:animateMotion targetElement="osvemu" path="M 10 10 L 100 10 100 50 50 50 50 100 10 100 z" dur="8" /> </t:par>

Ovdje smo koristili atribut path pomoću kojeg definiramo put kojim će se div tag kretati. Nadalje, zadajemo koordinate kretanja u parovima x i y. M je oznaka prebaci element direktno na zadane pozicije, dok je L oznaka da sada ide po linijskom putu do zadanih koordinata. Sada pogledajmo kako bi trebao izgledati cijeli kod.

<div style="width:120; height:120;background-color:#c8c8c8"> <div style="position:relative;top:10;left:10;width:80; background-color:ff8855;text-align:center" id="osvemu"> O svemu </div> <t:par repeatCount="indefinite" begin="pocmi.click" end="stani.click"> <t:animateMotion targetElement="osvemu" path="M 10 10 L 100 10 100 50 50 50 50 100 10 100 z" dur="8" /> </t:par> </div> <br><br><br> <input id="pocmi" type="button" value="Pocmi" /> <input id="stani" type="button" value="Stani" />

O svemu

Ovdje je popis svih oznaka koje se koriste u atributu path:
Napomena: Malo slovo je oznaka relativne, a veliko slovo apsolutne vrijednosti.

m M	"Pomakni na" (Move to relative) počinje novi put od zadane koordinate.
l L	"Linija do" (Line to relative) crta liniju od prethodne točke do zadane.
h H	"Horizontalna linija do" crta liniju od prethodne točke do zadanog x-a.
v V	"Vertikalna linija do" crta liniju od prethodne točke do zadanoga y-a.
z Z	"Zatvori put" omogućava direktnu crtu od zadnje točke do početka puta.
c C	"Kvadratna Bezierova krivulja do" crta Bezierovu krivulju od trenutne točke upotrebljavajući x1, y1 kao početne kontrolne točke, a x2, y2 kao krajnje kontrolne točke.

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 21.01.2008

Za vas smo izdvojili:

■  Animacija div elemenata
■  SMIL prijelazi - transitions
■  SMIL - uvod

Zadnjih 5 članaka

■  Lozinke, lozinke …
■  Kako prebaciti PDF u Word dokument
■  Kako postaviti stranicu na Internet
■  Cyclic Redundancy Check error
■  Riješite se Antivirus 2009 - rogue programa

KOMENTARI:

Nema još ni jednog komentara.

Samo registrirani korisnici mogu komentirati.