[JS] sposób składowania danych Opcje

[CuteOne]

Tytuł tematu zapewne nie mówi za wiele, więc postaram pokrótce opisać mój mały problem. Otóż za pomocą JS chcę utworzyć krótkie animacje np. poruszających się piłeczek. Problem w tym, że każda akcja (np. ruch, kolizja itp.) musi być gdzieś "składowana" na początku rozsądnym rozwiązaniem wydał mi się JSON :

[JAVASCRIPT] pobierz, plaintext 
var objects = [
     {name: "kulka-1", x: 12, y:13},
     {name: "kulka-2", x: 11, y:13},
     {name: "kulka-3", x: 10, y:13}
];
 
var action = [
     [{x:15, y:25}, {x:15, y:20},{x:10, y:25}],  //każda akacja zapisana w ten sposób gdzie index odpowiada objects[indeks]
     [{x:45, y:25}, {"type": "colison", x:15, y:23},{x:11, y:25}],
     [{x:95, y:25}, {x:15, y:28},{x:15, y:25}]
];
[JAVASCRIPT] pobierz, plaintext 

Niestety tego typu zapis jest mało wydajny:
- dla 100 obiektów 10 sekundowa animacja zajmuje grubo ponad 500kb
- JS strasznie zamula podczas odczytywania tak składowanych wartości (chociaż nie powinien :/)

Stąd moje pytanie czy istnieje jakiś format zapisu, który pozwoli na łatwy odczyt zawartości + minimalną wielkość tworzonego pliku
?

[zegarek84]

nie wiem jak dokładnie ustawiasz własności poszczególnych obiektów ale zapewne każdego z osobna - zmiana pojedynczej własności w zasadzie niemal zawsze powoduje renderowanie - przeliczanie... i to właśnie tutaj jest problem - niektóre przeglądarki nie renderują nawet dom'u jeśli stale są robione zmiany (ale to te nowsze i nie wszystkie - już nie jestem w temacie)... ale najlepiej jeśli byś ustawiał wszystkie właściwości obiektów tylko raz - możesz to zrobić np. przez utworzenie dynamicznego elementu style w drzewie dom - wcześniej każdemu elementowi np. przypisując jakieś id, i w tym style możesz określać sytuację końcową - poczytaj na stronie opery o modyfikacjach dom i o ustawianiu kilku styli na raz (już wspomniałem jak to można zrobić zamiast podmiany klasy to po prostu podmieniasz zawartość elementu style z przygotowanym wcześniej opisem styli dla poszczególnych id na raz):
Efficient JavaScript -> DOM (page 3)

lub o ile dobrze pamiętam przed ustawianiem styli w następnej klatce mógłbyś na całą animację dać display:none; ustawiać pojedynczo style tak jak robisz i zmiana chyba też przy renderowaniu dokona się raz - no 2 razy - display:none i display block - to też powinno przyśpieszyć...

animacje by były płynne dla ludzkiego oka to odstęp między klatkami musi wynosić około 40ms (25fps -> co 40ms klatka), fakt, niektóre filmy mają chyba delikatniej mniejszy fsp i chyba wynosi on 23,7 fps ale to szczegół...

mógłbyś jeszcze poczytać o transition (czy jakoś tak się zwie) i ustawić go na liniowy - jeśli przez np. 3s coś się przemieszcza stale po tej samej linii to na początku mógłbyś zmienić wartość na końcową, czas zmiany ustawić na te 3s i w kolejnych klatkach masz np. null co znaczy, że nie wprowadzasz żadnych zmian w stylach...

Ten post edytował zegarek84 25.10.2011, 13:47:12