PRIMERJAVA DOMORODNIH ANIMACIJ CSS3 IN ANIMACIJ Z …

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Rok Penšek

PRIMERJAVA DOMORODNIH ANIMACIJ CSS3 IN ANIMACIJ Z UPORABO JAVASCRIPTA

Diplomsko delo

Maribor, september 2016

PRIMERJAVA DOMORODNIH ANIMACIJ CSS3

IN ANIMACIJ Z UPORABO JAVASCRIPTA

Diplomsko delo

Študent: Rok Penšek

Študijski program: visokošolski strokovni študijski program

Informatika in tehnologije komuniciranja

Smer: -

Mentor: red. prof. dr. Vili Podgorelec

Somentor: asist. Sašo Karakatič

Lektor: Žiga Oset, mag.

III

ZAHVALA

Rad bi se zahvalil svojim staršem,

ki so mi omogočili študij in mi vedno stali ob strani.

IV

Primerjava domorodnih animacij CSS3 in

animacij z uporabo JavaScripta

Ključne besede: spletne animacije, JavaScript, css3, html, primerjalna analiza, razvoj

programske opreme

UDK: 004.774-026.12(043.2)

Povzetek

V diplomskem delu na podlagi izdelanih testov s tehnologijami CSS3, JavaScript in jQuery

opisujemo in podrobno analiziramo zmogljivost in odzivnost spletnih animacij ter pokritost

tehnologij med najbolj uporabljenimi mobilnimi brskalniki. V prvem poglavju so

predstavljene tehnologije, v naslednjih poglavjih pa izdelava testov in načini testiranja. V

končnem poglavju so podani rezultati testiranj.

V

Comparison between native CSS3 animations

and JavaScript animations

Keywords: web animations, JavaScript, css3, html, benchmark analysis, software

development

UDK: 004.774-026.12(043.2)

Abstract

In the thesis, we describe and analyse performance of the built web animations using

either CSS3, JavaScript or jQuery technology as well as their compatibility between

today's most used mobile browsers. The first section briefly presents used technologies.

In the chapters, which follow, we describe how the tests and ways we used to benchmark

performance were made. At the end, we present benchmark results.

VI

KAZALO

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

1.1 Metode diplomskega dela .................................................................................................... 2

2 SPLETNE ANIMACIJE .................................................................................... 3

2.1 Kaj so spletne animacije ...................................................................................................... 3

2.2 Zgodovina razvoja spletnih animacij .................................................................................. 4

2.2.1 GIF .................................................................................................................................. 4

2.2.2 Adobe Flash in Shockwave ............................................................................................ 5

2.2.3 Java ................................................................................................................................ 6

2.3 Analiza obstoječih tehnologij za dosego animacij na spletu ........................................... 7

2.3.1 CSS3 .............................................................................................................................. 7

2.3.2 JavaScript ....................................................................................................................... 8

3 OPIS UPORABLJENIH TEHNOLOGIJ ......................................................... 10

3.1 HTML5 .................................................................................................................................. 10

3.2 Javascript ............................................................................................................................ 12

3.3 jQuery + UI ........................................................................................................................... 12

3.4 CSS3 .................................................................................................................................... 12

4 IZDELAVA TESTNEGA OKOLJA ................................................................. 13

4.1 Orodje za zaznavo FPS ...................................................................................................... 14

4.2 Implementacija orodij za animiranje ................................................................................. 16

4.2.1 Implementacija z uporabo JavaScript-a ....................................................................... 17

4.2.2 Implementacija z uporabo jQuery + UI knjižice ............................................................ 20

4.2.3 Implementacija z uporabo CSS3 standarda ................................................................. 22

VII

5 REZULTATI ANALIZE .................................................................................. 26

5.1 Podpora s strani brskalnikov ............................................................................................ 27

5.2 Težavnost implementacije ................................................................................................. 28

5.3 Hitrost animacije................................................................................................................. 28

5.3.1 Chrome ......................................................................................................................... 29

5.3.2 Firefox ........................................................................................................................... 37

5.3.3 Vgrajeni brskalniki ........................................................................................................ 44

6 SKLEP ........................................................................................................... 52

7 VIRI IN LITERATURA ................................................................................... 53

VIII

KAZALO SLIK

SLIKA 2.1: FILMSKI TRAK ODBIJAJOČE SE ŽOGICE .................................................................................... 3

SLIKA 2.3: PRIKAZ TESTNE FLASH ANIMACIJE PREKO NAMENSKEGA VTIČNIKA ........................................... 4

SLIKA 2.4: PRIKAZ SHOCKWAVE TEHNOLOGIJE PREKO NAMENSKEGA VTIČNIKA ......................................... 6

SLIKA 2.5: PRIKAZ NALAGANJE JAVA APPLETA PREKO NAMENSKEGA VTIČNIKA .......................................... 7

SLIKA 2.6: PRIMER CSS3 KODE ............................................................................................................ 8

SLIKA 2.7: PRIMER JS KODE .................................................................................................................. 9

SLIKA 2.8: LOGOTIP WEBGL ............................................................................................................... 10

SLIKA 3.1: LOGOTIP HTML5 ............................................................................................................... 11

SLIKA 3.2: PRIMER JS KODE Z UPORABO JQUERY FUNKCIJ .................................................................... 12

SLIKA 4.1: TESTNO OKOLJE – ANIMACIJA ELEMENTOV PO X OSI S POMOČJO CSS3 IN JS ........................ 14

SLIKA 4.2: PRIKAZ REZULTATOV TESTIRANJA V TESTNEM OKOLJU .......................................................... 16

SLIKA 5.1: TESTIRANJE NA MOBILNIH NAPRAVAH ................................................................................... 27

KAZALO GRAFOV

GRAF 5.1: ANIMACIJA PO X OSI Z UPORABO CSS3 + JS V BRSKALNIKU CHROME ................................... 29

GRAF 5.2: ANIMACIJA PO X OSI Z UPORABO JS V BRSKALNIKU CHROME ................................................. 30

GRAF 5.3: ANIMACIJA PO X OSI Z UPORABO JQUERY V BRSKALNIKU CHROME ........................................ 31

GRAF 5.4: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO CSS3 + JS V BRSKALNIKU CHROME ............ 32

GRAF 5.5: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JS V BRSKALNIKU CHROME ......................... 33

GRAF 5.6: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JQUERY V BRSKALNIKU CHROME ................. 34

GRAF 5.7: SPREMEMBA BARVE ELEMENTOV Z UPORABO CSS3 + JS V BRSKALNIKU CHROME ................. 35

GRAF 5.8: SPREMEMBA BARVE ELEMENTOV Z UPORABO JS V BRSKALNIKU CHROME .............................. 36

GRAF 5.9: SPREMEMBA BARVE ELEMENTOV Z UPORABO JQUERY V BRSKALNIKU CHROME ...................... 37

GRAF 5.10: ANIMACIJA PO X OSI Z UPORABO CSS3 + JS V BRSKALNIKU FIREFOX .................................. 38

GRAF 5.11: ANIMACIJA PO X OSI Z UPORABO JS V BRSKALNIKU FIREFOX ............................................... 39

GRAF 5.12: ANIMACIJA PO X OSI Z UPORABO JQUERY V BRSKALNIKU FIREFOX ....................................... 40

GRAF 5.13: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JS V BRSKALNIKU FIREFOX ....................... 41

GRAF 5.14: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JQUERY V BRSKALNIKU FIREFOX ............... 42

GRAF 5.15: SPREMEMBA BARVE ELEMENTOV Z UPORABO JS V BRSKALNIKU FIREFOX ............................. 43

GRAF 5.16: SPREMEMBA BARVE ELEMENTOV Z UPORABO JQUERY V BRSKALNIKU FIREFOX..................... 44

IX

GRAF 5.17: ANIMACIJA PO X OSI Z UPORABO CSS3 + JS V VGRAJENEM BRSKALNIKU ............................. 45

GRAF 5.18: ANIMACIJA PO X OSI Z UPORABO JS V VGRAJENEM BRSKALNIKU .......................................... 46

GRAF 5.19: ANIMACIJA PO X OSI Z UPORABO JQUERY V VGRAJENEM BRSKALNIKU .................................. 47

GRAF 5.20: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO CSS3 + JS V VGRAJENEM BRSKALNIKU ..... 48

GRAF 5.21: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JS V VGRAJENEM BRSKALNIKU .................. 48

GRAF 5.22: SPREMEMBA VELIKOSTI ELEMENTOV Z UPORABO JQUERY V VGRAJENEM BRSKALNIKU .......... 49

GRAF 5.23: SPREMEMBA BARVE ELEMENTOV Z UPORABO CSS3 + JS V VGRAJENEM BRSKALNIKU .......... 50

GRAF 5.24: SPREMEMBA BARVE ELEMENTOV Z UPORABO JS V VGRAJENEM BRSKALNIKU ....................... 50

GRAF 5.25: SPREMEMBA BARVE ELEMENTOV Z UPORABO JQUERY V VGRAJENEM BRSKALNIKU ............... 51

X

SEZNAM UPORABLJENIH KRATIC

JS – JavaScript

PHP – PHP HyperText Preprocessor

HTML – HyperText Markup Language

CSS – Cascading Style Sheets

API – Application Programming Interface

DOM – Document Object Model

GIF – Graphics Interchange Format

UI – User Interface

FPS – Frames Per Second

RGB – Red Green Blue

ECMA – European Computer Manufacturer's Association

HiDPI – High Dots Per Inch

WebGL – Web Graphics Library

1

1 UVOD

V hitro rastoči dobi računalništva in informatike se vsak dan razvijajo nova orodja ter

standardi, ki nam programerjem omogočajo lažje, hitrejše predvsem pa nove načine

razvijanja rešitve za različne probleme. Splet pri tem nikakor ne zaostaja, kar dokazuje

tudi najnovejši HTML5 in CSS3 standard.

V diplomskem delu smo prikazali uporabo CSS3 animacij ter jih primerjali s starim

načinom animacije DOM elementov, za katerega je potrebna JavaScript in jQuery knjižica.

Namen diplomske naloge je prikazati številne poti, ki so na voljo za dosego navzven

identične animacije in tudi prednosti in slabosti pri vsaki izmed uporabljenih tehnologij.

Pri izdelavi testov smo se osredotočali predvsem na najbolj osnoven in optimalen način

animacije preprostih DOM elementov, ki je možen z tehnologijami, ki jih bomo testirali.

Primerjava je bila izvedena na večjem številu mobilnih naprav in tudi na osebnih

računalnikih na podlagi možnosti animacije posamične rešitve, kompatibilnosti z

brskalniki, hitrosti animacije ter težavnosti same implementacije.

Cilji diplomskega dela so:

raziskati postopek razvoja testne spletne strani z uporabo CSS3, JavaScript-a in

jQuery knjižice,

podrobno preučiti in analizirati delovanje vseh izmed naštetih tehnologij za

animacijo DOM elementov,

raziskati postopek uporabe orodja za razvijalce in razhroščevanje v brskalnikih na

mobilnih napravah in osebnih računalnikih.

Raziskovalna vprašanja diplomskega dela so:

ali je CSS3 standard učinkovitejši in hitrejši za dosego ciljev preproste animacije

DOM elementov od ostalih metod?

Ali je CSS3 standard dovolj dobro podprt s strani brskalnikov za današnjo rabo pri

izdelavi spletne rešitve?

2

1.1 Metode diplomskega dela

Pri raziskovanju smo uporabili opisno oz. deskriptivno metodo študije literature, dostopne

na spletu. Na podlagi te literature smo nato izdelali serijo številnih testov z uporabo CSS3,

JavaScript in jQuery tehnologije. Pomagali smo si tudi z že zaključenimi delčki kode ali

celotnimi knjižicami prosto dostopnimi na spletu, ki so nam olajšale odgovoriti na

raziskovalna vprašanja na podlagi točnejših performančnih meritev.

3

2 SPLETNE ANIMACIJE

2.1 Kaj so spletne animacije

Animacija je v osnovi iluzija gibanja, ki se doseže s hitrim prikazovanjem sličic, kjer je

vsaka malenkost drugačna od predhodne [1]. Če namesto fizičnih sličic animiramo

elemente (ali njihovo vsebino), ki se prikažejo v brskalniku, lahko rečemo, da se izvaja

spletna animacija.

Slika 2.1: Filmski trak odbijajoče se žogice

4

2.2 Zgodovina razvoja spletnih animacij

Kljub temu da so brskalniki začeli podpirati prve osnutke HTML značk že leta 1993,

začenši z brskalnikom Mosaic [2], pa so spletne animacije ugledale luč sveta šele leta

1996, ko je takrat popularni brskalnik Netscape z različico 2.0 pričel podpirati JavaScript in

animirane GIF sličice. Ob izidu HTML 3.2 različice leto kasneje je bilo možno vgraditi v

samo spletno stran Java applet, katerega je ločeno preko namenskega vtičnika poganjala

Java. Kasneje se je z izidom HTML 4.0 leta 1999 možnost uporabe različnih programskih

vtičnikov razširila [3] tudi na ostalo programsko opremo, kjer je največ slave požel Flash.

Slika 2.2: Prikaz testne Flash animacije preko namenskega vtičnika

2.2.1 GIF

GIF oz. Graphics Interchange Format je rastrski slikovni format, ki ima zmožnost prikazati

256 barv iz 24-bitnega barvnega modela RGB. Čeprav je kot format obstajal že leta 1987,

pa je možnost animacije bila dodana šele s specifikacijo GIF89a leta 1989. Od leta 1996,

5

ko ga je podprl prvi brskalnik NetScape pa vse do danes, ga še vedno videvamo na

spletnih straneh za prikaz kratkih animacij. Danes ga ponekod na spletu že izpodriva

format WebM. [4]

2.2.2 Adobe Flash in Shockwave

Čeprav podpora za oba vtičnika dandanes pada, sta bila na začetku izredno popularna.

Podjetje Macromedia je po prevzemu FutureSplash Animator izdalo prvo različico Flash

programskega orodja. Ta je sestavljal Flash IDE in tudi brezplačen Flash Player vtičnik za

brskalnike. Ker je Flash bil zasnovan z mislijo o animiranju vektorske grafike, je bil kot

nalašč za interaktivne vsebine in animacije, saj je omogočal prikaz izredno bogatih vsebin,

ki so vsega skupaj znašale majhno količino podatkov, kar je bilo v času začetka interneta

ob počasnih hitrostih ključnega pomena.

Shockwave je bil zasnovan zaradi želje po prikazu dinamične vsebine in se je na začetku

uporabljal za prikaz vsebin in igric na CD ploščah. Ob prevzemu je Macromedia ob

takratnem internetnem trendu po hitrem postopku preselila tehnologijo na splet, kjer še

danes opazimo nekaj 3D igric, izdelanih s tem vtičnikom. [5], [6], [7]

6

Slika 2.3: Prikaz Shockwave tehnologije preko namenskega vtičnika

2.2.3 Java

Prva različica Java 1.0 je izšla leta 1995. Ena izmed prednosti takrat (in tudi danes) je bila

obljuba, da bo aplikacija napisana v tem jeziku delovala na vseh napravah. Zaradi

podobne sintakse s C/C++ programskim jezikom ter kasneje vtičnikom, ki je omogočal

zagon appleta v spletnem brskalniku, je postal izredno priljubljen. Dandanes ga vidimo v

brskalniku še samo v kakšnih specifičnih spletnih aplikacijah, saj za animiranje že

obstajajo boljše alternative, hkrati pa so brskalniki že pričeli z umikom podpore. Pri

najnovejši različici brskalnika Chrome privzeto ni več možen zagon Java appletov, saj je

bila ta ukinjena z 42 različico Chrome, ki onemogoča NPAPI (Netscape Plugin API)

vtičnike. Za nadaljnje prikazovanje Java appletov je potrebno omogočiti NPAPI podporo v

naprednih nastavitvah, iskreno pa je le vprašanje časa, ko ta opcija ne bo več možna. V

preostalih brskalnikih je potrebno eksplicitno dovoliti zagon Java appleta, v najnovejšem

brskalniku Microsoft Edge pa je podpora popolnoma ukinjena. Iz teh razlogov dandanes

izdelave interaktivne spletne vsebine s pomočjo Java appletov ni več priporočljivo. [8]

7

Slika 2.4: Prikaz nalaganje Java appleta preko namenskega vtičnika

2.3 Analiza obstoječih tehnologij za dosego animacij na spletu

Danes obstaja veliko število tehnologij, ki omogočajo prikaz interaktivnih vsebin ter

animacij. Pri slednjih se še vedno za zahtevne animacije uporabljajo različni vtičniki, kot

so Unity, Flash player, Shockwave, Java, ki jih mora uporabnik imeti naložene pred

ogledom vsebine, hkrati pa obstajajo tudi tehnologije, ki so vgrajene v sam brskalnik.

Animacije se lahko dosežejo s pomočjo CSS3, JavaScript, Canvas ali WebGL.

2.3.1 CSS3

CSS3 je tretja različica priljubljenega jezika, ki skrbi za samo prezentacijo spletne strani.

Čeprav je od izida prve različice do 100 % kompatibilnosti s spletnimi brskalniki na

začetku preteklo več let, ga danes še vedno uporabljamo za stiliranje spletnih strani.

Medtem ko sta prvi dve različici definirali pozicioniranje DOM elementov, izbiro pisav,

barv, senc ter nekaj interaktivnosti s selektorji, kot so hover, focus ipd., smo šele s CSS3

pridobili možnost animiranja elementov preko transition lastnosti.

Sedaj lahko z nekaj vrstic CSS3 ter HTML-ja ustvarjamo preproste animacije, ki so bile

prej možne samo z uporabo JS ali dodatnih vtičnikov.

8

Če brskalnik podpira CSS3 transition lastnost, lahko z njo definiramo, kako se izvaja

animacija bodisi linearno, ease-in ali drugače kot tudi, kako dolgo jo želimo izvajati.

Podamo lahko tudi če želimo izvajati animacijo z zamikom, število ponovitev in katero

CSS lastnost želimo animirati – če te ne podamo, so privzeto animirane vse spremenjene

lastnosti. Zatem kadarkoli spremenimo vrednost CSS lastnosti, kjer je podedovana

transition lastnost, se avtomatsko izvede v njej definirana animacija. Za spreminjanje teh

lastnosti lahko uporabljamo prej omenjene selektorje ali keyframes pravilo.

Pri keyframes definiramo z imenom ter nato znotraj v zavitih oklepajih specificiramo

lastnosti, ki jih želimo animirati v specifične vrednosti v posamezni točki animacije.

V primeru, če nam to ne ustreza in bi želeli več fleksibilnosti, pa se bomo morali obrniti na

JS skriptni jezik, ki bi nam omogočal dinamično nastavljanje CSS vrednosti. [9]

Slika 2.5: Primer CSS3 kode

2.3.2 JavaScript

JavaScript je objektni skriptni programski jezik, ki ga je razvil Netscape, da bi spletnim

programerjem pomagal pri ustvarjanju interaktivnih spletnih strani. Jezik je bil razvit

neodvisno od Jave, vendar si z njo deli številne lastnosti in strukture. Največkrat se ga

uporablja za upravljanje z HTML DOM elementi, s katerimi poživi spletne strani, zadnje

čase pa ga podpirajo tudi ostali programi in servisi (Adobe Photoshop, NodeJS, PDF).

Animiranje elementov na spletni strani je možno z JavaScript-om v navezi z

9

manipuliranjem vrednosti CSS lastnosti, atributi DOM elementa ali neposredno s samim

DOM elementom.

JavaScript podpora je vgrajena v vseh večjih brskalnikih. Velikokrat se zgodi, da dodatni

objekti ali funkcije, ki so na voljo v brskalnikih in niso določeni v ECMA standardu,

preprosto ne obstajajo v specifičnih brskalnikih, so drugače poimenovani ali pa imajo

nepopolno implementacijo. V takšnih primerih je potrebno spisati nadomestne funkcije

(»polyfill«), ki simulirajo manjkajočo funkcionalnost. [10], [11]

Slika 2.6: Primer JS kode

2.3.2.1 Canvas

Canvas je HTML5 element, ki se uporablja za izris grafike. Za animiranje le-te ali splošno

interakcijo je potreben JavaScript jezik. Preko Canvas API, ki ga podpirajo vsi novejši

brskalniki, je možno z JavaScript-om dinamično ustvarjati poljubne like ter jih animirati. Ta

oblika animiranja se največkrat uporablja za posamične manjše zaključne pripomočke na

sami spletni strani ali pa za izdelavo kakšne preprostejše animacije ali igre, ki se izvaja v

svojem okvirju. Prednost animiranja in slabost canvasa je ta, da stanje elementov ni

definirano. To pomeni, da ni možno izvedeti na samem elementu, kje točno ta je v danem

trenutku, ampak je potrebno to beležiti na strani skripte, ki izrisuje oz. animira element v

canvasu. Prednost tega pa je tudi ta, da brskalnik ne potrebuje vsakič, ko se element

premakne v danem trenutku, izračunavati različne vrednosti, kjer ta je, kakšne so njegove

dimenzije in podobno. Zaradi teh razlogov je v primerjavi z animacijami DOM elementov

občutno hitrejši. Slaba stran animacij v canvasu se izkaže v primerih, če bi te poganjali na

novejših HiDPI napravah, ki imajo na zaslonu večje število pikslov na palec. Ker se ob

vsakem premiku izrisuje celoten canvas element, v rasterski obliki to pomeni, da lahko

zmogljivost na teh napravah zaradi slabše strojne opreme (predvsem mobilne naprave)

drastično upade. [12], [13]

10

2.3.2.2 WebGL

WebGL je JavaScript API, ki omogoča renderiranje 3D objektov na canvas DOM element.

Za razliko od ostalih načinov animiranja ta potrebuje poleg podpore brskalnika tudi strojno

podporo za WebGL. Ker se ga uporablja v kombinacij s canvasom, imata oba skupaj

precej podobne lastnosti. WebGL za razliko od 2D canvas API-ja izvaja matematične

operacije namesto na procesorju kar na grafični kartici. Zaradi tega so animacije preko

WebGL tudi v 3D izredno tekoče. [14], [15], [16]

Slika 2.7: Logotip WebGL

3 OPIS UPORABLJENIH TEHNOLOGIJ

V diplomskem delu smo se odločili preveriti, kako tekoče so animacije z uporabo HTML5,

JavaScript, jQuery + UI in CSS3 tehnologij. Zanje smo se odločili, saj uporabljajo vgrajene

tehnologije, ki so na voljo v vseh popularnih brskalnikih in izvajajo animacije nad DOM

elementi. Zato v diplomskem delu, kjer smo testirali, nismo pokrivali različnih vtičnikov

(Flash, Java, Silverlight...) ali uporabe canvas oz. WebGL.

3.1 HTML5

HTML5 je peta različica označevalnega jezika, ki nam omogoča v glavi dokumenta

vključiti pravila, ki jih morajo mobilne naprave spoštovati. V diplomski nalogi smo se

posluževali predvsem »Viewport« meta HTML znački, ki mobilni napravi sporoči stopnjo

povečave in prilagodi širino HTML dokumenta zaslonu naprave. S tem smo se izognili

težavi, kjer bi bila spletna stran po uspešnem nalaganju prikazana precej pomanjšana.

[17]

11

Slika 3.1: Logotip HTML5

12

3.2 Javascript

JavaScript je nepogrešljiv jezik, ki smo ga uporabili pri vseh testih zaradi lažjega testiranja

in začetne postavitve testnega okolja. Kasneje smo ga pri specifičnih testih uporabljali za

animiranje s pomočjo spreminjanja osnovnih css lastnosti, kot so širina, višina, odmiki.

3.3 jQuery + UI

jQuery je ena izmed najbolj popularnih knjižic, ki temelji na JavaScript jeziku in nam

omogoča manipuliranje z DOM elementi na sintaktično lažji način. Knjižica sama poskrbi

za manjkajoče funkcionalnosti in napake med različnimi brskalniki ter nam tako olajša delo

med programiranjem. Zadnje čase to knjižico vse bolj izpodrivajo najnovejše različice

JavaScripte, saj so funkcionalnosti, ki jih jQuery ponuja že privzeto vgrajene in na voljo.

jQuery UI je dodatna knjižica za jQuery in nam omogoča dodatne funkcije pri delu z DOM

elementi, ali le-te priredi za mobilne naprave. Konkretno smo jo v naših testnih primerih

uporabili za animiranje spremembe barv v DOM elementih.

Slika 3.2: Primer JS kode z uporabo jQuery funkcij

3.4 CSS3

CSS3 smo pri nalogi uporabili za animiranje DOM elementov. V pomoč so nam prišle prav

lastnosti v tretji enačici CSS-a, ki so namenjene animaciji. Te so:

Transform – omogoča transformiranje elementov z uporabo translate, skew, scale

in podobnih akcij,

Translate – namenjena animaciji elementov po x ali y osi,

Transition – namenjena podajanju informacij o sami želeni animaciji,

Keyframes – namenjena podajanju same poti animacije.

13

4 IZDELAVA TESTNEGA OKOLJA

Za lažje testiranje in primerjavo domorodnih CSS3 animacij in animacij z uporabo

JavaScript-a smo izdelali spletno stran, kjer primerjamo 3 različne in hkrati najbolj pogoste

manipulacije in animacije DOM elementov. Zaobsegli smo naslednje:

animacija elementov po X osi,

sprememba velikosti elementov,

sprememba barve elementov.

Za vsako manipulacijo smo s čimvečjim približkom izdelali teste z uporabo naslednjih

danes najbolj pogosto uporabljenih tehnologij:

CSS3 + JavaScript,

JavaScript,

jQuery.

V vseh primerih smo uporabljali JavaScript jezik za lažje generiranje DOM elementov, pri

čemer smo delo animacije prepustili bodisi CSS3, JavaScript ali jQuery knjižici. Pri testih

smo zaradi lažjega zbiranja informacij in splošnega testiranja na mobilnih napravah

uporabljali še PHP jezik na strežniški strani in tudi uporabo piškotkov ter GET parametrov

v navezi z JavaScript-om.

Piškotke smo uporabljali za lažjo sledljivost, katera naprava je izvajala kateri test, medtem

ko smo preko GET parametrov pripravili specifični test brez dodatnega dela oz. vnašanja

podatkov na sami napravi. Ob koncu testiranja posamičnega testa smo zbrane podatke

pošiljali iz mobilne naprave na lokalni strežnik, točneje PHP datoteki, ki je podatke

shranila v ločeno datoteko. Informacije v teh datotekah smo kasneje uporabili pri izdelavi

končnih rezultatov in grafov v programu Office Excel.

14

Slika 4.1: Testno okolje – Animacija elementov po x osi s pomočjo CSS3 in JS

4.1 Orodje za zaznavo FPS

Potrebovali smo nekakšen način preverbe zmogljivosti naših animacij. Prvotna ideja je

bila uporabiti za ta namen orodja za razvijalce, ki so na voljo v vseh novejših brskalnikih.

Po začetnem testiranju smo opazili, da vsi brskalniki ne nudijo opcije preprostega

pregleda števila sličic na sekundo. Brskalnik Chrome to omogoča, medtem ko je pri

ostalih možno okvirno izvedeti to informacijo s pogledom grafa v časovnem (Timeline)

zavihku. Ker smo teste poganjali tudi na večjem številu naprav, smo želeli priti do teh

informacij z avtomatizacijo.

Na spletu smo zasledili nekaj orodij, ki omogočajo beleženje števila sličic na sekundo s

pomočjo JavaScript-a. Večina orodij na spletu je bila zasnovana tako, da bomo ob vsaki

spremembi lastnosti elementa klicali funkcijo, ki bi nato štela FPS. Ta rešitev bi prišla prav

15

v primerih, kjer bi izvajali animacije izključno z uporabo JavaScript-a, vendar ker tukaj

primerjamo tudi animacije s CSS3, teh nismo mogli uporabiti, saj v teh primerih ne

kličemo funkcije, ki bi animirala elemente po korakih in zato torej ne moremo beležiti FPS

s pomočjo teh orodij.

Kasneje smo na spletu našli knjižico oz. orodje, ki uporablja podoben princip, vendar pa

izvaja animacijo izključno v ločenem DOM elementu ter uporablja CSS3 za animacijo

preprostega elementa. S pomočjo uporabe requestAnimationFrame funkcije ali v primerih

da ta ni podprt, setInterval funkcije skuša čim večkrat izračunati odmik samega elementa,

dokler ta ne prispe do konca animacije v 1 sekundi. Ob tem dogodku izračuna, kolikokrat

smo bili uspešni pri izračunu odmika elementa ter nam nato sporoči ta rezultat. Zatem se

animacija ponovno ponovi, števec pa resetira za naslednjo sekundo in tako naprej, dokler

ne zaključimo s testiranjem. Ker se na ta način ne zanašamo več na klic funkcije v

vsakem koraku animacije naših elementov, smo s tem močno poenostavili testiranje in se

hkrati izognili dodatni obremenitvi samega testiranja z odvečnimi JS klici.

V kasnejšem testiranju smo opazili pomanjkljivost pri meritvi CSS3 animacij, kjer je orodje

za razvijalce sporočilo večje število sličic na sekundo, kot nam je sporočao izbrani JS

FPSMeter. Ker bi bili z interaktivnostjo animacije ali aplikacije vezani na čas, kadar bi se

lahko najhitreje prožila naslednja requestAnimationFrame ali setInterval funkcija, smo

navkljub netočnosti prikaza animacije upoštevali število proženj teh funkcij. [18]

16

Slika 4.2: Prikaz rezultatov testiranja v testnem okolju

4.2 Implementacija orodij za animiranje

Pri animacijah smo si pomagali s funkcijami in lastnostmi, ki so na voljo v jezikih

JavaScript, HTML5 in CSS3 in tudi z uporabo zunanjih knjižic. Osnova kode je bolj ali

manj nespremenjena pri vseh implementacijah. Razlikuje se le v načinu in tehnologiji

animacije. Zaradi obsega smo predstavili le bistvene dele kode in podali kratko

obrazložitev.

17

4.2.1 Implementacija z uporabo JavaScript-a

Pri implementaciji z uporabo JavaScript-a smo urejali CSS lastnosti DOM elementov. Pri

implementaciji animacije spreminjanja barve elementov smo si pomagali tudi z zunanjo JS

knjižico. Za tekočo animacijo smo uporabljali requestAnimationFrame funkciji. Če ta ne bi

obstajala, bi uporabljali setInterval funkcijo, ki bi skrbela za naslednji korak animacije.

4.2.1.1 Animacija elementov po X osi

Za uspešno animacijo premika elementov po X osi od skrajne leve do desne strani ekrana

smo potrebovali širino dokumenta, ki je na voljo. Glede na velikost elementa, širine

ekrana, poti in čas poti, v katerem jo mora element prepotovati, smo lahko izračunali

posamičen korak. Nato smo v vsakem klicu requestAnimationFrame funkcije premaknili

element za določen korak. Ko je element prišel do konca, smo element pričeli premikati v

nasprotno smer in kasneje zopet obratno, tako da smo zaključili animacijo elementa v

nedogled.

18

4.2.1.2 Sprememba velikosti elementov

Pri spreminjanju velikost elementov smo se držali podobnih načel. Tukaj smo za razliko

od prejšnjega testa manipulirali s širino in višino elementa namesto z nastavitvijo levega

odmika v CSS.

jsAnimation.prototype._animate = function(element) { var reverse = false; var elementWidth = parseInt(element.style.width); var position = 0; var sizeWidth = this.size.width; var step = parseFloat(((sizeWidth - elementWidth) / (this.animationTime * 60))); var moveElement = function(element) { element = element instanceof Element ? element : element.target; if (reverse) { if (element.style.left == '0px') { reverse = false; position += step; element.style.left = position + 'px'; } else { if (position - step < 0) { element.style.left = '0px'; } else { position -= step; element.style.left = position + 'px'; } } } else { if (element.style.left == (sizeWidth - elementWidth) + 'px') { reverse = true; position -= step; element.style.left = position + 'px'; } else { if (position + step > (sizeWidth - elementWidth)) { element.style.left = (sizeWidth - elementWidth) + 'px'; } else { position += step; element.style.left = position + 'px'; } } } requestAnimationFrame(function(){ moveElement(element); }); }; requestAnimationFrame(function(){ moveElement(element); }); };

19

jsAnimation.prototype._animate = function(element) { var reverse = false; var size = parseInt(element.style.width); var maxSize = this.defaultValues.scaleMaxSize; var minSize = this.defaultValues.scaleMinSize; var stepFirstTime = parseFloat(((maxSize - size) / (this.animationTime * 60))); var step = parseFloat(((maxSize - minSize) / (this.animationTime * 60))); var moveElement = function(element, firstTime) { element = element instanceof Element ? element : element.target; if (reverse) { if (element.style.width == minSize + 'px' && element.style.height == minSize + 'px') { reverse = false; size += step; element.style.width = size + 'px'; element.style.height = size + 'px'; } else { if (size - step < minSize) { element.style.width = minSize + 'px'; element.style.height = minSize + 'px'; } else { size -= step; element.style.width = size + 'px'; element.style.height = size + 'px'; } } } else { if (element.style.width == maxSize + 'px' && element.style.height == maxSize + 'px') { reverse = true; if (firstTime) { firstTime = false; } size -= step; element.style.width = size + 'px'; element.style.height = size + 'px'; } else { if (size + (firstTime ? stepFirstTime : step) > maxSize) { element.style.width = maxSize + 'px'; element.style.height = maxSize + 'px'; } else { size += (firstTime ? stepFirstTime : step); element.style.width = size + 'px'; element.style.height = size + 'px'; } } } requestAnimationFrame(function(){ moveElement(element, firstTime); }); }; requestAnimationFrame(function(){ moveElement(element, true); }); };

20

4.2.1.3 Sprememba barve elementov

Pri animaciji spremembe barv elementov, smo si pomagali s Sweep JS knjižico z

namenom točnejše animacije vmesnih barv med začetno in končno barvo. Barve se

menjujejo v zaporedju rdeča, zelena, modra in obratno. [19]

4.2.2 Implementacija z uporabo jQuery + UI knjižice

Pri implementaciji z uporabo jQuery smo uporabljali funkcije, ki nam jih knjižica ponuja za

manipuliranje elementov. Preden smo lahko uporabili to knjižico, smo jo morali vključiti v

HTML dokument.

jsAnimation.prototype._animate = function(element) { // starts the animation var getAnimationOptions = function(callback) { return { duration: 1000, callback: callback, space: 'RGB' }; }; var forthTransition = function() { sweep(element, 'backgroundColor', '#00ff00', '#ff0000', getAnimationOptions(firstTransition)); }; var thirdTransition = function() { sweep(element, 'backgroundColor', '#0000ff', '#00ff00', getAnimationOptions(forthTransition)); }; var secondTransition = function() { sweep(element, 'backgroundColor', '#00ff00', '#0000ff', getAnimationOptions(thirdTransition)); }; var firstTransition = function() { sweep(element, 'backgroundColor', '#ff0000', '#00ff00', getAnimationOptions(secondTransition)); }; firstTransition(); };

21


Pri implementaciji smo takoj opazili, da je bilo precej lažje doseči cilj z uporabo jQuery

knjižice ter vgrajene animate funkcije. Preračunavanje korakov in ostalih zadev smo z

lahkoto prepustili sami jQuery knjižici. Potrebno je bilo le sporočiti želene končne pozicije,

čas animacije, časovno funkcijo za animacijo ter funkcijo, ki se naj kliče ob uspešni

zaključeni animaciji.


Pri spreminjanju velikosti elementov smo uporabili identično tehniko. Spremenjene so bile

le CSS lastnosti, ki smo jih spreminjali na samem elementu.

jQueryAnimation.prototype._animate = function(element) { var elementWidth = parseInt(element.style.width); var sizeWidth = this.size.width; var animationTime = this.animationTime; var animate = function() { $(element).animate({'left': (sizeWidth - elementWidth) + 'px'}, animationTime, 'linear').animate({'left': '0px'}, animationTime, 'linear', animate); }; animate(); };

jQueryAnimation.prototype._animate = function(element) { var elementWidth = parseInt(element.style.width); var sizeWidth = this.size.width; var animationTime = this.animationTime; var animate = function() { $(element) .animate({ 'width': this.defaultValues.scaleMaxSize + 'px', 'height': this.defaultValues.scaleMaxSize + 'px' }, animationTime, 'linear') .animate({ 'width': this.defaultValues.scaleMinSize + 'px', 'height': this.defaultValues.scaleMinSize + 'px' }, animationTime, 'linear', animate); }.bind(this); animate(); };

22


Tako kot prejšnji dve animaciji smo tudi spremembo barve elementa dosegli z enakimi

funkcijami. Slabost je le ta, da smo morali vključiti dodatno UI knjižico za jQuery, saj bi v

nasprotnem primeru lahko le nastavljali barve brez animacij in z njim povezanih vmesnih

barv.

4.2.3 Implementacija z uporabo CSS3 standarda

Pri CSS3 smo skušali prenesti vso breme na CSS, pri čemer bi JS služil samo na začetku

za vzpostavitev potrebnih CSS pravil, ki so bile potrebna za animacijo. Da smo lahko

celotno animacijo opravili s pomočjo CSS3, smo uporabili keyframes. Ker je potrebno

keyframes definirati na začetku, smo zaradi tega omejeni na fiksno animacijo ali pa je

potrebno ustvariti specifično pot za vsak element posebej, kar lahko pomeni veliko število

CSS vrstic. Pri testiranju smo glede na največji element generirali CSS keyframes, tako

da elementi večji od tega niso bili prikazani izven okna brskalnika.

jQueryAnimation.prototype._animate = function(element) { var elementWidth = parseInt(element.style.width); var sizeWidth = this.size.width; var animationTime = this.animationTime; var animate = function() { $(element) .animate({ backgroundColor: '#00ff00' }, animationTime, 'linear') .animate({ backgroundColor: '#0000ff' }, animationTime, 'linear') .animate({ backgroundColor: '#00ff00' }, animationTime, 'linear') .animate({ backgroundColor: '#ff0000' }, animationTime, 'linear', animate); }.bind(this); animate(); };

23


Pri animaciji elementov po X osi smo na podlagi širine dokumenta v brskalniku in

največjega možnega elementa izračunali, kakšno pot lahko ta element opravi, da še

vedno ostane znotraj mej. Elementi, ki so manjši, imajo v tem primeru krajšo pot. Paziti

smo morali tudi na CSS3 podporo v brskalnikih.

cssAnimation.prototype._setUpCSSAnimation = function() { var keyframePrefix = getAnimationKeyframePrefix(), style = document.createElement('style'); style.type = 'text/css'; document.head.appendChild(style); var stylesheet = document.styleSheets[0]; stylesheet.insertRule( '@' + keyframePrefix + 'keyframes animateBoxy {' + 'from { ' + this.supportedTransform + ': ' + 'translateX(0px); } ' + 'to { ' + this.supportedTransform + ': ' + 'translateX(' + (this.size.width <= this.defaultValues.maxSize ? 0 : this.size.width - this.defaultValues.maxSize) + 'px); }' + '}', stylesheet.rules.length ); function getAnimationKeyframePrefix() { var animation = false, animationString = 'animation', keyframePrefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', elm = document.createElement('div'); if (elm.style.animationName !== undefined) { animation = true; } if (animation === false) { for (var i = 0; i < domPrefixes.length; i++) { if (elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined) { pfx = domPrefixes[ i ]; animationString = pfx + 'Animation'; keyframePrefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } return keyframePrefix; } };

24


Pri spreminjanju velikost elementov smo uporabljali enako predlogo, le da smo v tem

primeru spreminjali širino in višino elementa. Pri tem smo uporabljali enaka načela, da bi

elementi ostajali znotraj mej brskalnika.

cssAnimation.prototype._setUpCSSAnimation = function(firstTime) { var keyframePrefix = getAnimationKeyframePrefix(), style = document.createElement('style'); style.type = 'text/css'; document.head.appendChild(style); var stylesheet = document.styleSheets[0]; if (!firstTime) { stylesheet.deleteRule(stylesheet.rules.length - 1); } stylesheet.insertRule( '@' + keyframePrefix + 'keyframes animateBoxy {' + 'from { height: ' + this.defaultValues.scaleMinSize + 'px; width: ' + this.defaultValues.scaleMinSize + 'px; } ' + 'to { height: ' + this.defaultValues.scaleMaxSize + 'px; width: ' + this.defaultValues.scaleMaxSize + 'px; } ' + '}', stylesheet.rules.length ); function getAnimationKeyframePrefix() { var animation = false, animationString = 'animation', keyframePrefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', elm = document.createElement('div'); if (elm.style.animationName !== undefined) { animation = true; } if (animation === false) { for (var i = 0; i < domPrefixes.length; i++) { if (elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined) { pfx = domPrefixes[ i ]; animationString = pfx + 'Animation'; keyframePrefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } return keyframePrefix; } };

25


Pri spreminjanju barv smo prišli do težave, saj smo morali animirati tri barve. V keyframe

lahko pot podamo od določene do določene točke, v nasprotnem primeru pa s procenti. V

zadnjem koraku smo bili zato primorani dodati 1 % do zaključenih 100 % poti animacije ali

pa vse korake v odstotkih specificirati na nekaj decimalk.

26

5 REZULTATI ANALIZE

Izdelane teste smo poganjali na naslednjih mobilnih napravah in brskalnikih:

- iPhone 6s Plus - iOS 9.3:

o Chrome - 52.0.2743.84,

o Safari - 601.1 (vgrajeni);

cssAnimation.prototype._setUpCSSAnimation = function(firstTime) { var keyframePrefix = getAnimationKeyframePrefix(), style = document.createElement('style'); style.type = 'text/css'; document.head.appendChild(style); var stylesheet = document.styleSheets[2]; if (!firstTime) { stylesheet.deleteRule(stylesheet.rules.length - 1); } stylesheet.insertRule( '@' + keyframePrefix + 'keyframes animateBoxy {' + '33% { background-color: #ff0000 } ' + '66% { background-color: #00ff00 } ' + '100% { background-color: #0000ff } ' + '}', stylesheet.cssRules.length ); function getAnimationKeyframePrefix() { var animation = false, animationString = 'animation', keyframePrefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', elm = document.createElement('div'); if (elm.style.animationName !== undefined) { animation = true; } if (animation === false) { for (var i = 0; i < domPrefixes.length; i++) { if (elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined) { pfx = domPrefixes[ i ]; animationString = pfx + 'Animation'; keyframePrefix = '-' + pfx.toLowerCase() + '-'; animation = true; break; } } } return keyframePrefix; } };

27

- Sony Xperia Z3 - Android 5.0.2:

o Chrome - 52.0.2743.98,

o Chrome - 40.0.2214.89 (vgrajeni);

- Samsung Galaxy S5 - Android 5.0:

o Chrome - 52.0.2743.98,

o Chrome - 44.0.2403.133 (vgrajeni);

- Samsung Galaxy S7 - Android 6.0.1:

o Chrome - 52.0.2743.98,

o Chrome - 44.0.2403.133 (vgrajeni),

o Firefox - 48.0;

- Samsung Note 4 - Android 6.0.1:

o Chrome - 52.0.2743.98,

o Chrome - 44.0.2403.133 (vgrajeni),

o Firefox - 48.0;

- iPhone 5C - iOS 9.3.2:

o Safari - 601.1 (vgrajeni).

Slika 5.1: Testiranje na mobilnih napravah

5.1 Podpora s strani brskalnikov

Pri animacijah, opravljenih izključno s pomočjo JavaScript-a ali jQuery knjižice in

manipuliranjem osnovnih CSS lastnosti, dandanes težko najdemo brskalnik, ki tega ne bi

omogočal. Problemi lahko nastajajo v primerih, kjer bi uporabniki onemogočili izvajanje JS

28

v brskalniku. V teh primerih bi animacije lahko dosegli le z CSS3 na brskalnikih, ki bi ga

podpirali. Hkrati bi ob tem morali te animacije popolnoma izolirati od JS za nemoteno

delovanje v takšnih primerih. V praksi bi tako dosegli le najpreprostejše animacije. Pri

kompatibilnosti CSS3 lastnosti pa kljub hitrim popravkom in posodobitvam brskalnikov ti

še vedno niso popolnoma kompatibilni, kar smo opazili tudi pri izvajanju naših testov.

Pri večjem številu DOM elementov se pri CSS3 animacijah dogaja, da postanejo animirani

elementi delno odrezani ali skriti. V določenem primeru se je pri izvajanju testa, ki bazira

na CSS3 animaciji na Samsung Galaxy S7 napravi zgodilo tudi, da se je sama ugasnila in

ponovno zagnala. Pri nekaterih lastnostih je še vedno potrebno pred lastnostmi dodajati

ime pogona brskalnika: -webkit-, -moz- in podobno.

5.2 Težavnost implementacije

Iz primerkov kode, ki so bili podani v enem izmed prejšnjih poglavij, smo z lahkoto

ugotovili, da je najmanj kode potrebno prav pri uporabi jQuery knjižice. JavaScript

postavljamo na drugo mesto, saj lahko sicer z malo več kode še vedno popolnoma

dinamično upravljamo posamezen DOM element. CSS3 na podlagi težavnosti

implementacije postavljamo na zadnje mesto, saj v animacije s pomočjo keyframe

lastnosti ne morejo doseči ekvivalentne stopnje dinamičnosti kot tiste izdelane z JS ali

jQuery knjižico.

5.3 Hitrost animacije

Pri testiranju animacije dosežene s CSS3 na videz izpadejo bolj tekoče. Kljub temu da se

animacije pri CSS3 izvajajo na ločenih kompozicijskih plasteh, pa vseeno negativno

vplivajo na število klicev requestAnimationFrame funkcije. V naslednjih podpoglavjih so

prikazani grafi meritev animacij na podlagi števila klicev na requestAnimationFrame.

V grafih na Y osi prikazujemo število klicev na requestAnimationFrame, medtem ko po x

osi pretečeni čas do zaključka animacije.

29

5.3.1 Chrome

5.3.1.1 Animacija po X osi – CSS3 + JS

Galaxy S7 se je ob bremenu prikaza nad 300 elementov ugasnil in ponovno prižgal. V

zgornjem grafu je prikazal le maksimalno število 300 elementov. Ostali brskalniki so

animirali 450 elementov.

Graf 5.1: Animacija po X osi z uporabo CSS3 + JS v brskalniku Chrome

Iz grafa je razvidno, da je najhitreje prikazal vseh 450 elementov Samsung Galaxy S5,

medtem ko je iPhone 6s ohranjal največje število klicev na requestAnimationFrame.

Galaxy S7 je imel od ostalih Android naprav precej višje rezultate.

30

5.3.1.2 Animacija po X osi – JavaScript

iPhone 6s Plus je pri izvajanju tega testa ob generiranju več kot 150 krogov preventivno

prenehal z izvajanjem testa v zavihku in ga ponovno zagnal z obvestilom o neljubem

dogodku. Zaradi tega smo morali omejiti maksimalno število generiranih krogov na 150.

Graf 5.2: Animacija po X osi z uporabo JS v brskalniku Chrome

Kljub največjim številom klicev na requestAnimationFrame iPhone 6s Plus je ta potreboval

polovico časa za prikaz animacije 150 krogov, medtem ko so preostale naprave bile

zmožne generirati in prikazati 450 krogov. Opazimo lahko tudi da Samsung Note 4 pri

manjšem številu generiranih krogov za malenkost prednjači pred ostalimi Android

napravami.

5.3.1.3 Animacija po X osi – jQuery

V tem in vseh naslednjih primerih smo preko brskalnika Chrome morali na iPhone 6s Plus

poganjati test pri maksimalno 150 generiranih krogih, saj nam v nasprotnem primeru ne bi

uspelo uspešno izvesti testa s končnimi rezultati.

31

Graf 5.3: Animacija po X osi z uporabo jQuery v brskalniku Chrome

Pri številu prikazu števila sličic na sekundo vodi iPhone 6s Plus, medtem ko z animacijo

450 elementov prvi zaključi Samsung Galaxy S7. Možno je takoj opaziti, da se je čas

animacije 450 elementov s pomočjo jQuery knjižice podaljšal tudi za 12 sekund.

5.3.1.4 Sprememba velikosti elementov – CSS3 + JS

Pri prikazu klicev na requestAnimationFrame opazimo v spodnjem grafu, da pri animaciji

spremembe velikosti elementov močno vodi iPhone 6s Plus, medtem ko Galaxy Note 4

uspešno kot prvi zaključi animacijo.

32

Graf 5.4: Sprememba velikosti elementov z uporabo CSS3 + JS v brskalniku Chrome

Opaziti je možno da kljub boljšim začetnim rezultatom števila klicev

requestAnimationFrame funkcije pri Samsung Note kasneje prevlada iPhone 6s Plus.

5.3.1.5 Sprememba velikosti elementov – JavaScript

Pri spremembi velikosti elementov z uporabo JavaScript-a smo opazili da je Samsung

Galaxy S5 pri testu med 2. sekundo in 8. sekundo prikazal več ali enako število sličic na

sekundo kot njegov precej bolje strojno podkovani naslednik Galaxy S7.

33

Graf 5.5: Sprememba velikosti elementov z uporabo JS v brskalniku Chrome

5.3.1.6 Sprememba velikost elementov – jQuery

Pri poganjanju testa, izdelanega z jQuery knjižico, lahko opazimo izredno daljše čase za

uspešen zaključek animacije 450 elementov v primerjavi s tehnologijo CSS3 ali

JavaScript.

34

Graf 5.6: Sprememba velikosti elementov z uporabo jQuery v brskalniku Chrome

iPhone 6s Plus je skozi animacijo dosegal najvišje rezultate, medtem ko je Samsung

Galaxy S7 bil prvi, ki je uspešno dokončal test. Na zadnjem mestu lahko opazimo

Samsung Galaxy S7, ki je potreboval 47 sekund za dokončanje testa.

5.3.1.7 Sprememba barve elementov – CSS3 + JS

Pri spreminjanju barve elementov z uporabo CSS3 iPhone 6s ni animiral spremembe

barv. Kljub temu da je bil zmožen poganjati test do konca z dobrimi rezultati za ceno

nezmožnosti animiranja barv, smo ga izključili iz grafa.

35

Graf 5.7: Sprememba barve elementov z uporabo CSS3 + JS v brskalniku Chrome

Čas za uspešen zaključek testa je bil med napravami z razliko Sony Xperie Z3 enak.

Samsung Note 4 z boljšo strojno opremo kot ostale testne naprave zmore prikazati na

začetku največ sličic na sekundo, kasneje pa lahko opazimo, da ga med 3. in 8. sekundo

prehiteva presenetljivo slabše podkovana naprava Sony Xperia.

5.3.1.8 Sprememba barve elementov – JavaScript

Pri tem testu smo opazili, da je iPhone 6s Plus zmožen animirati samo do 150 elementov,

ki skozi animacijo spreminjajo barvo.

36

Graf 5.8: Sprememba barve elementov z uporabo JS v brskalniku Chrome

Spet lahko opazimo, da je kljub nižji omejitvi maksimalnega števila generiranja krogov

iPhone 6s s prepričljivo razliko v številu prikaza sličic na sekundo vodil pred drugimi

napravami. Note 4 je med Android napravami na začetku animacije zmogel prikazati na

ekranu naprave 6 sličic na sekundo več kot preostale Android naprave.

5.3.1.9 Sprememba barve elementov – jQuery

Kot v vseh prejšnjih primerih, lahko opazimo, da uporaba jQuery knjižice kljub izredno

enostavni implementaciji znatno podaljša čas za uspešno generiranje 450 elementov, ki

spreminjajo barvo.

37

Graf 5.9: Sprememba barve elementov z uporabo jQuery v brskalniku Chrome

iPhone 6s je bil, da bi se izognili sesutju zavihka v brskalniku ponovno omejen na

maksimalno 150 generiranih DOM elementov, medtem ko so preostale naprave bile

zmožne končati test z generiranjem in animiranjem 450 elementov. Prva naprava, ki je

uspešno zaključila test, je bila Samsung Galaxy S7 v 22 sekundah, medtem ko je Sony

Xperia Z3 potrebovala 105 sekund.

5.3.2 Firefox

Po seriji testiranj v brskalniku Firefox smo bili zaradi slabe zmogljivosti primorani

zmanjšati maksimalno število generiranih DOM elementov na 150. Zaradi enake različice

mobilnega brskalnika Firefox so bili rezultati zaradi razlike v strojni opremi mobilnih naprav

konsistentni. V vseh primerih se bolje odreže Samsung Galaxy S7, medtem ko se na

trenutke Note 4 tesno približa pri prikazu števila sličic na sekundo.

38


V spodnjem grafu lahko opazimo, da je Samsung Galaxy S7 sicer z majhno prednostjo v

številu klicev requestAnimationFrame funkcije uspel za 12 sekund hitreje animirati 150

elementov kakor Note 4.

Graf 5.10: Animacija po X osi z uporabo CSS3 + JS v brskalniku Firefox

39


Pri JS implementaciji animacije DOM elementov po X osi lahko opazimo, da sta v danem

trenutku obe napravi za krajši čas dosegali identične rezultate pri številu prikaza sličic na

sekundo. Samsung Galaxy S7 je uspešno zaključil test pred Note 4 za 10 sekund.

Graf 5.11: Animacija po X osi z uporabo JS v brskalniku Firefox

40


Pri poganjanju testa animacije po X osi s pomočjo jQuery smo pri Note 4 opazili, da je

potreboval 3 sekunde več časa za zaključek animacije vseh objektov kot pri poganjanju

testa izdelanega z JS. Samsung Galaxy S7 skozi celoten čas animacije vodi v številu

prikaza sličic na sekundo in ga uspešno konča pri 25 sekundah. Note 4 uspešno zaključi

test 14 sekund kasneje.

Graf 5.12: Animacija po X osi z uporabo jQuery v brskalniku Firefox


Preverjanje spremembe velikosti elementov s pomočjo CSS3 v Firefox brskalniku ni bila

možna zaradi JS napake.

41


Pri testiranju animacije, kjer spreminjamo velikost elementov, smo na začetku opazili

porast števila prikaza sličic na sekundo v 2 sekundi pri napravi Samsung Galaxy S7.

Animacijo je prvi uspešno zaključil Galaxy S7, Note 4 pa je zaostajal za 18 sekund.

Graf 5.13: Sprememba velikosti elementov z uporabo JS v brskalniku Firefox

42


Pri spremembi velikosti elementov smo opazili enak čas, ki ga je Samsung Note 4

potreboval, kljub temu da je bila razlika pri testiranju v Chrome brskalniku med JS in

jQuery implementacijo precej bolj izrazita. Slednja se je namreč izkazala za približno 14

sekund počasnejšo.

Graf 5.14: Sprememba velikosti elementov z uporabo jQuery v brskalniku Firefox


Analiza animacije spremembe barve elementov s pomočjo CSS3 v Firefox brskalniku ni

bila možna zaradi JS napake.

43


Pri spremembi barv elementov na testnih mobilnih napravah se je izkazal Samsung

Galaxy S7, kjer je ob pričetku animacije prikazal za 8 sličic več od Note 4. Prav tako je

animacijo končal pri 23 sekundah, medtem ko je za identični test Note 4 potreboval 10

sekund več.

Graf 5.15: Sprememba barve elementov z uporabo JS v brskalniku Firefox


Pri izvajanju iste animacije z uporabo jQuery smo opazili počasnejše animiranje DOM

elementov na začetku kot pri implementaciji testa z JS. Razlika med tema dvema

implementacijama je za približno 10 % v prid JS implementaciji.

44

Graf 5.16: Sprememba barve elementov z uporabo jQuery v brskalniku Firefox

5.3.3 Vgrajeni brskalniki


Android naprave na vgrajenih brskalnikih niso bile zmožne prikazati več kot 50 animiranih

elementov, medtem ko sta iPhone-a generirala vseh 450 krogov.

45

Graf 5.17: Animacija po X osi z uporabo CSS3 + JS v vgrajenem brskalniku

Iz grafa je razvidno, da se je presenetljivo najbolje med Android napravami odrezal prav

Samsung Galaxy S5. Uspešen zaključek testa z 50 elementi so vse Android naprave

končale v 6 sekundah.

46


Pri animiranju elementov po X osi z uporabo JavaScript jezika smo morali nastaviti limit

generiranih elementov pri iPhone 6s plus na maksimalno 150.

Graf 5.18: Animacija po X osi z uporabo JS v vgrajenem brskalniku

Presenetljivo se je tukaj zopet izredno dobro odrezal Samsung Galaxy S5. Prva mobilna

naprava, ki je končala animacijo, pa je bila Sony Xperia Z3.

47


V tem in vseh naslednjih primerih smo bili primorani na iPhone 6s Plus poganjati test pri

maksimalno 150 generiranih krogih.

Graf 5.19: Animacija po X osi z uporabo jQuery v vgrajenem brskalniku

Galaxy S5 zopet za nekaj sličic na sekundo premaga ostale Android naprave kljub daljši

izvedbi procesa generiranja krogov. Najhitrejša mobilna naprava, ki opravi test v 17

sekundah, je bila Samsung Galaxy S7.


V tem testu smo morali poleg iPhone 6s Plus omejiti tudi iPhone 5c, in sicer na

maksimalno 150 generiranih DOM elementov.

48

Graf 5.20: Sprememba velikosti elementov z uporabo CSS3 + JS v vgrajenem brskalniku


V spodnjem grafu je mogoče opaziti boljšo zmogljivost Galaxy S5 pri manjšem številu

generiranih krogov. Največ časa za prikaz 450 animiranih elementov je porabil iPhone 5c.

Graf 5.21: Sprememba velikosti elementov z uporabo JS v vgrajenem brskalniku

49


Pri poganjanju testa izdelanega z jQuery knjižico opazimo, da najbolj prednjačita Galaxy

S7 in Note 4. iPhone 6s plus je omejen na 150 generiranih krogov, medtem ko smo pri

iPhone 5c bili primorani omejiti število DOM elementov na 300. Največ časa je za prikaz

vseh elementov je potreboval Samsung Galaxy S5.

Graf 5.22: Sprememba velikosti elementov z uporabo jQuery v vgrajenem brskalniku


Pri testiranju smo izločili oba iPhone-a, saj nista bila zmožna animirati barve elementov.

Opaziti je možno, da Samsung Galaxy S5 prednjači pred ostalimi napravami in zmore

izvesti več klicev na requestAnimationFrame.

50

Graf 5.23: Sprememba barve elementov z uporabo CSS3 + JS v vgrajenem brskalniku


Na Android napravah lahko takoj opazimo za približno 10 % slabšo začetno zmogljivost

prikaza sličic na sekundo kot pri uporabi CSS3 + JS tehnologije.

Graf 5.24: Sprememba barve elementov z uporabo JS v vgrajenem brskalniku

51


Pri teh testih smo bili primorani omejiti maksimalno število generiranih DOM elementov na

300 za iPhone 5c, Xperia Z3 ter Galaxy S5. iPhone 6s Plus ostaja omejen na maksimalno

150 generiranih krogov.

Graf 5.25: Sprememba barve elementov z uporabo jQuery v vgrajenem brskalniku

52

6 SKLEP

V diplomski nalogi smo raziskali tehnologije ki omogočajo različne načine za dosego

animacij na spletu. Preizkusili smo današnje najbolj popularne tehnike z uporabo

aktualnih tehnologij za dosego preprostih animacij na spletu, hkrati pa tudi uspešno

analizirali zmogljivost le-teh.

Pri izdelavi in testiranju smo ugotovili, da je najbolj enostaven način programiranja kljub

izredno slabši odzivnosti in zmogljivosti z uporabo jQuery knjižice. Ker ima ta knjižica tudi

veliko število popravkov za različne brskalnike, je bilo možno poganjati teste, izdelane z

njo na vseh mobilnih napravah brez napak. Pri zmogljivosti same animacije smo ugotovili,

da se testi z majhno prednostjo pred JavaScript-om hitreje končajo. Ugotovili smo, da

kljub večjem številu sličic na sekundo, ki jih zmore brskalnik izvesti s pomočjo CSS3, še

vedno upočasni izvajanje klicev na requestAnimationFrame, na čemer smo utemeljili

teste. Pri striktni uporabi CSS3 animacij smo ugotovili, da je potrebno dodatno poskrbeti

za kompatibilnost z nekaterimi brskalniki in da smo pri dinamičnosti izredno omejeni. Pri

testiranju in uporabi različnih brskalnikov smo ugotovili, da najboljše rezultate z vidika

generiranja sličic na sekundo dosežemo z uporabo vgrajenih brskalnikov, medtem ko

najslabše pri uporabi mobilnega brskalnika Firefox.

Na podlagi informacij, ki smo jih pridobili v diplomskem delu, lahko sklepamo, da je

uporaba CSS3 tehnologije za izdelavo preprostih animacij na DOM elementih ob skrbi za

kompatibilnost s starejšimi brskalniki dovolj učinkovita oz. z vidika zmogljivosti boljša

izbira za dosego ciljev od ostalih rešitev.

53

7 VIRI IN LITERATURA

[1] "Animacija", Sl.wikipedia.org, 2016. [Elektronski]. Dostopno na:

https://sl.wikipedia.org/wiki/Animacija. [1. 9. 2016].

[2] "The evolution of the web", Evolutionoftheweb.com, 2016. [Elektronski]. Dostopno

na: http://www.evolutionoftheweb.com/#/evolution/day. [1. 9. 2016].

[3] "HTML element", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/HTML_element#Images_and_objects. [1. 9. 2016].

[4] "GIF", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/GIF#Animated_GIF. [2. 9. 2016].

[5] "Adobe Shockwave", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Adobe_Shockwave. [2. 9. 2016].

[6] "Adobe Flash", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Adobe_Flash. [2. 9. 2016].

[7] "Adobe Animate", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Adobe_Animate. [3. 9. 2016].

[8] "Java (programming language)", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Java_(programming_language). [4. 9. 2016].

[9] "Cascading Style Sheets", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/Cascading_Style_Sheets. [4. 9. 2016].

[10] "JavaScript", Sl.wikipedia.org, 2016. [Elektronski]. Dostopno na:

https://sl.wikipedia.org/wiki/JavaScript. [4. 9. 2016].

[11] "JavaScript", Wikipedia, 2016. [Elektronski]. Dostopno na:

https://en.wikipedia.org/wiki/JavaScript. [5. 9. 2016].

[12] "Canvas API", Mozilla Developer Network, 2016. [Elektronski]. Dostopno na:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API. [5. 9. 2016].

[13] "HTML5 Canvas", W3schools.com, 2016. [Elektronski]. Dostopno na:

http://www.w3schools.com/html/html5_canvas.asp. [5. 9. 2016].

[14] "WebGL", Mozilla Developer Network, 2016. [Elektronski]. Dostopno na:

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API. [5. 9. 2016].

[15] "WebGL", Wikipedia, 2016. [Elektronski]. Dostopno na:

54

https://en.wikipedia.org/wiki/WebGL. [6. 9. 2016].

[16] "Getting started with WebGL", Mozilla Developer Network, 2016. [Elektronski].

Dostopno na: https://developer.mozilla.org/en-

US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL. [6. 9. 2016].

[17] "Responsive Web Design Viewport", W3schools.com, 2016. [Elektronski].

Dostopno na: http://www.w3schools.com/css/css_rwd_viewport.asp. [6. 9. 2016].

[18] "Effectively measuring browser framerate using CSS", Kaizou.org, 2016.

[Elektronski]. Dostopno na: http://www.kaizou.org/2011/06/effectively-measuring-

browser-framerate-using-css. [6. 9. 2016].

[19] "☆ sweep.js ☆", Rileyjshaw.com, 2016. [Elektronski]. Dostopno na:

http://rileyjshaw.com/sweep. [5. 9. 2016].

PRIMERJAVA DOMORODNIH ANIMACIJ CSS3 IN ANIMACIJ Z …

Documents

Transcript of PRIMERJAVA DOMORODNIH ANIMACIJ CSS3 IN ANIMACIJ Z …