Jak animować sekwencję PNG przy użyciu jQuery (przez przewijanie lub animację uruchamianą)

Coraz więcej widzę efekt, w którym pngs są ładowane do serii DIV (lub jednego div), a następnie sekwencjonowane choć klatka po klatce albo na podstawie kliknięcia przycisku, albo na podstawie przewijania. Próbowałem zerknąć na kod i rozumiem, że javascript robi ciężki lifting, ale nadal jestem trochę zagubiony, czy są jakieś tutoriale dotyczące tej techniki? przykłady?Jak animować sekwencję PNG przy użyciu jQuery (przez przewijanie lub animację uruchamianą)

przykładem animacji (multiple div) http://atanaiplus.cz/index_en.html:

przykładem animacji (jeden div): http://www.hyundai-veloster.eu/

przykładem przewijanie animacji: http://discover.store.sony.com/tablet/#design/ergonomics

Źródło

2012-03-12 user379468

po prostu chcesz zamienić się z atrybut src przy użyciu znacznika setInterval

var myAnim = setInterval(function(){ 
    $(".myImageHolder").attr('src', nextImage); 
}, 42);

Sztuką jest to, jak generujesz nextImage. To w dużej mierze zależy od konwencji nazewnictwa swoich obrazach, lub w jakim kierunku chcesz animację uruchomić w

Aktualizacji

Albo użyć plugin

Źródło

2012-03-12 15:31:10

Tak, rzeczą o spritely jest to, że sekwencja obrazów jest właściwie jednym dużym obrazem, który jest przenoszony do skrzynki animacji. Nie sądzę, żeby to działało dla większej, bardziej złożonej sekwencji obrazów. – user379468

Tak, rozmiar pliku byłby OGROMNY. –

cóż, prawdopodobnie mniejsze łącznie niż wszystkie pojedyncze obrazy –

Może zamiast przełączania między różnymi obrazami, użyj technika spritingu opisana w tym pytaniu: How to show animated image from PNG image using javascript? [ like gmail ]

Źródło

2012-03-12 15:36:15 Zugbo

Nie mam przedstawiciela do komentowania innych odpowiedzi, ale w odpowiedzi na problem z rozmiarem pliku: Jeśli musisz załadować wszystkie obrazy i tak, jesteś już zaangażowany w wysyłanie tych danych - poprzez łączenie obrazów w sprite'a, przynajmniej oszczędzasz na kosztach HTTP. Możesz również uzyskać możliwość rozpoczęcia animacji zaraz po załadowaniu obrazu, bez konieczności sprawdzania wszystkich obrazów oddzielnie. – Zugbo

To może być prawda, ale myślę, że istnieją inne powody, dla których nie jest optymalna. Poruszanie się po obrazie o wielkości 10.000 na 10.000 jest o wiele droższe w renderowaniu niż przełączanie widoczności lub zamienianie nazwy obrazu w podzbiorze ... – user379468

Musisz zważyć rozmiar pliku w stosunku do liczby żądań HTTP. Jeśli twoje obrazy nie muszą być w pełni transapietrowane, możesz je sprite w dużym JPEG ... ale jeśli muszą być PNG-24, to byłoby dość freakin 'ogromny, aby połączyć je wszystkie razem. Żądania HTTP mogą być bardziej warte. –

Jak animować sekwencję PNG przy użyciu jQuery (przez przewijanie lub animację uruchamianą)

Odpowiedz

Powiązane problemy