Afisarea treptata a unei figuri
M-am apucat sa imi fac un site propriu, ca sa nu am doar blog propriu. Deocamdata nu stiu exact ce voi face pe site, cum va arata si inca explorez diferite idei. Ideea de care m-am apucat acuma este una minimala. Sau asa a pornit. Intre timp a evoluat si a devenit destul de complexa :)).
Siteul ar fi impartit pe trei coloane. Coloana stanga ar contine navigarea, coloana din mijloc continutul principal, iar coloana din dreapta ar contine streamul meu Twitter (ca alternativa la Noutatile saptamanii). Fundalul ar fi alb, eventual o textura foarte slaba, textul ar avea un typography foarte bine ales, singura chestie vizuala in plus ar fi doi copaci care sunt situati intre coloane si se impletesc deasupra lor.
Apoi cineva mi-a dat ideea de a face copacii sa creasca, si textul sa apara doar apoi. Buna idee. Dar cum sa o realizez?
Prima metoda, facuta cu unelte de piatra, a fost sa trec un dreptunghi alb (un div cu background-color:white;) in fata copacului, si cand dreptunghiul a trecut de punctul superior al imaginii, il scot din DOM si afisez textul. Simple enough. Problema e ca atunci crengile orizontale apar instantaneu cand trece dreptunghiul de ele, si si mai mare problema ii cu crengile care se curbeaza in jos, pentru ca apare capatul celalalt mai repede decat creanga in sine. Not good. O solutie care mi-a venit in minte acuma (in timp ce scriu) ar fi sa folosesc mai multe dreptunghiuri, care pornesc doar cand unul ajunge in dreptul celuilalt, etc etc. Dar ii plictisitor sa scriu atatea dreptunghiuri separate si sa le sincronizez.
A doua metoda pe care am incercat-o a fost sa desenez pe Canvas. Cu afisatul copacului nici nu ii problema. Cu chiu cu vai am reusit sa fortez Inkscape sa nu mai foloseasca coordonate relative ci doar coordonate absolute, le-am bagat in codul Javascript si a iesit imediat forma copacului. Problema a aparut la animarea lui. Animarea copacului in salturi (intre punctele definite de curbele Bezier) a iesit (kinda, uneori apareau ceva minuni la margine). Problema aparea la animarea continua a copacului: nu puteam pur si simplu sa mut capatul curbei Bezier, pentru ca iesea o alta forma. Pentru a calculat exact repozitionarea punctelor de control a curbelor Bezier ca sa pot face evolutia lor continua, ar fi trebuit sa rezolv ecuatii de gradul 3. Not gonna happen. Pentru Flash exista ceva librarie care face asta, dar nu o sa imi intinez siteul cu Flash *ugh*. So...., baring manual solving of those equations, this method is out (or waiting for someone else to make a library for this :D). Desi aceasta metoda este cea mai precisa si corecta.
A treia metoda, pe care am ajuns sa o implementez, a fost sa lucrez direct cu SVG si sa abuzez de gradiente. La un gradient daca doua stop-uri coincid ca pozitie, dar nu si la culoare, tranzitia de la o culoare la alta va fi practic instantanee. Si cu SMIL putem modifica gradientii foarte frumos, cu o singura linie :D. SMIL se asigura de trecerea lina a gradientului de la 0% la 100%, asa ca eu nu trebuie sa mai fac nimica.
Cu aceasta ocazie am ajuns sa invat cat de cat si SVG si am vazut ca Inkscape aproape utilizeaza un format propriu: imi dubla marimea fisierului prin adaugarea unor taguri si atribute proprietare complet inutile.
Avantajele acestei metode sunt faptul ca animatia este inclusa in fisier, impartirea copacului pe ramuri o fac in Inkscape si apoi aplic aceleasi animatii (aproape, pentru ca gradientele le fac in directii diferite) la cele 3 pathuri. Preeeetty damn easy. Si nu merge in IE6-8 >:)
The result is this: tree.svg. SVG rocks. Except when Inkscape makes it.
