Canvas - czy da się płynnie?

0

Cześć
Zastanawia mnie pewna rzecz związana z <canvas>.
W tym nieprofesjonalnym przykładzie https://jsfiddle.net/uqzvjg71/2/ zmieniając dl można regulować prędkość kwadratu.
Pojawia się jednak problem.
W miarę zwiększania dl patrzenie na ten kwadrat coraz bardziej boli, bo on coraz bardziej "skacze" po ekranie

Czy w canvas można animować kwatrat tak aby w ciągu tych 60Hz przechodził przez wszystkie piksele pomiędzy?

2

To, że skacze po ekranie to normalne, bo tak zaprogramowałeś (a nie ma tu żadnego tweeningu, więc jak dodasz ileś pikseli do ostatniej pozycji, to ci skacze po ekranie).

Chociaż czasem w grach są takie smugi ruchu (nie wiem jak to nazwać, ale chodzi o złudzenie, że coś się rusza za pomocą wyrenderowania takich smug za obiektami edit: zdaje się, że to "motion blur").

Możesz też zastosować easing, i będzie bardziej płynnie się odbijał.

Chyba, że ci chodzi o gubienie klatek albo przeskoki w renderingu, ale jeśli tak to raczej problem z wydajnością i mógłbyś:

  • zoptymalizować istniejący kod (np. czy musisz odpalać ctx.clearRect do całego canvasa, nawet jeśli wiesz, że tylko kawałek zmieniasz?)
  • zmienić technikę renderingu, np. pójść w WebGL, albo spróbować jakby to poszło na zwykłych divach z użyciem transform(), czy nie byłoby płynniej
  • jest jeszcze taka kwestia, że zawsze dodajesz tę samą liczbę pikseli. Natomiast nie wiesz tak naprawdę ile czasu upłynęło od ostatniego renderingu. Więc może się tak zdarzyć, że będzie jakaś zamuła procesora i nowa klatka odpali się po dłuższym czasie. W takim układzie to, co mógłbyś zrobić to np. liczyć ile milisekund upłynęło od ostatniego renderingu i potem wziąć tę liczbę milisekund i pomnożyć przez ustaloną szybkość w pikselach na milisekundę. Wtedy bardziej "równo" by to jechało przynajmniej
0

Zrobiłem to samo w CSS ale niestety też rozmywa.

#wrapper {
    width: 500px;
    height: 300px;
    background: green;
}
#swingingSquare {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #000;
    animation: swinging 4s linear infinite;
    -webkit-animation: swinging 4s linear infinite;
}

@keyframes swinging {
    0%   {left:0px; top:100px;}
    50%  {left:400px; top:100px;}
    100% {left:0px; top:100px;}
}

@-webkit-keyframes swinging {
    0%   {left:0px; top:100px;}
    50%  {left:400px; top:100px;}
    100% {left:0px; top:100px;}
}


<div id="wrapper">
	<div id="swingingSquare"></div>
</div>

0

Zaprogramowałem tak bo nie wiem jak można w canvas przyspieszyć ten kwadrat bez skakania po ekranie.
To nie problem z wydajnością.
Chcę żeby poruszał się szybko && Chcę żeby, np w kamerze poklatkowej, było widać że przemieszcza się co 1px.
Chciałbym to wykorzystać do tworzenia gry więc CSS odpada.

1

https://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe
Wstaw sobie licznik FPS.
Jak chcesz zobaczyć przemieszczanie się co 1px? Przy dużych prędkościach kwadratu tego nie ogarnie monitor i oko ludzkie też nie.

0

@LukeJL:
Coś takiego, czy można to lepiej zapisać?

#wrapper {
    width: 500px;
    height: 300px;
    background: green;
    position: relative;
}
#swingingSquare {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    background-color: #000;
    animation: swinging 4s linear infinite;
}

@keyframes swinging {
    0%     {transform: translate(0, -50%)}
    50%   {transform: translate(400px, -50%)}
    100% {transform: translate(0, -50%)}
}

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