Canvas, a jquery

cze, mam jedno pytanie laika.

chciałem wykonać animacje na canvas. Animacja oparta na zdjęciach, czyli powiększanie, przemieszczanie, zmiany kształtu itp. Ma to być taki baner reklamowy z animacjami do reklamy. Wymóg - HTML5 i CSS3. Na jquery bym to zrobił bez większego problemu, ale już tak mam, że chcę spróbować czegoś nowego. I powiem szczerze po całym dniu spędzonym przed kompem kiepsko to widzę. Jakoś mi to nie podchodzi.

Chciałem Was zapytać o zdanie, czy warto jeszcze się pomęczyć z canvasem, czy jechać z jquery?

do canvasa są biblioteki wspomagające, zapewne by Ci się przydało, bo surowy canvas jest ... surowy.

zawsze używaj tego, co jest wygodne, dopóki nie powoduje to komplikacji (wydajność, bugi, utrzymanie kodu).

właśnie poczytuję FabricJS i CreateJS.

Ale Waszym zdaniem co jest lepsze do podstawowych animacji banerowych, canvas czy jquery (np. animate , css itp) ?

Generalnie ma to być zgodne ze standardami html5/css3, ale jquery nie ma wpływu na standard, jest to dodatkowy framework.

Ale Waszym zdaniem co jest lepsze do podstawowych animacji banerowych, canvas czy jquery (np. animate , css itp) ?

do animacji banerowych najlepszy jest AdBlock :)

Natomiast jeśli nie chcesz użyć AdBlocka i nie tylko nie masz nic przeciwko, ale nawet o dziwo chcesz zrobić baner reklamowy, to najłatwiejsza opcja w tym przypadku to CSS3 (transitions, animations). jQuery ci nawet nie potrzebne (chyba, że do ustawienia addClass/removeClass, chociaż to można zrobić w czystym JS). Po prostu ustawiasz odpowiednie klatki kluczowe czy definiujesz efekty przejścia w regułach CSS.

Z drugiej strony kiedyś męczyłem się ileś dni z prostą animacją w CSS, w końcu zrobiłem tę animację w raptem 2 godziny używając Canvasa (Canvas jest bardziej przewidywalny, a w CSS wszystko na siebie wpływa i jak coś zmienisz w jednym elemencie, to wszystko inne może się rozjechać).

Kiedyś musiałem jednak się też poddać i użyć jQuery.animate, ponieważ czysty CSS źle mi liczył wysokość elementu (a jQuery magicznie coś tam przeliczał pod spodem, żeby było dobrze).

Więc wszystko zależy. Ale z tego co piszesz to szedłbym najpierw albo w CSS albo w SVG.

Animacja oparta na zdjęciach, czyli powiększanie, przemieszczanie, zmiany kształtu

W CSS łatwo zrobić animację, powiększanie (scale), przemieszczanie(translate), obrót(rotate), zabawy z przezroczystością(opacity)...
natomiast nie wiem co to jest zmiana kształtu? Możesz sprecyzować?

do canvasa są biblioteki wspomagające, zapewne by Ci się przydało, bo surowy canvas jest ... surowy.

A dokładniej: eventów myszy nie ma czy efektów typu easing/tweening itp. Bo samo wyświetlanie i poruszanie obiektami jest dość łatwe i dużo można zdziałać na samym Canvasie (o ile się nie potrzebuje ficzerów, których w canvasie nie ma).

No ale sam CSS3 ma z automatu bez żadnej biblioteki pełno efektów do animacji (i eventy myszy ofc), więc canvas zwykle niepotrzebny.

adblock się sprzedał teraz rządzi uBlock :)

co do animacji CSS nie zawsze działają pod lubianym przez wszystkich IE, zasadniczo jak stosujesz bibliotekę jQuery do innych zastosowań to czemu jej nie wykorzystać skoro i tak skrypty się ładują

<quote="1293035">

natomiast nie wiem co to jest zmiana kształtu? Możesz sprecyzować?

chodzi o to , że np masz zdjęcie w kwadracie i chcesz płynnie zamienić kształt na koło albo trójkąt albo koniczynę 4lo listną. Chodzi o płynne przejście.

Wstępnie myślałem, żeby ustawić dwa zdjęcia w tym samym miejscu z zastosowaniem z-index (np. koniczynka pod kwadratem) i w odpowiednim momencie zmniejszyć płynnie kwadrat aż do 0 (do zniknięcia). W ten sposób uzyskam wizualny efekt zmiany kształtu, który de facto będzie zmianą rozmiaru.

no i jest to wykonalne w oparciu o jquery. Ale w cabvasie też da rade.

jeszcze jedna kwestia przyszła mi do głowy. w cavas animacje odtwarzają się w pętli. a w css animate całość odtwarza się raz (chyba ze ustawić dla pojedynczych elementów infinite, ale to niszczy cały projekt) i trzeba przeładować stronę.

dodałem

 setTimeout(function(){
   window.location.reload(1);
}, 20000);

Czyli jak reklama się skończy, to strona się przeładuje? Dość oryginalne rozwiązanie.

ŁF napisał(a):

Czyli jak reklama się skończy, to strona się przeładuje? Dość oryginalne rozwiązanie.

masz jakąś propozycję?

Nie, nie zajmuję się animacjami i nie znam się na tym, natomiast posiadam zdrowy rozsądek.