Animacia v JS [vyriešené]

F3RY · Napísal **F3RY**: 23.04.2015 17:20

Zdravim, pokusam sa vytvorit animaciu pomocou JS, no nedari sa... Viete poradit dobru kniznicu na animaciu? Potrebujem animovat objekt(stvorcek, kruh...) po canvase podla suradnic. Teda mam iba pole bodov(X a Y). Dakujem

walther · Napísal **walther**: 23.04.2015 19:17

v čom nevyhovuje jquery?

chrono · Napísal **chrono**: 23.04.2015 21:13

Môžeš použiť napr. Raphaël alebo D3.js (v oboch knižniciach sa to robí viac-menej rovnako).

BX · Napísal BX: 23.04.2015 22:09

Alebo html5? http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/

F3RY · Napísal autor témy **F3RY**: 24.04.2015 1:01

walther píše:

v čom nevyhovuje jquery?

Mojim vedomostiam :-)

Prvy krat sa pustam do animacie, a nemam velmi tusenie na aky princip to funguje... Je mi jasne, ze sa to v jquery da, len prepocitavanie velke mnozstvo premennych, nastavovanie casu... Zlakol som sa toho. Navyse, ja neviem kolko tych bodov budem mat, takze to potrebujem dynamicky.

Bx, ak by sa to dalo urobit iba v html5 bol by som najspokojnejsi

No z tej ukazky som velmi nevysiel.
Tazko sa to hlada, pretoze vsade pisu o jednoduchej css, alebo JS, pripadne svg animacii, preto som sa obratil na Vas.

void · Napísal **void**: 24.04.2015 1:10

Tiez odporucam HTML5/canvas. Staci cisty...

chrono · Napísal **chrono**: 24.04.2015 11:05

Môžeš použiť canvas a všetko si riešiť sám, alebo môžeš použiť nejakú knižnicu (ktorá použije canvas) a nebudeš sa musieť starať o interpoláciu cesty, časovače...

Ukážok, ako sa to robí nájdeš na internete dosť veľa, pre návody k D3.js hľadaj napr. "d3.js animate along path". Tu Flight Animation with d3.js je napr. celkom pekná ukážka, ako sa niečo také robí (ale nie je to krok za krokom návod).

F3RY · Napísal autor témy **F3RY**: 25.04.2015 0:53

Dakujem za podporu. Je to narocnejsie, ako som predpokladal, ale podarilo sa

http://jsfiddle.net/f3ry/dza07mfs/
Este taka skor matematicka otazka. Bolo by fajn, ak by sa ten obdlznik natacal podla cesty. Zrejme budem potrebovat v contexte pouzivat rotate funkciu a manualne dopocitacat uhol ze? Tusi niekto, ako to pocitat?

BX · Napísal BX: 25.04.2015 8:47

Mal si v škole analytickú geometriu? Stačí ti vždy spočítať uhol smerového vektora a podľa toho sa natočiť (plus podmienkou ošéfovať plus/mínus podľa otočenia).

chrono · Napísal **chrono**: 25.04.2015 10:29

Ak použiješ funkciu Math.atan2 je to pomerne jednoduché

Kód:

function animate() {
    if (t < points.length - 1) {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, 350, 350);
        draw_line();
    }

    var r = Math.atan2(points[t - 1].y-points[t].y, points[t - 1].x - points[t].x);

    ctx.save();
    ctx.translate(points[t - 1].x, points[t - 1].y);
    ctx.rotate(r);
    ctx.beginPath();
    ctx.rect(-35, -25, 70, 50);
    ctx.stroke();
    ctx.restore();
    t++;
}

Inak rýchlosť posunu ti momentálne závisí na dĺžke toho segmentu (pretože ich všetky delíš na rovnaký počet častí), čo môže ale aj nemusí byť požadované správanie.

F3RY · Napísal autor témy **F3RY**: 27.04.2015 12:07

Dakujem za pomoc

Problem vyrieseny. Rychlost posunu momentalne vyhovuje.

Animacia v JS [vyriešené]

Podobné témy