NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Jak naprogramovat pomalou animaci?

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Pavel Salvet
Člen
Avatar
Pavel Salvet:21.1.2024 19:00

Zdravím, zkoušel jsem udělat na webové stránce zvolna se posouvající pozadí (1 pixel/s). Bohužel se obrázek posouval trhavě. Přitom na videích je například pohyb mraků plynulý - viz třeba https://youtu.be/vOezej38KWg?…
Zajímalo by mě, v čem spočívá ten trik.

 
Odpovědět
21.1.2024 19:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.1.2024 11:03

google = pohybujici se pozadi na webove strance
https://www.jakpsatweb.cz/pozadi.html

Moznosti je more, ale vzdy, naprosto vzdy, je to spatny napad :)

  • maly animovanny gif opakovany v ose X a Y by mohl fungovat
  • pouzit javascript, ktery meni background-position
  • js canvas by mel umet pouzivat zrychlene vykreslovani pomoci graficke karty

google = html5 animated background
https://devbeep.com/…-background/
https://zdrojak.cz/…oci-canvasu/

  • js slideshow

https://www.freecodecamp.org/…a-slideshow/
https://www.jqueryscript.net/…amework.html

  • html marquee

https://developer.mozilla.org/…ment/marquee

google = html animated background code
https://www.codepel.com/…-with-html5/
-> https://www.codepel.com/…-with-html5/
-> https://codepen.io/…/pen/XWdVeRy

Ono, totiz, problem je v tom, ze velky pohyblivy obrazek se online dost problematicky zobrazuje, animuje a zvlast, kdyz to jde jen pres cpu (bezny procesor) a ne gpu (grafickou kartu). V pripade cpu je asi nejlepsi pouzit maly animovany gif.. To je serie obrazku, ktere se zobrazuji jako obdelnicek a pocitac to umi zobrazit najednou, i pri opakovani stejneho obrazku, cili rychle.
Animace ala 3d hry jsou uplne jiny level, na to potrebujes grafickou kartu.
A pohyb velkeho obrazku je mensi level, ale nemusi se to stihat zobrazovat.

 
Nahoru Odpovědět
22.1.2024 11:03
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.1.2024 11:05

jinak, spis zkus forka https://www.itnetwork.cz/…programovani html a css, javastript, Webdesign

 
Nahoru Odpovědět
22.1.2024 11:05
Avatar
Pavel Salvet
Člen
Avatar
Odpovídá na Peter Mlich
Pavel Salvet:22.1.2024 20:10

Asi si nerozumíme. Umím udělat pohyblivé pozadí, chápu také, že pohybující se pozadí je z principu špatně. Rovněž vím, co je to animovaný GIF.

Pro lepší pochopení mého dotazu si prosím zjisti, jak rychlá musí animace být, aby ji lidské oko vnímalo jako pohyb. To, co řeším, je totiž pomalá plynulá animace, například plující mraky.

 
Nahoru Odpovědět
22.1.2024 20:10
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:24.1.2024 8:30

:) Delam weby uz par let, 30, takze mam zkusenosti s ruznymi technologiemi. A delal jsem VS praci na tema zpracovanoi videa.

Obecne prohlizec nepouziva zrychleni animace Nebo se to zacina pouzivat az ted. A rozviji se treba technologie OpenGl.

Cili, v podstate mas velmi malo moznosti.

  1. Jednou z nich je js-canvas, do ktereho implementuji zrychlene animace pomoci procesoru graficke karty. Vykon, jaky pouzivaji 3d hry. Myslim si, ze je to dost omezene, ale slo by to asi pouzit.
  2. dalsi moznosti je pouzit do nekonecna se opakujici (x-y) animovany gif. Ta animace je staticka, mohlo by to byt v pohode
  3. Treti moznosti je pouzit nejaky js engine vykreslujici pohybujici castice, treba primo specializujici se na mraky. Pravdepodobne to ale take vykreslji do js-canvasu
  4. A jeste mne napadlo pouzit nejakou videosekvenci. Na prehravani videa se pouziva systemovy prehravac, ktery by mel opet vyuzivat vsechny vyhody gpu, procesoru graficke karty, co mas v pocitaci, ktery je tak 10x rychlejsi a specializovany na prehravani animaci a videa, tam je vykon i 30x proti cpu, ktery se bezne pouziva pro bezne programy i prohlizec.
  5. A jeste pomerne zajimava technologie ja rendrovani obrazku na povrch koule. Jeji rotaci by slo docilit ziskani statickeho obrazku. Ale, velky staticky obrazek to proste nemusi stihat, protoze to neni video ani okenko pro hry, ale prohlizec :)

A dalsi problem muze byt stahovani obrazku pres internet. Pokud je obrazek moc velky nebo neni kesovany, tak jeho stahovani muze brzdit vykon pro zobrazeni stranky.

google = animated cloud web background
https://loading.io/…und/m-clouds

google = animated real cloud web background

https://www.vantajs.com/?… - ten vypada plynule i na 3400x1400

https://www.vantajs.com/?… - kdyz to dam full screen, a mam ted super velky monitor 3400x1400, tak to stejne skube a ma to ruzne fragmenty, ikdyz v okne asi 1500x1500 to vypada dobre

https://www.vecteezy.com/…t-the-camera

 
Nahoru Odpovědět
24.1.2024 8:30
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.