animacija z uporabo jezika css 3

Tjaša Šošter

ANIMACIJA Z UPORABO JEZIKA CSS 3

Diplomsko delo

Maribor, avgust 2012

ANIMACIJA Z UPORABO JEZIKA CSS 3

Diplomsko delo

Študentka: Tjaša Šošter

Študijski program: univerzitetni študijski program

Informatika in tehnologije komuniciranja

Smer: Informacijski sistemi

Mentor: doc. dr. HÖLBL MARKO, univ. dipl. inž. rač. in inf.

Lektorica: Natalija Sinkovič, profesorica slovenščine

ii

ZAHVALA

Zahvaljujem se mentorju, doc. dr. Marku Hölblu za

pomoč in vodenje pri opravljanju diplomskega dela.

Posebna zahvala velja staršem, ki so mi omogočili

študij.

iii

Animacija z uporabo jezika CSS 3

Ključne besede: CSS 3, animacija, spletno oblikovanje, splet

UDK: 004.92:004.777(043.2)

Povzetek

Diplomsko delo govori o spletnih animacijah izdelanih z uporabo jezika CSS 3. V

diplomskem delu smo pregledno predstavili tehnologijo CSS in novosti v verziji CSS 3.

Opisali smo elemente CSS 3 modula Animations, ki omogočajo izgradnjo spletnih

animacij. Preverili smo kakšna je podpora različnih elementov CSS 3 modula Animations

v popularnejših brskalnikih. V praktičnem delu diplomske naloge smo opisali razvoj

spletne animacije CSS 3 cirkus. Predstavili smo, kako lahko z uporabo različnih CSS

lastnosti dosežemo različne učinke animacije, kot so gibanje, razteg in skrčitev, pojemanje

ter povečava in oddaljevanje. Preizkusili in predstavili smo delovanje orodja Sencha

Animator.

iv

CSS 3 Animation

Key words: CSS 3, animation, web design , web

UDK: 004.92:004.777(043.2)

Abstract

This diploma is about web animations that are build with CSS 3. In this work we presented

CSS technology and innovations in version CSS 3. We described the elements of CSS 3

Animations module, which enables building web animations and also checked out the

support of various elements in more popular browsers. In the practical part of the paper

we described the development of web CSS 3 animation called CSS 3 Circus. We

presented the use of the various CSS properties in order to achieve different animation

effects, such as movement, stretching and squeezing, fading or zooming in and out. In the

end we presented the way to build animation with a tool called Sencha Animator.

v

KAZALO

1 UVOD .............................................................................................................. 1

2 CSS ................................................................................................................. 3

2.1 CSS 3 ..................................................................................................................................... 4

2.2 CSS 3 Animations modul ..................................................................................................... 5

2.3 Pravilo glavne slike .............................................................................................................. 5

2.4 Elementi ................................................................................................................................. 6

3 PODPORA BRSKALNIKOV ........................................................................... 8

4 IZDELAVA ANIMACIJE ............................................................................... 10

4.1 Načrtovanje ......................................................................................................................... 10

4.2 Izdelava ................................................................................................................................ 11

4.2.1 Ozadje .......................................................................................................................... 11

4.2.2 Pozicija in vrstni red elementov .................................................................................... 12

4.2.3 Gibanje ......................................................................................................................... 12

4.2.4 Rotacija ......................................................................................................................... 14

4.2.5 Približevanje in oddaljevanje ........................................................................................ 15

4.2.6 Razteg in skrčitev ......................................................................................................... 17

4.2.7 Ponovitev animacije ...................................................................................................... 17

4.2.8 Časovna funkcija in hitrost animacije ........................................................................... 20

4.2.9 Dodatne funkcionalnosti ............................................................................................... 20

5 PRIPOMOČKI PRI IZDELAVI ANIMACIJE ................................................... 23

5.1 Orodje -prefix-free .............................................................................................................. 23

5.2 Orodja za animacijo............................................................................................................ 25

6 SKLEP ........................................................................................................... 28

7 VIRI ................................................................................................................ 29

vi

KAZALO SLIK

Slika 2.1: Sintaksa CSS stila [2] ......................................................................................................... 3

Slika 2.2: Tri stopnje animacije [5]...................................................................................................... 7

Slika 4.1: Slika žonglerja .................................................................................................................. 10

Slika 4.2: Pozicija rumene žogice v animaciji ................................................................................... 13

Slika 4.3: Premik glave s pravilom za rotacijo .................................................................................. 15

Slika 4.4: Približevanje in rotacija opice ........................................................................................... 16

Slika 4.5: Prikaz raztega in skrčitve žoge ......................................................................................... 17

Slika 4.6: Animacija zavese .............................................................................................................. 19

Slika 4.7: Naslov z uporabo različnih pisav ...................................................................................... 21

Slika 5.1: Glavno okno programa Sencha Animator [13] ................................................................. 25

Slika 5.2: Različne pozicije balona ................................................................................................... 26

Slika 5.3: Lastnosti za skrčitev/razteg in rotacijo krogle ................................................................... 27

KAZALO TABEL

Tabela 2.1: Animation Properties[8] ................................................................................................... 6

Tabela 3.1: Podpora CSS 3 pravil za animacijo ................................................................................. 9

KAZALO PROGRAMSKE KODE

Programska koda 2.1: Primer @keyframe elementa [5] .................................................................... 5

Programska koda 2.2: Primer kode za animacijo div elementa [5] .................................................... 7

Programska koda 4.1: CSS pravilo za uporabo dveh animacij ........................................................ 12

Programska koda 4.2: Pravilo za gibanje oz. animacijo žogic pri žonglerju .................................... 13

Programska koda 4.3: Pravilo za premik navzdol ............................................................................ 14

Programska koda 4.4: Pravilo z uporabo rotacije ............................................................................ 14

Programska koda 4.5: Pravilo z uporabo lastnostjo transform za povečavo in rotacijo ................... 16

Programska koda 4.6: Pravilo za razteg/skrčitev žoge .................................................................... 17

Programska koda 4.7: Pravilo glavne slike, kjer se animacija ponavlja v neskončnost ................... 18

Programska koda 4.8: Pravilo, kjer se animacija ponovi dvakrat v alternativni smeri ..................... 19

Programska koda 4.9: Pravilo za uvoz in uporabo različnih pisav ................................................... 20

Programska koda 4.10: Del kode za predvajanje glasbe ................................................................. 22

Programska koda 5.1: CSS pravilo brez uporabe predpon ............................................................. 24

Programska koda 5.2: CSS pravilo ob pregledu strani v brskalniku Firefox z orodjem Firebug ...... 24


1

1 UVOD

Gibljive slike so že od nekdaj privlačile ljudi. Enako je tudi na spletu, kjer grafično bolj

dodelana spletna stran privabi več ljudi. Animacija na spletni strani ponuja boljše in bolj

inovativne možnosti za oglaševanje. Prav tako so spletne strani atraktivnejše, če

vsebujejo animirane menije, dinamično pomoč pri navigaciji spletne strani ter animirane

predstavitve, ki izdelke in storitve bolj približajo potencialnim uporabnikom. Dobro

zgrajena spletna stran, z uporabo spletne animacije pomeni večje zadovoljstvo

uporabnikov in s tem tudi večji dobiček za podjetje.

Za dodajanje animacij na spletne strani obstaja več platform. Kljub obsežnemu seznamu

se spletni oblikovalci v preteklosti največkrat odločali za JavaScript ali JQuery in Adobe

Flash. Zaradi tega je za spletne strani veljalo, da so sestavljene iz treh plasti: vsebina

(HTML), predstavitev (CSS) in obnašanje (JavaScript) ter da se te tri plasti med seboj ne

mešajo. Ta linija med predstavitvijo in obnašanjem je sicer izginila s pojavitvijo CSS 3

animacij.

Namen diplomskega dela je predstaviti elemente za izdelavo CSS 3 animacije, ugotoviti,

kakšne so prednosti izdelave animacije s pomočjo jezika CSS 3 v primerjavi z drugimi

pristopi in tehnologijami (npr. Flash in JavaScript) in kakšna je podpora brskalnikov.

Glavni cilji, ki jih želimo doseči z izdelavo diplomske naloge, so torej pridobiti znanje o

CSS 3, predvsem o modulu za izdelavo animacij in se naučiti izdelati takšno animacijo.

Pri izdelavi animacije se bomo omejili na uporabo elementov animacije, ki so podprti v

vsaj dveh popularnejših brskalnikih (Mozilla Firefox in Google Chrome). Pri testiranju

podpore v brskalnikih bomo primerjali 4 najpopularnejše – Mozzila Firefox, Google

Chrome, Safari in Internet Explorer.

V prvem delu diplomske naloge bomo predstavili kaj je CSS oz. kaskadna stilska predloga

in kakšne so novosti v verziji, t. i. CSS 3. Na kratko bomo opisali, kako poteka izgradnja

animacije s t. i. pravilom glavne slike in kateri so gradniki ki se uporabljajo za izgradnjo


2

animacije. V nadaljevanju bomo povzeli tudi, kakšna je podpora brskalnikov. V

eksperimentalnem delu bo predstavljen prikaz poteka izdelave take animacije in

podrobnejša predstavitev gradnikov, ki se uporabljajo za izdelavo čim bolj realistične in

privlačne animacije. V zadnjem delu bomo predstavili tudi pripomočke za izgradnjo

animacij, med njimi tudi program, ki omogoča izgradnjo brez »tehničnega znanja«.


3

2 CSS

Pri izgradnji animacije uporabljamo označevalni jezik Hyper Text Markup Language (sl.

jezik za označevanje nadbesedila) krajše HTML in jezik Cascading Style Sheets (sl.

kaskadne stilske predloge) krajše CSS. HTML je jezik, ki poskrbi za strukturo dokumenta

z organizacijo elementov v odstavke, sezname ipd., medtem ko CSS poskrbi za privlačno

podobo dokumenta [1].

Delovanje jezika CSS je dokaj enostavno. V bistvu gre le za pravilo, ki pove spletnemu

brskalniku, kako prikazati določen element na spletni strani – npr. spremeniti barvo

naslova v modro, narisati rdečo obrobo okoli slike … Posamezno stilsko pravilo je

sestavljeno iz dveh glavnih delov, kot prikazuje slika 2.1, selektorja, ki določa element, na

katerega se stilska pravila nanašajo ter deklaracijskega bloka, v katerem so zapisane

lastnosti, s pomočjo lastnosti (ang. property) elementov (npr. color – barva) in njihovih

vrednosti (ang. value) [1].

Slika 2.1: Sintaksa CSS stila [2]

Za selektor lahko uporabljamo [3]:

HTML ime za element, kot prikazuje slika 2.1,

id ime, ali

class ime.

Skupino več stilskih pravil imenujemo stilska predloga (ang. style sheet). Ta je lahko

definirana znotraj HTML strani, ali pa v posebnem dokumentu, ki ga uvozimo s pomočjo

povezave [1].


4

2.1 CSS 3

CSS 3 je najnovejša različica jezika za stilske predloge. Gre za nadgradnjo različice CSS

2.1, ki ima dodane nove funkcionalnosti. Pri večini novih funkcionalnostih ne gre za

ustvarjanje novih učinkov, ampak za uporabo že poznanih efektov spletnega oblikovanja

(kot so senčenje, animacija …) na nov način, ki je bolj uporaben in prilagodljiv od tehnik,

ki smo jih uporabljali v zadnjem desetletju [4].

Za razliko od predhodnika CSS 3 ni več enovita specifikacija, ampak je razdeljena na več

modulov. Vsak izmed njih je specifičen za določeno področje, kot so barva, ozadje ali

animacija [4]. Taka razdelitev omogoča, da uporabljamo CSS 3 že pred koncem razvoja,

saj so, medtem ko so nekateri moduli že popolnoma podprti, drugi šele v fazi razvoja [5].

V celotni specifikaciji je torej več kot 50 modulov. Med pomembnejše spadajo moduli, kot

so Backgrounds and Borders (sl. ozadja in obrobe), ki omogoča uporabo zaobljenih

robov, senčenje in uporabo slik za obrobo brez programov, kot je Adobe Photoshop.

Vsebuje pa tudi več lastnosti, ki omogočajo večji nadzor nad elementom ozadja.

Lastnosti, ki jih ponuja modul 2D/3D Transformations (sl. 2D/3D transformacije) omogočijo

razvijalcu da premika, povečuje, vrti in razteza različne HTML elemente. Modul Text

Effects (sl. besedilni učinki), omogoča dodajanje učinka senčenja besedilu. S Multiple

Column Layout modulom, lahko besedilo razporedimo v več stolpcev in v besedilu s

pomočjo lastnosti iz modula Fonts (sl. Pisave) uporabimo tudi pisave, ki sicer niso

nameščene na računalniku [6][7]. Modula Transitions (sl. prehodi) in Animations (sl.

animacija) omogočata dodajanje animacije statičnih HTML elementom [5].

Modul za prehode omogoča izvedbo enostavnejših animacij, vendar je nekoliko omejen.

Prehod se zgodi, ko se spremeni vrednost lastnosti, zato je čas začetka in konca odvisen

od te spremembe. Obenem modul za prehode ponuja malo možnosti nastavitev poteka

animacije. Za razliko od modula za prehode pa modul za animacijo omogoča avtorju več

svobode pri oblikovanju, zato se uporablja pri kompleksnejših animacijah [8].


5

2.2 CSS 3 Animations modul

Modul za animacijo avtorju omogoča spreminjanje CSS vrednosti skozi čas s pomočjo

pravila glavne slike. Prav tako je z uporabo različnih CSS lastnosti omogočena kontrola

nad ponavljanjem animacije, njenim začetkom, hitrostjo … [8].

2.3 Pravilo glavne slike

Prvi korak pri izdelavi animacije je definiranje slik animacije t. i. keyframe.

Najenostavnejše animacije vsebujejo samo dve sliki – začetno in končno, medtem ko bolj

zapletene vsebujejo tudi po več slik med začetno in končno sliko.

Pri izdelavi CSS animacij definiramo glavne slike s pomočjo značke @keyframes, katere

sintakso prikazuje programska koda 2.1

@keyframes expand

{

from { border-width: 10px }

50% { border-width: 1px }

to { border-width: 1px;

height: 120px;

width: 150px; }

}

Programska koda 2.1: Primer @keyframe elementa [5]

Za značko - @keyframe najprej definiramo ime animacije oz. identifikator, ki se uporablja

za klic animacije in se znotraj stilske predloge ne sme ponoviti. Sledijo vrednost keyframi

oz. slike. Te določajo pozicijo različnih slik znotraj trajanja animacije. Vrednost pozicije se

določa z odstotki, torej z vrednostmi od 0 % do 100 %. Poljubno sicer lahko zamenjamo 0

% z besedo from in 100 % z besedo to. Pri posamezni imamo lahko poljubno število

pozicij, dokler imajo le-te edinstveno vrednost. Vsaka pozicija vsebuje CSS pravila, ki se

nanašajo na določen element v določenem stanju animacije [5].


6

2.4 Elementi

Po definiciji glavnih slik je naslednji korak njihova povezava z elementi, ki jih želimo

animirati. Za to uporabimo elemente modula CSS 3 Animations, ki so prikazani v tabeli

2.1.

Tabela 2.1: Animation Properties[8]

CSS lastnost Opis

animation-name Identificira ime animacije, ki jo želimo določiti našemu elementu.

animation-duration Definira koliko časa (sekund ali milisekund) se izvaja en krog animacije.

animation-timing-function Definira hitrostno krivuljo animacije. Uporabimo lahko eno izmed že definiranih vrednosti.

animation-delay Identificira začetek animacije in omogoča, da se animacije začne z zakasnitvijo. Pri prevzeti vrednosti 0 s se animacija začne takoj.

animation-iteration-count Določuje število ponovitev krogov animacije.

animation-direction Definira, kako naj se predvaja animacija.

animation-fill-mode Definira, kakšne vrednosti zavzame element, ko je aplikacija končana.

animation-paly-state Definira stanje animacije (poteka ali pavza).

Vrednosti uporabimo znotraj selektorja elementa, ki ga želimo animirati. Prav tako lahko

uporabimo okrajšano vrednost animation, kot je prikazano v programski kodi 2.2. Rezultat

animacije je prikazan na sliki 2.2.


7

/* element ki ga animiramo */

div {

border: 4px solid black;

height: 100px;

width: 100px;

box-sizing: border-box;

animation: expand 6s ease 0 infinite alternate;

}

@keyframes expand

{

from { border-width: 4px }

50% { border-width: 12px }

to { border-width: 4px;

height: 130px;

width: 150px; }

}

Programska koda 2.2: Primer kode za animacijo div elementa [5]

Slika 2.2: Tri stopnje animacije [5]


8

3 PODPORA BRSKALNIKOV

Zadnje verzije brskalnikov imajo zelo dobro podporo za CSS, vključno z različico CSS 3.

To pomeni, da v zadnjih verzijah namiznih in mobilnih brskalnikov delujejo večinoma vse

nove funkcionalnosti, ki jih najdemo v različnih modulih CSS 3. Zaradi hitrega napredka

tehnologije, vse večje konkurence na področju spletnih brskalnikov in vse večjih zahtev

uporabnikov se razvijalci namreč trudijo vključiti nove funkcionalnosti veliko hitreje kot

včasih. Obenem so nove različice toliko izboljšane, da se pojavlja tudi vedno manj

hroščev [9].

Čeprav večina brskalnikov podpira CSS 3, vsi izmed njih podpirajo modul za animacije

zgolj poskusno, zaradi česar je treba pri animiranju uporabiti ustrezne predpone [8].

Prvi so CSS 3 animacijo začeli podpirati brskalniki, ki uporabljajo odprtokodni izvajalni

sistem Webkit. Med te spadajo namizni brskalniki Chrome in Safari ter mobilni brskalniki

iOS Safari, Android Browser, Blackberry Browser ter Chrome in Firefox za operacijski

sistem Android, ki vsi v zadnjih verzijah podpirajo animacije. Seveda vsi našteti webkit

brskalniki za delovanje animacije zahtevajo predpono -webkit- [8].

Z verzijo 5.0, ki je bila na voljo za množično uporabo junija 2011, je animacijo začel

podpirati tudi spletni brskalnik Mozzila Firefox. Pri njem za pravilen prikaz potrebujemo

predpono -moz- [10] [8]. Animacijo podpira tudi namizni brskalnik Opera z zadnjo verzijo

(verzija 12.0), vendar pa animacije ne podpira noben izmed njenih mobilnih brskalnikov

Opera Mini ali Opera Mobile. Predpona, ki se uporablja pri Operi je -o- [11].

Od najbolj razširjenih brskalnikov je edini Internet Explorer v trenutni verziji 9, ki ne

podpira animacije. Napovedana je sicer podpora animaciji v njegovi naslednji verziji 10,

sintaksa pa bi naj delovala s predpono -ms- ali celo brez nje [12].

Na zadnjih verzijah najpopularnejših spletnih brskalnikov smo izvedli tudi primerjavo

podpore CSS 3 Animation modula, ki jo prikazuje tabela 3.1. Primerjavo smo izvedli s


9

pomočjo testa za podporo CSS 3, ki ga najdemo na spletni strani: http://CSS

3test.com/#CSS 3-animations.

Tabela 3.1: Podpora CSS 3 pravil za animacijo

Firefox 14.0 Chrome 21.0 Safari 5.11 Opera 12

@keyframe podpira podpira podpira podpira

animation-name podpira podpira podpira podpira

animation-duration podpira delno podpira 2 delno podpira 3 podpira

animation-timing-

function podpira podpira podpira podpira

animation-delay podpira podpira podpira podpira

animation-

iteration-count podpira podpira delno podpira 4 podpira

animation-direction delno podpira 5 podpira delno podpira 6 delno podpira 7

animation-fill-mode podpira podpira podpira podpira

animation-paly-

state podpira podpira podpira podpira

1 Testirano na operacijskem sistemu Windows

2 Ne podpira vnosa negativih vrednosti (npr. -1s)

3 Ne podpira vnosa negativih vrednosti (npr. -1s)

4 Ne podpira vnosa decimalne vrednosti (npr. 4.35)

5 Ne podpira vrednosti reverse in alternate-reverse



http://css3test.com/#css3-animations

http://css3test.com/#css3-animations


10

4 IZDELAVA ANIMACIJE

Z namenom preizkusiti različne možnosti izgradnje animacije z jezikom CSS 3 smo se

lotili izdelave preproste animacije na temo cirkusa. Potek je predstavljen v podpoglavjih.

4.1 Načrtovanje

Ko smo določili idejo animacije, smo si najprej zamislili načrt, kako bo animacija sploh

potekala. Animacijo smo zgradili tako, da smo animirali HTML elemente, ki so vsebovali

različne slike cirkusa. V tej fazi je bilo torej treba izdelati in pridobiti vse ustrezne slike, ki

so bile kasneje uporabljene kot ozadje div elementov. Slike ozadij, z izjemo prvega, smo

narisali s pomočjo orodja Adobe Photoshop. Za druge elemente – klovne in živali (ter prvo

ozadje), pa smo uporabili vektorske slike, ki smo jih ustrezno razrezali. Na Slika 4.1 je

prikazana vektorska slika žonglerja, ki je sestavljen iz treh delov – trup ter leva in desna

roka. Podobno smo na dva dela (trup in glava) razrezali tudi tjulnja.

Slika 4.1: Slika žonglerja

Za pomoč pri izgradnji in določanju časovnih razmikov, kdaj se kateri element pojavi v

animaciji, smo si pripravili tudi enostavno časovno črto. Ko smo imeli pripravljene vse slike

in okvirni načrt, kako bo animacija potekala, smo se lotili animiranja.


11

4.2 Izdelava

V fazi izdelave smo najprej izdelali posebej animacije za žonglerja, tjulnja, nilskega konja

in opico. Na koncu smo vse te animacije skupaj povezali v eno datoteko z ustreznimi

ozadji, prehodi in časovnimi zakasnitvami. V naslednjih podpoglavjih bomo predstavili,

kako smo se lotili izgradnje posameznih elementov.

4.2.1 Ozadje

Na začetku smo ustvarili animacijo, ki je vsebovala samo ozadja in prehode, saj ustrezno

ozadje postavi animacijo v pravilni kontekst. Uporabljena so bila različna ozadja, ki so

ustvarjala vzdušje cirkusa znotraj animacije. Za povezovanje ozadij smo uporabili zaveso.

Za vsako ozadje smo uporabili svoj div element z ustreznim ozadjem, saj žal znotraj

@keyframe pravila ne deluje CSS vrednost background-image, ki bi omogočala

zamenjavo slike ozadja. Prikaz ozadja smo nato kontrolirali s pomočjo lastnosti animation-

delay in lastnostjo opacity8. Z elementom opacity lahko nastavljamo prosojnost različnih

elementov, v našem primeru smo ga uporabili za ozadje spletne strani. Z njim smo izvedli

tudi učinek pojemanja, ki smo ga vključili na koncu animacije.

Vsakemu uporabljenemu elementu lahko dodelimo več pravil in jih tako uporabimo

večkrat. V naši animaciji smo div element ozadje1, uporabili kot prvo in zadnje ozadje

animacije. To smo storili tako, da smo pri CSS pravilu za ozadje1 pri določanju imena

animacije uporabili dve različni @keyframes pravili, kar lahko vidimo v programski kodi

4.1. Obenem smo določili še različen čas trajanja in čas začetka animacije.

8 Lastnost iz modula CSS 3-Color Properties, ki omogoča nastavitve prosojnosti elementa.

Vstavimo lahko decimalne vrednosti od 0 (prosojno) do 1 (ne prosojno).


12

#cirkus #ozadje1 {

height: 500px;

width: 800px;

position: absolute;

background-image: url(slike/ozdaje1.png);

background-position: center bottom;

background-repeat: no-repeat;

opacity: 0;

background-size: cover;

overflow: hidden;

z-index: 1;

animation-name: prvo_ozadje, ozadje_zadnje;

animation-duration: 25s, 10s;

animation-iteration-count: 1;

animation-delay: 0s, 63s;

}

Programska koda 4.1: CSS pravilo za uporabo dveh animacij

4.2.2 Pozicija in vrstni red elementov

Na vsako ozadje smo nato postavili animirane figure - klovne, živali in balone. Figure so

različni div elementi, ki so postavljeni absolutno glede na kontejner. V našem primeru je to

div element cirkus, ki je postavljen relativno na spletno stran. Vrstni red elementov smo

določili s CSS lastnostjo z-index. Tisti element, ki ima večjo vrednost z-index se torej

pojavi pred ostalimi elementi.

Nato smo te elemente ustrezno animirali z uporabo različnih CSS lastnosti, s čimer smo

dosegli učinke premikanja, rotacije, skrčitve in raztega ter približevanja in oddaljevanja.

4.2.3 Gibanje

Premikanje elementov oz. gibanje smo implementirali na dva različna načina. Pri obeh

smo najprej določili absolutno pozicijo elementa znotraj kontejner elementa9. To smo

9 Kontejner element je prvi starševski element, katerega pozicija ni statična. Če tak element ne

obstaja je kontejner blok <html>.


13

določili s pomočjo CSS vrednosti left, right, top in bottom, ki določajo pozicijo elementa

levo, desno, gor in dol od roba kontejner elementa. Pri prvem načinu je za vsako pozicijo

sledilo določanje absolutne pozicije. Programska koda 4.2 prikazuje pravilo glavne slike

za žogico pri žonglerju, medtem ko slika 4.2 prikazuje različne pozicije rumene žogice v

animaciji.

@keyframes zoga {

0% { top: 170px; left: 280px; }

8% { top: 135px; left: 215px; }

16% { top: 130px; left: 160px; }

24% { top: 150px; left: 100px; }

32% { top: 190px; left: 55px; }

40% { top: 140px; left: 60px; }

45% { top: 40px; left: 95px; }

55% { top: 5px; left: 180px; }

70% { top: 50px; left: 265px; }

85% { top: 120px; left: 280px; }

100% { top: 170px; left: 280px; }

}

Programska koda 4.2: Pravilo za gibanje oz. animacijo žogic pri žonglerju

Slika 4.2: Pozicija rumene žogice v animaciji

Pri drugem načinu se začetna pozicija določi enako. Zatem sledi določanje premika po

horizontali (transform: translateX(x)) ali vertikali (transform: translateY(y)), s pomočjo CSS

3 lastnosti transform in vrednosti translate. Dovoljena je tudi uporaba translate(x,y), ki

prestavi objekt za x slikovnih točk na levo in y slikovnih točk navzdol. Programska koda


14

4.3 je pravilo za animacijo nilskega konja, s katerim ga prestavimo za 20 slikovnih točk

navzdol.

@keyframes konj_na_zogi {

50% {

transform: translateY(+20px);

}

}

Programska koda 4.3: Pravilo za premik navzdol

4.2.4 Rotacija

Rotacijo elementov smo uporabili pri tjulnju (za premik glave), ki odbija žogo (vrtenje

žoge). Implementirali smo jo s CSS 3 lastnostjo transform in vrednostjo rotate()10.

Programska koda 4.4 prikazuje uporabo vrednosti rotate(), znotraj pravila glavne slike, za

premik tjulnjeve glave. Glava se zasuče iz začetnega položaja za 30 stopinj v smeri

urinega kazalca in nazaj, kot to prikazuje slika 4.3.

@keyframes tjulen_glava {

0% { transform: rotate(0deg); }




}

Programska koda 4.4: Pravilo z uporabo rotacije

10 Funkcija rotate() rotira element okoli točke (privzeto je center elementa) za specificirano vrednot.

Velikost kota je lahko podana v stopinjah ali radianih, grads ali obratih, ter je lahko pozitivna (zasuk v smeri urinega kazalca) ali negativna (zasuk v nasprotni smeri urinega kazalca).


15

Slika 4.3: Premik glave s pravilom za rotacijo

4.2.5 Približevanje in oddaljevanje

Učinek približevanja oziroma oddaljevanja elementa smo dosegli z povečevanjem oz.

pomanjšanjem želenega elementa. Ta efekt smo uporabili pri opici na trapezu, katere

pravilo za animacijo je programska koda 4.5. Pri približevanju in oddaljevanju uporabimo

CSS 3 lastnost transform in vrednost scale (vrednost), pri čemer uporaba vrednosti

scale(1) naj ne bi spremenila velikosti elementa, scale(2) naj bi podvojila njegovo velikost

in scale(0.5) naj bi zmanjšala velikost elementa na polovico (50 %). Pri opici na trapezu

smo uporabili vrednosti od 10 % velikosti na začetku, do osnovne velikosti na koncu.

Rezultat približevanja je prikazan na sliki 4.4.


16

@keyframes spust_opica {

0% {

top: -300px;

right: 0px;

transform: scale(0.1);

}

30% {

top: -150px;

right: 100px;

transform: scale(0.5);

}

35% {

top: -120px;

right: 70px;

transform: scale(0.6) rotate(-10deg);

}

60% {

top: -50px;

right: -280px;

transform: scale(1) rotate(-50deg);

}

100% {

top: -50px;

right: -280px;

transform: scale(1) rotate(-50deg);

}

}

Programska koda 4.5: Pravilo z uporabo lastnostjo transform za povečavo in rotacijo

Slika 4.4: Približevanje in rotacija opice


17

4.2.6 Razteg in skrčitev

Učinek za razteg in skrčitev smo v animaciji uporabili pri odbijajoči žogi, oz. pri

»skakajočem« nilskem konju na žogi. Ko se žoga odbije od tal, namreč pričakujemo, da

se upogne. To smo dosegli s pomočjo CSS 3 lastnosti transform in vrednostjo scale(x,y)

znotraj pravila glavne slike kot v programski kodi 4.6. Pravilo, ki ga vidimo na spodnji sliki,

raztegne žogo na 120 % originalne širine ter skrči na 80 % originalne višine. S tem

dosežemo učinek odboja, kot je prikazano na sliki 4.5.

@keyframes zogas {

50% {

transform: translateY(+10px) scale(1.2,0.8);

}

}

Programska koda 4.6: Pravilo za razteg/skrčitev žoge

Slika 4.5: Prikaz raztega in skrčitve žoge

4.2.7 Ponovitev animacije

Animacije določenih elementov se lahko ponovijo poljubno mnogokrat. Na primer spust

opice se zgodi samo enkrat, spust in dvig zaveze natančno dvakrat in žongliranje

mnogokrat. Za določanje števila ponovitev smo uporabili animation-iteration-count, kjer

smo enostavno vnesli število ponovitev ali pri neskončnem ponavljanju vrednost infinite.

Uporabili smo tudi dva različna načina ponavljanja, določena z lastnostjo animation-

direction. Prvi, in tudi privzeti način je normalen (vrednost normal), kjer se animacija

predvaja tako kot je specificirana. Drugi način je alternativni (vrednost alternate), kjer je


18

vsak drugi krog ponavljanja animacije predvajan v nasprotni smeri11. Programska koda

4.7 prikazuje del CSS pravila, ki določa animacijo žonglerjeve rumene žogice. Ta

animacija se ponavlja v neskončno v normalni smeri. Drugače je pri animaciji spusta

zavese, kjer se animacija ponovi dvakrat v alternativni smeri, kot prikazuje slika 4.6 in je

zapisano v programski kodi 4.8.

#zogaRumena {

background-color: #ffd530;

border: 2px solid #ecbf0e;

width: 35px;

height: 35px;

border-radius: 20px;

z-index: 4;

position: absolute;

top: 170px;

left: 280px;

animation-name: zoga;

animation-duration: 2.5s;

animation-timing-function: linear;

animation-direction: normal;

animation-iteration-count: infinite;

}

Programska koda 4.7: Pravilo glavne slike, kjer se animacija ponavlja v neskončnost

11 Uporabimo lahko tudi vrednosti reverse ali alternate-reverse.


19

#cirkus #zavesa1 {

height: 500px;

width: 800px;

position: absolute;

top: -500px;

background-image: url(slike/zavesa1.png);

background-position: center bottom;


background-size: cover;

z-index: 6;

animation-name: zavesa;

animation-duration: 3s;

animation-timing-function: easy;

animation-iteration-count: 2;

animation-delay: 22s;

animation-direction: alternate;

}

@keyframes zavesa{

0% { top: -500px; }

100% { top: 0px; }

}

Programska koda 4.8: Pravilo, kjer se animacija ponovi dvakrat v alternativni smeri

Slika 4.6: Animacija zavese


20

4.2.8 Časovna funkcija in hitrost animacije

Hitrost animacije je ključnega pomena za doseganje učinka »resničnosti«. Za njeno

določanje smo uporabili lastnost animation-duration, s katero smo v sekundah ali

milisekundah določili trajanje animacije. Še večji nadzor nad hitrostjo je omogočila

časovna funkcija animation-timing-function. Pri uporabi te funkcije smo uporabili različne

vrednosti, ki so podprte v CSS 3. Privzeta vrednost je easy, kar v prevodu pomeni

lahkotno – počasni začetek, lahkotno pospeševanje in na koncu pojemanje. Če želimo

pospeševanje bolj izraziti, moramo uporabiti vrednost easy-in-out. To smo uporabili pri

padcu žoge (na zgornji točki počasi, temu sledi pospešek pri padanju in na koncu

upočasnitev, ko se žoga dotakne tjulnja). Njeni alternativi sta easy-in (počasen začetek)

ter easy-out (pojemanje na koncu). Easy-in smo uporabili pri balonih in klovnu z balonom

na začetku animacije, easy-out pa pri spustu klovna z baloni. Za animacije, kjer ne prihaja

do sprememb v hitrosti, kot je animacija žogice pri žonglerju, smo uporabili vrednost

linear.

4.2.9 Dodatne funkcionalnosti

Poleg opisanih lastnosti, ki jih omogoča CSS, predvsem različica CSS 3, obstaja še več

elementov, ki poskrbijo za privlačnejšo podobo animacije.

Napise v animaciji lahko na primer polepšamo z uporabo različnih pisav, tudi tistih, ki jih

brskalniki ne poznajo, z uporabo CSS 3 pravila @font-face, kot lahko vidimo v programski

kodi 4.9., rezultat le-tega pa na sliki 4.7.

#naslov .circus {

font-family: cirkusPisava;

margin-left: 40px;

display: block;

}

@font-face {

font-family: cirkusPisava;

src: url('fonts/MONBIJOUX.ttf')

}

Programska koda 4.9: Pravilo za uvoz in uporabo različnih pisav


21

Slika 4.7: Naslov z uporabo različnih pisav

Prav tako smo v naši animaciji s pomočjo CSS 3 lastnosti border-radius narisali tudi

žogice pri žonglerju (kot prikazuje slika 4.2) in s pomočjo lastnosti border-radius in

transform: scaleX() elipso pri naslovu, ki jo lahko vidimo na sliki 4.7.

Za glasbo v ozadju smo uporabili HTML5 značko <audio>, katere uporaba je prikazana v

programski kodi 4.10. Zaradi uporabe lastnosti autoplay se začne glasba samodejno

predvajati ob obisku strani. Lokacijo datoteke in tip smo določili z značko source. Uporabo

elementa audio sicer podpirajo vse trenutne verzije brskalnikov, ne podpirajo pa nujno

vseh formatov datotek. Trenutno so uradno podprti formati MP3, Wav in Ogg, zaradi težav

pri podpori brskalnikov pa smo pri naši animaciji uporabili dve datoteki, eno tipa MP3

(podpira Internet Explorer 9.0, Google Chrome in Apple Safari) in drugo Ogg (podpira

Firefox, Google Chrome in Opera). Pri uporabi elementov HTML5 moramo posebej paziti

na uporabo ustrezne deklaracije.


22

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS 3 cirkus</title>

<link href="cirkus.css" rel="stylesheet" type="text/css" />

<link href="zongler.css" rel="stylesheet" type="text/css" />

<link href="tjulen.css" rel="stylesheet" type="text/css" />

<link href="zivali.css" rel="stylesheet" type="text/css" />

<script src="prefixfree.min.js" type="text/javascript"></script>

</head>

<body>

<audio autoplay="autoplay">

<source src="Circus.mp3" type="audio/mpeg" />

<source src="Circus.ogg" type="audio/ogg" />

</audio>

<div id="cirkus">

Programska koda 4.10: Del kode za predvajanje glasbe


23

5 PRIPOMOČKI PRI IZDELAVI ANIMACIJE

Čeprav je izgradnja animacije z jezikom CSS 3 dokaj nova metoda, so se na tržišču že

pojavili različni pripomočki, tako plačljivi kot tudi brezplačni, za pomoč pri izdelavi

animacij. V nadaljevanju predstavljamo nekaj primerov.

5.1 Orodje -prefix-free

Orodje -prefix-free- je brezplačno dostopna koda, ki deluje tako, da CSS pravilom dodaja

ustrezne predpone, kot so -webkit-, -moz- in -o-, če so te zahtevane. Uporaba tega orodja

omogoča razvijalcu, da mu pri pisanju kode ni treba skrbeti za uporabo pravilnih predpon

in lahko piše brez njih.

Brskalniki, ki podpirajo -prefix-free- so namizni brskalniki IE9+, Opera 10+, Firefox 3.5+,

Safari 4+ in Chrome, ter mobilni brskalniki Safari, Android browser, Chrome in Opera

Mobile. Pri uporabi v starejših verzijah brskalnika, ki tega orodja ne podpirajo, se CSS ne

»pokvari«, le vrednosti ne dobijo predpone, kar pri animaciji ne predstavlja težav, saj te

starejše verzije brskalnikov modula CSS 3 Animations tako ne podpirajo.

Orodje uporabimo tako, da vključimo datoteko prefixfree.js, ki jo dobimo brezplačno na

spletu, kamorkoli znotraj spletne strani. Programska koda 5.1 prikazuje CSS pravilo, ki je

napisano brez uporabe ustreznih predpon. Ko potem odpremo spletno stran s spletnim

brskalnikom Firefox in jo pregledamo s Firebug-om, kot prikazuje programska koda 5.2,

vidimo, da je orodje dodalo ustrezno predpono pred vsa pravila za animacijo.


24

#zongler {

height: 400px;

width: 380px;

background-image: url(slike/zongler.png);

background-position: top left;


position: absolute;

z-index: 2;

opacity: 0;

overflow: hidden;

float: left;

left: -15px;

bottom: 10px;

animation-name: prikaz_zongler;

animation-duration: 14s;

animation-timing-function: linear;

animation-delay: 25s;

}

Programska koda 5.1: CSS pravilo brez uporabe predpon

#zongler {

-moz-animation-delay: 25s;

-moz-animation-duration: 14s;

-moz-animation-name: prikaz_zongler;

-moz-animation-timing-function: linear;

background-image: url("file:///C:/Users/Tjasa/Desktop/ITK-UN

Tjasa%20Soster/cirkus/slike/zongler.png");

background-position: left top;


bottom: 10px;

float: left;

height: 400px;

left: -15px;

opacity: 0;

overflow: hidden;

position: absolute;

width: 380px;

z-index: 2;

}

Programska koda 5.2: CSS pravilo ob pregledu strani v brskalniku Firefox z orodjem Firebug


25

Slabost uporabe tega orodja je, da deluje le s pomočjo JavaScripta, ki pa se ga pri

izdelavi animacij z jezikom CSS 3 poskušamo izogniti, saj ga lahko uporabnik onemogoči

znotraj brskalnika.

5.2 Orodja za animacijo

Čeprav je sama sintaksa za izgradnjo animacij dokaj preprosta, se na tržišču pojavlja vse

več programov, ki omogočajo izgradnjo CSS 3 animacije. Orodja, kot so Sencha

Animator, Adobe Edge in Tumult Hype, so v pomoč razvijalcem, ki nimajo dobrega

tehničnega znanja.

Testirali smo Sencha Animator, katerega poskusno verzijo je mogoče dobiti brezplačno na

uradni spletni strani podjetja Sencha. Orodje omogoča izdelavo CSS 3 animacij in je

namenjeno predvsem izdelavi reklamnih sporočil, enostavnih iger in drugih animacij za

mobilne naprave. Glavno okno programa, ki je prikazano na sliki 5.1, je sestavljeno iz

orodjarne (ang. Tools Panel), časovnega traka (ang. Object Tree/Timeline), projektnega

platna (ang. Project Canvas) in zavihka z lastnostmi (ang. Properties Panel) [13].

Slika 5.1: Glavno okno programa Sencha Animator [13]


26

V orodju smo zgradili enostavno animacijo in jo nato testirali v brskalnikih. Izgradnja

animacije se začne tako, da najprej na projektno platno dodamo želene elemente.

Elementi, ki jih lahko vstavimo so kvadrat, krog, besedilo, slika in video ter jih najdemo v

orodjarni. Pri izdelavi naše animacije smo uporabili tekst, krog in sliko balona. Sledilo je

spreminjanje videza elementov (barva ozadja, obroba, velikost pisave …) s

spreminjanjem vrednosti v zavihku za lastnosti.

Elemente smo nato animirali s pomočjo časovnega traka. Uporabili smo različne načine

animacije. Sliki balona smo dodali gibanje, kar smo storili enostavno z določanjem pozicije

v različnih časovnih točkah, kot prikazuje slika 5.2. Prva pozicija balona je pri 1 sekundi,

ko je balon v najnižji legi in zadnja pri 4,5 sekunde, ko je v najvišji poziciji. Prav tako lahko

v zavihku za lastnosti spreminjamo časovno funkcijo, kot smo jo mi pri balonu na vrednost

ease-out.

Slika 5.2: Različne pozicije balona

Pri animaciji kroga smo uporabili različne funkcije, ki jih omogoča modul Transform. Tako

smo krog najprej raztegnili po horizontalni osi na 150 % in po vertikalni osi skrčili na 60 %

ter takšen krog rotirali za 20°. Vse to smo dosegli s spreminjanjem vrednosti v zavihku za

lastnosti, kot prikazuje slika 5.3. Na koncu smo kroglo še povečali na 200 % njene

originalne velikosti z nastavitvijo lastnosti Scale na 200 %.


27

Slika 5.3: Lastnosti za skrčitev/razteg in rotacijo krogle

Za animacijo napisa – bledenje in pojavitev, smo uporabili lastnost Opacitiy, ki jo najdemo

znotraj zavihka Transform in za spreminjanje barve lastnost Fill color znotraj zavihka

Type.

Tako izdelano animacijo lahko nato izvozimo kot html dokument. Taka animacija deluje v

vseh webkit brskalnikih. Če želimo, da animacijo podpira tudi brskalnik Firefox, moramo

ob ustvarjanju novega projekta seveda to možnost tudi označiti. Edini brskalnik, ki tako

narejene animacije ne predvaja, je Opera, ki ne generira kode z ustrezno predpono.


28

6 SKLEP

Specifikacija za izdelavo animacij s CSS 3 modulom Animation je med nami že več let in

menimo, da lahko postane pomembno orodje oz. jezik na področju izdelave animacij za

spletnih strani.

Sama sintaksa animacije je relativno preprosta in temelji na pravilu glavne slike (ang.

keyframe rule). Za razliko od sintakse za izgradnjo JavaScript animacij je pravilo glavne

slike lažje razumljivo tistim oblikovalcem, ki nimajo znanja iz programiranja. Tistim

razvijalcem spletnih strani, ki so do zdaj uporabljali Flash tehnologijo, je pravilo glavne

slike že znano, kar pomeni lažji prehod na CSS 3 animacije. Obenem se znotraj pravil

uporabljajo tudi različna CSS pravila, ki so večini oblikovalcev spletnih strani že znana.

Vsi tisti, ki jim je bolj všeč vizualni pristop k izgradnji animacije (ne pisanje kode), lahko

uporabijo različna orodja za pomoč pri izgradnji animacij, kot je Sencha Animation.

Njihova prednost je, da omogočajo izgradnjo CSS 3 animacije tudi tistim, ki ne poznajo

sintakse CSS. Prav tako so programi razviti podobno kot program Adobe Flash.

Menimo, da je glavna prednost CSS 3 animacij v tem, da za svoje delovanje znotraj

brskalnika ne potrebujejo vtičnikov. Prav tako ne vsebuje skriptnih jezikov, katerih

izvajanje lahko uporabniki znotraj brskalnikov onemogočijo bodisi vede ali nevede.

Predvajanje animacije zgrajene z jezikom CSS 3 poteka enako tekoče, kot animacije

zgrajene s Flashom in JavaScriptom. Prav tako je čas nalaganja spletne strani primerljiv z

drugimi tehnologijami.

Med samo izgradnjo animacije smo ugotovili, da lahko z uporabo elementov iz modula za

animacijo dosežemo večino učinkov, ki jih ponuja tudi Flash in tako vnesemo več življenja

na našo spletno stran. Predvidevamo, da bo ob večji podpori brskalnikov CSS 3

animacijam, pri tem mislimo predvsem na podporo brskalnika Internet Explorer (s

prihodom različice 10), zaživelo več spletnih strani, ki bodo namesto tehnologije Flash

uporabljale jezik CSS 3.


29

7 VIRI

[1] D. S. McFarland, CSS : the missing manual, O'Reilly Media, 2009.

[2] "CSS Syntax," W3CSchools, [Online]. Dostopno na:

http://www.w3schools.com/css/css_syntax.asp, zadnji dostop 12. 8. 2012.

[3] T. A. Felke-Morris, Basics of web design : HTML5 & CSS3, Boston: Addison-Wesley,

2012.

[4] Z. M. Gillenwater, Stunning CSS3: A project-based guide to the latest in CSS,

Berkeley: New Riders, 2011.

[5] P. Gasston, Tho Book of CSS3, San Francisco: No Starch Press, 2011.

[6] "CSS3 Introduction," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/

css3/css3_intro.asp, zadnji dostop 7. 9. 2012.

[7] "CSS Reference," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/

cssref/default.asp, zadnji dostop 18. 8. 2012.

[8] "CSS3 Animations," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/

css3/css3_animations.asp, zadnji dostop 6. 8. 2012.

[9] A. Rachel, The CSS3 Anthology: Take Your Sites to New Heights, Collingwood:

SitePoint, 2012.

[10] "Firefox Release Notes," Mozzila Firefox, [Online]. Dostopno na: https://www.mozilla.

org/en-US/firefox/5.0/releasenotes/, zadnji dostop 11. 8. 2012.

[11] C. Mills, "Making a move with CSS3 animations," DEV.OPERA, 25. 4. 2012. [Online].

Dostopno na: http://dev.opera.com/articles/view/css3-animations/, zadnji dostop 11.

8. 2012.

[12] "Internet Explorer 10 Guide for Developers : CSS : Animations," Windows Internet

Explorer, 6. 5. 2012. [Online]. Dostopno na: http://msdn.microsoft.com/en-

us/library/ie/hh673530%28v=vs.85%29.aspx, zadnji dostop 11. 5. 2012.

[13] "Sencha Animator Guided Tour," Sencha Docs, [Online]. Dostopno na:

http://docs.sencha.com/animator/1-1/#!/guide/tour, zadnji dostop 25. 8. 2012.


30

[14] D. Jackson, D. Hyatt, C. Marrin, S. Galineau and D. L. Baron, "W3C," 3. 4. 2012.

[Online]. Dostopno na: http://www.w3.org/TR/css3-animations/, zadnji dostop 18. 7.

2012.

[15] "HTML5 Audio," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/

html5/html5_audio.asp., zadnji dostop 18. 7. 2012.

[16] T. Waterhouse, "The Guide To CSS Animation: Principles and Examples," Smashing

Magazine, 14. 9. 2011. [Online]. Dostopno na: http://coding.smashingmagazine.com/

2011/09/14/the-guide-to-css-animation-principles-and-examples/, zadnji dostop 18. 7.

2012.

[17] E. Weyl, "A masterclass in CSS animations," .net Magazine, 13. 9. 2011. [Online].

Dostopno na: http://www.netmagazine.com/tutorials/masterclass-css-animations,

zadnji dostop 18. 7. 2012.

[18] L. Lazaris, "An Introduction To CSS3 Keyframe Animations," Smashing Magazine,

17. 5. 2011. [Online]. Dostopno na: http://coding.smashingmagazine.com/2011/05/17/

an-introduction-to-css3-keyframe-animations/, zadnji dostop 18. 7. 2012.

animacija z uporabo jezika css 3

Documents