Problem z animacją JS - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Problem z animacją JS

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 55

31. Data: 2013-02-02 02:10:24
Temat: Re: Problem z animacją JS
Od: Marek <p...@s...com>

W dniu 2013-02-01 21:25, Jasio pisze:
> W dniu 2013-02-01 16:36, Marek pisze:
>> Sprawdzałeś dla 10mS?
>
> Może zacznijmy od tego, że wszelkie wartości poniżej 17ms są czystym
> kretynizmem.

Ok, dałem 16ms aby wstrzelić się w synchronizację pionową monitora i
większy offset w pikselach aby zachować prędkość przesuwania się
obiektu. Efekt teraz jest taki, że pod IE pogorszyła się lekko płynność
ruchu. Chrome wizualnie zachowuje się podobnie. A FF już nie delikatnie
przycina lecz widać bardzo wyraźnie skokowy ruch animacji. Mi to wygląda
na brak akceleracji w tej przeglądarce.

--

Pozdrawiam
Marek

[ pokaż wiadomość z nagłówkami ]

do góry
32. Data: 2013-02-02 02:17:27
Temat: Re: Problem z animacją JS
Od: Jasio <n...@o...pl>

W dniu 2013-02-02 02:05, Cezary Tomczyk pisze:
> Z ciekawości: skąd akurat 17ms? Jakieś źródło informacji o tym?

1000/60

wpisz w wujka google 16.7ms to będzie trochę na ten temat

[ pokaż wiadomość z nagłówkami ]

do góry
33. Data: 2013-02-02 02:20:42
Temat: Re: Problem z animacją JS
Od: Jasio <n...@o...pl>

W dniu 2013-02-02 02:10, Marek pisze:
>
> Ok, dałem 16ms aby wstrzelić się w synchronizację pionową monitora i
> większy offset w pikselach aby zachować prędkość przesuwania się
> obiektu. Efekt teraz jest taki, że pod IE pogorszyła się lekko płynność
> ruchu. Chrome wizualnie zachowuje się podobnie. A FF już nie delikatnie
> przycina lecz widać bardzo wyraźnie skokowy ruch animacji. Mi to wygląda
> na brak akceleracji w tej przeglądarce.
>

a mi wygląda na kiepsko napisaną animację, bo inni nie mają takich
problemów, ale nie widząc kodu, to możemy tylko gdybać :)

[ pokaż wiadomość z nagłówkami ]

do góry
34. Data: 2013-02-02 02:25:24
Temat: Re: Problem z animacją JS
Od: Jasio <n...@o...pl>

W dniu 2013-02-02 02:05, Cezary Tomczyk pisze:
> Z ciekawości: skąd akurat 17ms? Jakieś źródło informacji o tym?

właśnie zauważyłem, że skoro o to pytasz, to chyba jednak nie wszedłeś
na link, który podałem :)

http://ie.microsoft.com/testdrive/Graphics/RequestAn
imationFrame/Default.html

[ pokaż wiadomość z nagłówkami ]

do góry
35. Data: 2013-02-02 02:26:11
Temat: Re: Problem z animacją JS
Od: Cezary Tomczyk <c...@g...com>

W dniu 2013-02-02 02:17, Jasio pisze:
> W dniu 2013-02-02 02:05, Cezary Tomczyk pisze:
>> Z ciekawości: skąd akurat 17ms? Jakieś źródło informacji o tym?
>
> 1000/60
>
> wpisz w wujka google 16.7ms to będzie trochę na ten temat

Wujek google sporo wie :D

--
Cezary Tomczyk
http://www.ctomczyk.pl/

[ pokaż wiadomość z nagłówkami ]

do góry
36. Data: 2013-02-02 02:30:10
Temat: Re: Problem z animacją JS
Od: Cezary Tomczyk <c...@g...com>

W dniu 2013-02-02 02:25, Jasio pisze:
> W dniu 2013-02-02 02:05, Cezary Tomczyk pisze:
>> Z ciekawości: skąd akurat 17ms? Jakieś źródło informacji o tym?
>
> właśnie zauważyłem, że skoro o to pytasz, to chyba jednak nie wszedłeś
> na link, który podałem :)
>
> http://ie.microsoft.com/testdrive/Graphics/RequestAn
imationFrame/Default.html

Cholera, późno już i musiałem go pominąć :-)

btw można by jeszcze zaciągnąć CSS3 do animacji, ale wiadomo, że ot nie
wszędzie zadziała :D

--
Cezary Tomczyk
http://www.ctomczyk.pl/

[ pokaż wiadomość z nagłówkami ]

do góry
37. Data: 2013-02-02 12:24:19
Temat: Re: Problem z animacją JS
Od: Marek <p...@s...com>

W dniu 2013-02-02 02:20, Jasio pisze:
> W dniu 2013-02-02 02:10, Marek pisze:
>>
>> Ok, dałem 16ms aby wstrzelić się w synchronizację pionową monitora i
>> większy offset w pikselach aby zachować prędkość przesuwania się
>> obiektu. Efekt teraz jest taki, że pod IE pogorszyła się lekko płynność
>> ruchu. Chrome wizualnie zachowuje się podobnie. A FF już nie delikatnie
>> przycina lecz widać bardzo wyraźnie skokowy ruch animacji. Mi to wygląda
>> na brak akceleracji w tej przeglądarce.
>>
>
> a mi wygląda na kiepsko napisaną animację, bo inni nie mają takich
> problemów, ale nie widząc kodu, to możemy tylko gdybać :)

Proszę bardzo.
To tak na szybko uproszczona wersja obrazująca problem. Zostawiłem 10ms.
Pod IE10 bardzo płynnie przesuwa się obiekt a pod FF ruch przysypia i
szarpie między przyśnięciami. Przestaw sobie na 20ms a otrzymasz to samo
lecz wolniej będzie się kwadrat przesuwał. Przy 40ms trudniej to
dostrzec bo ruch jest bardzo wolny (jak coś się nie porusza prawie to
trudno zobaczyć nierównomierności tego ruchu) ale można przestawić skok
na 2px aby przysypianie i szarpanie stało się lepiej widoczne.

Pod Chrome jest ok - najwyraźniej tej przeglądarce szkodzi specyfika
serwisu WWW: przejrzystości, bitmapa w tle i nie wiem co jeszcze. W
poniższym banalnym przykładzie nie widać tych efektów więc skupmy się na FF.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bez tytulu</title>
<style type="text/css">
#box {
height: 100px;
width: 100px;
position: absolute;
left: 0px;
top: 100px;
background-color: #F60;
}
</style>
<script>
var xOffset=0;
var obj=null;

function animate()
{
if (++xOffset>500) xOffset=0;
obj.style.left=xOffset+"px";
}

function init()
{
obj=document.getElementById("box");
setInterval(animate,10);
}

window.onload=init;

</script>
</head>

<body>
<div id="box"></div>
</body>
</html>
--

Pozdrawiam
Marek

[ pokaż wiadomość z nagłówkami ]

do góry
38. Data: 2013-02-02 12:51:59
Temat: Re: Problem z animacją JS
Od: Marek <p...@s...com>

W dniu 2013-02-02 02:25, Jasio pisze:
> W dniu 2013-02-02 02:05, Cezary Tomczyk pisze:
>> Z ciekawości: skąd akurat 17ms? Jakieś źródło informacji o tym?
>
> właśnie zauważyłem, że skoro o to pytasz, to chyba jednak nie wszedłeś
> na link, który podałem :)
>
> http://ie.microsoft.com/testdrive/Graphics/RequestAn
imationFrame/Default.html
>

Kurcze, mam jakiś problem techniczny. Nie widzę wszystkich wypowiedzi
ale tylko w tym wątku. Tak jakbym do killfile dodał kogoś choć tak nie
jest.

Zerknąłem sobie jak wygląda wpływ na CPU timera. Zmiana 15->10ms
powoduje wzrost o 1-2% na CPU a z 15->1ms o ok 4% CPU więc nie ma o co
kopii kruszyć. Przynajmniej na moim sprzęcie.

Co do schodzenia poniżej limitu 17ms to nie do końca zgodzę się, że jest
to niecelowe. Przy częstotliwościach timera zbliżonych do fps monitora
mogą powstać "zdudnienia" szczególnie widoczne przy małych
rozdzielczościach. Forma ruchu gąsienicy skwantyzowanego do 1 piksela.
Raz animacja skoczy o 1px a w innym kroku 2px. Średnia prędkość będzie
oczywiście zachowana. Efekt będzie w postaci skoku obiektu co sekundę -
dwie. Minimalne przyspieszenie taktowania eliminuje widoczność tego
efektu. Niestety JS nie oferuje synchronizacji z pionowym przerwaniem
tak jak to można robić programując dla karty graficznej bezpośrednio.

Już nie wspomnę, że fps monitorów są różne w zależności od zastosowane
matrycy. Widywałem miedzy 59 a 65 bodajże. Być może w niektórych
monitorach wartości są inne - nie interesowałem się tematem. W każdym
razie 17ms nie jest żadną magiczną granicą.

--

Pozdrawiam
Marek

[ pokaż wiadomość z nagłówkami ]

do góry
39. Data: 2013-02-02 15:26:16
Temat: Re: Problem z animacją JS
Od: Paweł Piskorz <n...@p...nie.invalid>

W dniu 2013-02-01 16:15, Marek pisze:
> W dniu 2013-01-31 23:42, Paweł Piskorz pisze:
>>
>> Przyczyną jest tutaj nieznajomość position:fixed :)
>
> Świetnie zbudowałeś napięcie. A czy po tym wstępie mógłbyś wątek
> rozwinąć? :-D

https://developer.mozilla.org/en-US/docs/CSS/positio
n

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
40. Data: 2013-02-02 21:17:48
Temat: Re: Problem z animacją JS
Od: Marek <p...@s...com>

W dniu 2013-02-02 15:26, Paweł Piskorz pisze:
> W dniu 2013-02-01 16:15, Marek pisze:
>> W dniu 2013-01-31 23:42, Paweł Piskorz pisze:
>>>
>>> Przyczyną jest tutaj nieznajomość position:fixed :)
>>
>> Świetnie zbudowałeś napięcie. A czy po tym wstępie mógłbyś wątek
>> rozwinąć? :-D
>
> https://developer.mozilla.org/en-US/docs/CSS/positio
n
>
>

Świetnie, przeczytałem ten artykuł i wydaje mi się, że nie ma to nic
wspólnego z opisanym przeze mnie problemem. W szczególności poczytałem o
position:fixed ale żadnych hintów co do problemów z płynnością animacji
nie znalazłem. "fixed" dotyczy pozycjonowania względem okna browsera i
tylko tyle tam jest napisane. Jaki to ma związek? Może nie zwróciłem
uwagi na jakiś detal. Wyjaśnij w czym rzecz.

--

Pozdrawiam
Marek

[ pokaż wiadomość z nagłówkami ]

do góry