NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Problém s výkonem při animaci průhlednosti v css3

Aktivity
Avatar
Nikola Sterziková (PaNika)
Tvůrce
Avatar
Nikola Sterziková (PaNika):9.4.2015 17:33

Ahoj,
měla bych dotaz ohledně optimalizace výkonu css animací průhlednosti.
Mám udělat responzivní web (zde je ukázka: http://microsite.asp2.cz/ ) kde budou tyto animace:

  • animuje se kreslení drátěného modelu molekuly a animace jde "prostředkem galaxie" (tedy musím mít ještě jednu vrstvu části galaxie nad všemi ostatními prvky)
  • po vykreslení se drátěný model prolne se skutečnou molekulou
  • po té se molekula prolne s logem baňky
  • pak by měly pokračovat ještě další prolínání...

Animace jsem uděla v css pomocí transition

.fadeIn{
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity 10s ease;
    -moz-transition: opacity 10s ease;
    -ms-transition: opacity 10s ease;
    -o-transition: opacity 10s ease;
    transition: opacity 10s ease;

}

Problém je, že se to na mobilu hrozně seká a obrázky problikávají.

Dá se ta animace nějak jinak optimalizovat, aby se to nesekalo nebo to optimalizovat nelze vzhledem k velikosti obrázků?

(zkoušela jsem i animaci přez jQuery fadeIn/Out, ale také se to sekalo.)

Díky moc
PaNika

PS: animace kreslení čar molekuly nefunguje v IE, to vím, budu řešit jinak ;-)

 
Odpovědět
9.4.2015 17:33
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Nikola Sterziková (PaNika)
Neaktivní uživatel:9.4.2015 17:50

Optimalizácia v CSS možná nie je.
Mne to ide v mobile úplne plynule (až prekvapivo). Problém môže nastať u menej výkonných zariadení, pretože animácia prebieha na viacerých obrázkoch, čo je výkonovo náročné a niekde to može robiť problém.
Jediná možnosť ako zoptimalizovať výkon v tomto prípade je zmenšenie veľkosti/kvality obrázkov na rozumnú úroveň.

EDIT: Animácie, ktoré je možné spraviť pomocou CSS, je vždy pomocou CSS vyriešiť. JS bude vždy (i keď možno zanedbateľne) pomalší.

Editováno 9.4.2015 17:52
Nahoru Odpovědět
9.4.2015 17:50
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Nikola Sterziková (PaNika)
Tomáš Maňhal:9.4.2015 17:53

Taky hlásím plynulý chod. Xiaomi Redmi Note LTE/4G.

 
Nahoru Odpovědět
9.4.2015 17:53
Avatar
Nikola Sterziková (PaNika)
Tvůrce
Avatar
Nikola Sterziková (PaNika):9.4.2015 18:02

Díky za zkouknutí.

No, v tom případě mám místo mobilu vykopávku :-D
Domnívám se, že kB velikost obrázku na to nebude mít vliv. Pro viwport menší než 992px posílám obrázky o velikosti 150kB, 160kB a 36kB, problém je že při změně průhlednosti musí prohlížeč přepočítat ostatní prvky a asi na té mé staré vykopávce ten přepočet žel není tak hladký.

Každopádně díky za pomoc...

 
Nahoru Odpovědět
9.4.2015 18:02
Avatar
Creevek
Člen
Avatar
Odpovídá na Nikola Sterziková (PaNika)
Creevek:11.4.2015 4:48

Na mobilu mi to jede krásně. S potřebou optimalizovat CSS jsem se zatím nesetkal. Na druhou stranu mobilní zařízení jsou pořád lepší a lepší takže myslím že většina zařízení konce roku 2014 by to snad měli zvládnout. Možná jako řešení i když tedy dost nepraktické a zdlouhavé by bylo nějakým způsobem udělat z te animace gif. To by možná nemuselo být tak náročné.

Editováno 11.4.2015 4:49
Nahoru Odpovědět
11.4.2015 4:48
Lenost matka pokroku.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.