Scribd Logo
Upload

Welcome to Scribd!

  • Animacije

    Uploaded by

    Mesko Mehmedovic
    75 views19 pages

    Original Title

    animacije

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    75 views19 pages

    Animacije

    Uploaded by

    Mesko Mehmedovic

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    Internet tehnologije

    SVG
    Zvezdan Stojanović

    1 04/20/2020
    1. XML-aplikacije
    XML-aplikacijama nazivamo specijalizovane jezike za
    obilježavanje koji se primjenjuju u određenim oblastima,
    a koji su zasnovani na XML-u.
    Kod XML-aplikacija tagovi su fiksirani i za svaki od njih se
    unapred zna kakvu ulogu ima.
    XML-aplikacije možemo sami praviti, ali to su, obično,
    opštiji jezici za koje se pišu preporuke kao i za sam XML.
    Za svaku od aplikacija postoji DTD ili XML-shema gde je
    detaljno opisana sintaksa aplikacije.
    U XML-aplikacije spadaju:
    XHTML SMIL

    SVG WML

    MathML CML
    1.1. SVG
    SVG (Scalable Vector Graphics) je specifični jezik
    zasnovana na XML-u (XML-aplikacije).
    SVG – jezik opšte namjene za 2D grafiku. Omogućava
    crtanje osnovnih figura, kao što su: elipse,
    pravougaonici, linije, ... SVG podržava korišćenje
    teksta, gradijenta za bojenje, kao i animacije
    zasnovane na JavaScript-u.
    SVG-komponente mogu se učiniti dinamičkim i
    interaktivnim (jer je SVG potpuno podržana od DOM-a)
    SVG se zasniva na preko 80 unapred definisanih
    tagova, kao i niza unapred formiranih imena za boje.
    (Nećemo upoznavati sve ove tagove, već samo neke
    kroz primjere.) Boje se mogu navoditi i preko
    heksadekadnih kodova u obliku: #0000FF ili #2AB3F4 .
    1.2.1. Struktura SVG-dokumenta
    Pošto je SVG potpuno zasnovan na XML-u, deklaracija je:
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
    .
    .
    . (u okviru svg-a mogu se upotrebiti
    </svg> atributi width i height )
    Prvi.svg
    Kod HTML 5.0 može se uvesti SVG direktno u HTML
    stranicu.
    <!DOCTYPE html>
    <html>
    <body>
    <svg >
     .
    </svg>

    </body>
    </html>
    Napomena:

    U primjerima koji slijedi prva linija koda je


    <!Doctype html>
    To nije HTML tag nego instrukcija web čitaču da zna
    koja se verzija HTML koristi i koji dokument da
    očekuje i ova instrukcija se koristi kod HTML 5.0.
    Kod HTML 5.0 nije potrebna referenca na DTD, kao
    kod ranijih verzija HTML-a, budući da se on ne
    bezira na SGML-u.

    5 04/20/2020
    Za crtanje pravougaonika koristi se tag
    rect, npr.
    <rect x=“20” y=“30” width=“300”
    height=“200”/>
    Ovde su x i y koordinate gornjeg lijevog ugla
    pravougaonika.
    Prvi.html i Prvi.svg
    Za dužinu i visinu mogu se navoditi mjere u:
    px (podrazumijevana), pt, in, ili cm.
    Ukoliko želimo da pravougaonik bude popunjen,
    da odredimo boju ili da promijenimo bilo šta u
    6
    vezi sa izgledom, koristimo CSS, npr. ovako:
    04/20/2020
    <rect x=“20” y=“30” width=“300” height=“200”
    style=“fill:blue; stroke:red; stroke-width:8; “/>
    CSS stroke osobina definiše boju ivice pravougaonika
    CSS stroke-width osobina definiše debljinu ivice
    pravougaonika
    CSS fill osobina definiše boju ispune pravougaonika.
    Drugi.html
    < svg width=“500” height=“300”> >
    Preko width i height atributa u svg elementu, možemo
    definisati max veličinu SVG slike, odnosno oblast u koju
    će se smiještati formirani dijagram.
    500

    300

    Oblast rezervisana za dijagram

    8 04/20/2020
    9 04/20/2020
    Za crtanje kruga koristi se tag <circle> gde je
    potrebno navesti poluprečnik r i koordinate centra
    cx i cy. Na primer:
    <circle r="50" cx="150" cy="150"
    style="fill:red; stroke:green; stroke-
    width:2"/>
    Atributi cx i cy definišu koordinate centra kruga.
    Atribut r definiše poluprečnik kruga.
    Treći.html

    10 04/20/2020
    Za crtanje elipse koristi se tag <ellipse> i treba navesti dužine
    poluosa (rx i ry), kao i koordinate centra (cx i cy). Na primer:
    Četvrti.html
    Za crtanje duži koristi se tag <line> uz navođenje koordinata
    početne (x1, y1) i krajnje tačke (x2, y2).
    Peti.html
    Može se crtati izlomljena linija preko taga <polyline>. Potrebno je
    preko atributa points navesti koordinate čvorova u izlomljenoj liniji.
    Pomoću elementa <poliline> se može kreirati bilo koji oblik
    sastavljen od pravih linija.
    Šesti.html
    Pored crtanje izlomljene linije, može se crtati i poligon pomoću taga
    <polygon> sa istim atributom kao i kod polilinije.
    Sedmi.html
    Konstrukcije/prvi
    Konstrukcije/drugi

    11 04/20/2020
    Za navođenje teksta koristi se tag <text>. Mogu se
    navesti atributi x i y za navođenje lokacije gornjeg
    lijevog ugla teksta.
    <text x="0" y="15" style="font-size:26pt"> Tekst u
    SVG-u</text>
    Osmi.html
    Preko operacije transform može se transformisati
    tekst na razne načine (npr. rotirati), kao što pokazuje
    sledeći primjer
    Deveti.html
    Koristi se funkcija rotate() i to, ako se drugčije ne
    zada, oko tačke (0,0). U našem primjeru se vrši
    rotacija za 45 stepeni.

    12 04/20/2020
    U SVG-dokumenta se mogu ubacivati i slike, Mogu
    se koristiti razni formati, npr. JPG, GIF, ...
    Slika se ubacuje preko <image>-taga. Preko
    atributa x i y navodi se gornji lijevi ugao slike. Tu su
    i atributi width i heigth za unošenje željenih
    dimenzija slike.
    Slika, čije ime se navodi preko src-atributa, treba
    da bude u istom folderu sa dokumentom, ili da se
    navede (preko URL-a) kompletna putanja do slike.
    Deseti.html
    Pored navedenih tagova, može se koristiti i gomila
    drugih. Interesantni su i tagovi za rad sa gradijentima
    kod navođenja boja.
    Gradijent (za linerano mijenjanje boja) se kreira preko
    defs-taga:
    <defs>
    <linearGradient id="gradient1">
    .
    .
    .
    </linearGradient>
    </defs>
    Preko stop-taga određuje se gde gradijent počinje,
    odnosno gdje se završava.
    Jedanaesti.html
    Može se krirati vizuelna putanja u SVG-u pomoću
    <path>-elementa. Sintaksa ovog elementa je malo
    neobična: sadrži jedan atribut d (koji označava samu
    putanju) u okviru kojeg se navode koordinate i slova
    (neka vrsta komandi) sa sledećim značenjem:
    M— zamjena za "move to" operaciju.
    L— pokazuje "line to" operaciju.
    H— crta horizontalnu liniju.
    V— crta vertikalnu liniju.
    S— crta Bezijeovu (Bézier) krivu počev od pretodne
    tačke do (x,y).
    C— crta Bezijeovu krivu od tekuće tačke (x,y),
    koristeći (x1,y1) kao kontrolnu tačku na početku krive i
    (x2,y2) kao kontrolnu tačku na kraju krive.
    Z — Zatvaranje putanje
    SVG-grafika omogućava i animaciju. Za te svrhe koristi
    se <animate>- element koji može imati različite
    atribute. Na primer, za animaciju preko pravougaonika
    možemo pisati:
    <rect x="200" y="100" width="200" height="100"
    fill="blue">
    <animate attributeName="x"
    attributeType="XML"
    begin="0s" dur="10s" fill="freeze"
    from="200" to="100" />
    ...
    </rect>
    Objašnjenje:
    <animate> element se koristi za animaciju SVG shape-
    a (u našem primjeru, rect, pravougaonik) pa se
    <animate> uvodi između <rect>...</rect>
    Vrši se animacija “x” atributa <rect> elementa od
    Animacija počinje od 0s (“begin” atribut) i traje
    10s (“dur” atribut).
    Kad se animacija završi, atribut koji se animira
    bi se vratio na početnu vrijednost da se ne
    postavi “feel” atribut na “freeze”
    Ako se animira neka CSS osobina elementa,
    potrebno je staviti umjesto
    attributeType="XML“ ,
    attributeType=“CSS“

    17 04/20/2020
    Takođe možemo da kreiramo različite
    putanje i duž tih putanja da ispisujemo
    određeni tekst.
    Tekst može da prati neku unaprijed
    nacrtanu konturu koja se definiše preko
    textPath elementa
    Konstrukcije/treci.html

    18 04/20/2020
    19 04/20/2020

    You might also like