Šta je novo?

SVG draw animacija

SnapSVG
 
Zevao sam nocas do kasno na njihovom sajtu, sad sam se setio aligatora :) ali nisam naisao na nikakav primer za SVG inline animation. Probacu sa snap-om. Hteo sam da dropujem IE support, mislim samo tu ne radi ali vidim prelepu crossbrowser optimizaciju kao ovde npr - http://10-5.de/ pa reko da pitam kako se vi koji zivite od web-a snalazite. Uzgred da ne zaboravim, jel ovo radjeno sa snap-om - http://ambercreative.co/#0?
 
Mislim da nije.
 
Naravno, pogledaj im main.js fajl.
 
Prica se svela na CSS VS JS animacije. Evo malo linkova sto sam iscitao(komentari na css-tricks su posebno korisni i interesantni ako jos neko cita ovu temu - Kutiji ovo ne treba) :


Ovo sto ja hocu je prilicno jednostavno, oni su animirali vise path-ova u isto vreme iz JS-a koliko vidim u main.js-u. Treba da prilagodim njihov code mom prostom primeru sto pretpostavljam nije tesko ali cu izgubiti dosta vremena jer se ne snalazim Bog zna sta po JS-u, znam da koristim, po malo da editujem a da pisem sam od 0 do sada nisam imao nekih potreba, uglavnom koristim vec napisano.

Mislim meni ovo ovako super radi ali dropujem podrsku za IE sto je malo bzv :( Zato razmisljam da odradim iz JS-a? SVG na primeru koji sam dao je 100% responsive sad pitanje da li bih mogao da namestim istu stvar, znaci da radi isto i da se ponasa isto iz JS-a(mislim na responsive design SVG-a)?
 
SnapSVG je fork Raphael propjekta. Raphael ima podrsku za IE dok SnapSVG nema. Sa druge strane, za IE se to radi drugacije, verovatno si citao na CSS Tricks (ako si obraio paznju) - sa zamenskim PNG-om umesto SVG-a. Pitanje je i koji IE gadjas, ja recimo vise ne optimizujem bilo sta za manje od IE10.
 
Ok to za IE10, potpuno se slazem. Citam dosta o tome svuda ali nisam naisao na tu foru sa png-om. Koliko sam upoznat IE ima potpunu podrsku da odradi inline draw ali iz nekog razloga to ne radi u IE, sad mozda sa win 10 to proradi. Ako inline draw ne radi sa snap.js u IE onda ta solucija otpada. Ostaje greensock i custom js kao na http://ambercreative.co/#0 . CSS prelepo radi te neke proste animacije, stvarno je super i jednostavan za koriscenje, samo eto ta mana sto se gubi podrska za IE. Veliki sam zaljubljenik u SVG i animiranje SVG-a, moze toliko toga, mogucnosti su prakticno beskonacne + lightweight + nema pixelizacije pri zumiranju. Moram da se odlucim na koji nacin da animiram SVG da li iz CSS-a ili JS-a.

Ovaj je odradio u fullu-u bas to sto ja hocu - http://10-5.de/ . Puna podrska za IE(znaci radi savrseno) + potpuna responzivnost. Sad izgleda malo krupnije u IE i Mozilli nego u Chrome-u. I jos jedna stvar, ta responzivnost mu ne radi u Chrome-u i Mozilli kao u IE :(

PS
Zasto ne mogu da se dogovore oko prostih stvari, svako tera svoju politiku(IE, Chrome, Mozilla, Opera, Safari) ne samo oko SVG-a u vezi svega i svacega i na kraju crossbrowser optimizacija bude nocna mora za developere :(


Update:
Evo ga na codepenu - http://codepen.io/niorad/pen/xmfza Antonio Radovcic - izgleda da je to to, mislim JS za inline draw kao na njegovom sajtu.


Sad je dilema, koju tehniku je najbolje primeniti i sa njom raditi SVG animacije...?
 
Poslednja izmena:
Pa ako ti ne treba nista preterano kompleksno, ja bih isao na GreenSock.
 
Nazad
Vrh Dno