[HTML5 + CSS3] Animacja nie działa płynnie

0

Witam!
Zrobiłem średnio zaawansowaną animację w HTML i CSS, muszę nadmienić, że jest to moja pierwsza animacja z wykorzystaniem CSS3.
Animacja na moim komputerze nie działa zbyt płynnie (korzystam z netbooka), nie wiem czy na starszych komputerach w ogóle by zadziałała.
Zrobiłem już mniej więcej 3/4 tej animacji, ale powstrzymałem się przed dalszym jej rozwijaniem, ponieważ obawiam się, że po prostu przeglądarka z nią nie wyrobi….

W kodzie CSS, w klasie każdej z animacji dodałem, taki kod, który podobno powoduje uruchomienie przyspieszenia sprzętowego dla animacji, jednak nie zauważyłem większej różnicy:

  -webkit-transform:          translateZ(0);
  -moz-transform:             translateZ(0);
  -ms-transform:              translateZ(0);
  -o-transform:               translateZ(0);
  transform:                  translateZ(0);

Czy macie jakiś pomysł na usprawnienie i upłynnienie jej działania.

ANIMACJA: http://www.kronfly.home.pl/test/

0

Ło panie, ładne, ale tnie mi się na maku pro nawet. Takie animacje to już raczej Canvas a nie CSS.

0

Toż to na moim [email protected] zaczyna rwać.

A zamień svg na png i wtedy sprawdź wydajność. Musisz używać wektorów?

0

Nie chodzi o procek tylko grafikę. Procek mój nic nie poczuł odpalenia tej strony ale grafika jak najbardziej. Odpalone na PC z gtx960 screenshot-20170412004728.png

0

@Maciej Cąderek
U mnie na MacBooku Retina tnie mocno, ale co dziwne na iPhonie 6 jest lepiej niż na laptopie. Na animacjach Canvas zbytnio się nie znam, mam nadzieję, że nie będę musiał wszystkiego przerabiać...

@docxxx
Słuszna uwaga - wywalę SVG, w sumie nie są konieczne. Dziękuję!

@mr_jaro
Dobra wskazówka, choć nie bardzo orientuję się w jaki sposób animację są rozdzielane pomiędzy procesor, kartę graficzną, pamięć ram itd... Może powiniennem wywalić te "transformy", albo zostawić je tylko przy bardziej zaawansowanych animacjach?

0
Kronfly napisał(a):

Dobra wskazówka, choć nie bardzo orientuję się w jaki sposób animację są rozdzielane pomiędzy procesor, kartę graficzną, pamięć ram itd... Może powiniennem wywalić te "transformy", albo zostawić je tylko przy bardziej zaawansowanych animacjach?

Zależne od przeglądarki, firefox mocno się wspiera grafiką dlatego cała animacja obciąża grafe. Ale obciąża ją w dość pokaźnym stopniu.

0

Wywaliłem SVG, chyba animacja minimalnie przyspieszyła, ale ciągle jest daleko od prędkości zadowalającej...

Nie wiem czy te transform: translateZ(0); cokolwiek daje... Na Safari z tym i bez tego wydajność jest praktycznie identyczna.

Jeszcze jedno, co przyszło mi do głowy, to może zmniejszenie rozdzielczości grafik coś da?

1 użytkowników online, w tym zalogowanych: 0, gości: 1