littleHtml Freak
Mitglied
hallo,
ich versuche gerade html5 zu lernen und verstehe dieses requestAnimFrame nicht :/
von HTML5 Canvas Linear Motion Animation Tutorialwo gebe ich denn an was in einem frame alles geamacht wird?
heißt das:
dass die funktion animate in jedem frame ausgeführt wird? wo platziere ich code der unabhängig von der animation(z.b. einmal am anfang) ausgeführt wird?
mein konkretes problem ist im moment dass ich gerne den teil in dem die x und y werte zugeordnet werden gernme einmal pro frame ausführen würde und die beiden schleifen, die das umrahmen allgemein gelten sollen (s. neue position von block)
der block soll in diesem code ähnlich wie in dem beispielcode von punkt zu punkt wandern. wenn ein punkt erreicht ist soll ein anderer angesteuert werden(eine art zickzack)
ich hoffe ich habe mein problem vernünftig dalegen können (ist mir grad nicht so leicht gefallen ;) ) und ihr könnt mir helfen!
gruß simon
EDIT: die formatierung ist wohl kaputt aber da ist ja der link ;)
ich versuche gerade html5 zu lernen und verstehe dieses requestAnimFrame nicht :/
Code:
[FONT=monospace]window.[COLOR=#660066]requestAnimFrame[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR]callback[COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR][/FONT]
[COLOR=#000066][B]return[/B][/COLOR] window.[COLOR=#660066]requestAnimationFrame[/COLOR] [COLOR=#339933]||[/COLOR] window.[COLOR=#660066]webkitRequestAnimationFrame[/COLOR] [COLOR=#339933]||[/COLOR] window.[COLOR=#660066]mozRequestAnimationFrame[/COLOR] [COLOR=#339933]||[/COLOR] window.[COLOR=#660066]oRequestAnimationFrame[/COLOR] [COLOR=#339933]||[/COLOR] window.[COLOR=#660066]msRequestAnimationFrame[/COLOR] [COLOR=#339933]||[/COLOR] [COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR]callback[COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR] window.[COLOR=#660066]setTimeout[/COLOR][COLOR=#009900]([/COLOR]callback[COLOR=#339933],[/COLOR] [COLOR=#CC0000]1000[/COLOR] [COLOR=#339933]/[/COLOR] [COLOR=#CC0000]60[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#009900]}[/COLOR][COLOR=#339933];[/COLOR][COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]function[/B][/COLOR] animate[COLOR=#009900]([/COLOR]lastTime[COLOR=#339933],[/COLOR] myRectangle[COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] canvas [COLOR=#339933]=[/COLOR] document.[COLOR=#660066]getElementById[/COLOR][COLOR=#009900]([/COLOR][COLOR=#3366CC]"myCanvas"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] context [COLOR=#339933]=[/COLOR] canvas.[COLOR=#660066]getContext[/COLOR][COLOR=#009900]([/COLOR][COLOR=#3366CC]"2d"[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#006600][I]// update[/I][/COLOR] [COLOR=#003366][B]var[/B][/COLOR] date [COLOR=#339933]=[/COLOR] [COLOR=#003366][B]new[/B][/COLOR] Date[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] time [COLOR=#339933]=[/COLOR] date.[COLOR=#660066]getTime[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] timeDiff [COLOR=#339933]=[/COLOR] time [COLOR=#339933]-[/COLOR] lastTime[COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] linearSpeed [COLOR=#339933]=[/COLOR] [COLOR=#CC0000]100[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#006600][I]// pixels / second[/I][/COLOR] [COLOR=#003366][B]var[/B][/COLOR] linearDistEachFrame [COLOR=#339933]=[/COLOR] linearSpeed [COLOR=#339933]*[/COLOR] timeDiff [COLOR=#339933]/[/COLOR] [COLOR=#CC0000]1000[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] currentX [COLOR=#339933]=[/COLOR] myRectangle.[COLOR=#660066]x[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#000066][B]if[/B][/COLOR] [COLOR=#009900]([/COLOR]currentX [COLOR=#339933]<[/COLOR] canvas.[COLOR=#660066]width[/COLOR] [COLOR=#339933]-[/COLOR] myRectangle.[COLOR=#660066]width[/COLOR] [COLOR=#339933]-[/COLOR] myRectangle.[COLOR=#660066]borderWidth[/COLOR] [COLOR=#339933]/[/COLOR] [COLOR=#CC0000]2[/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] newX [COLOR=#339933]=[/COLOR] currentX [COLOR=#339933]+[/COLOR] linearDistEachFrame[COLOR=#339933];[/COLOR] myRectangle.[COLOR=#660066]x[/COLOR] [COLOR=#339933]=[/COLOR] newX[COLOR=#339933];[/COLOR] [COLOR=#009900]}[/COLOR] lastTime [COLOR=#339933]=[/COLOR] time[COLOR=#339933];[/COLOR] [COLOR=#006600][I]// clear[/I][/COLOR] context.[COLOR=#660066]clearRect[/COLOR][COLOR=#009900]([/COLOR][COLOR=#CC0000]0[/COLOR][COLOR=#339933],[/COLOR] [COLOR=#CC0000]0[/COLOR][COLOR=#339933],[/COLOR] canvas.[COLOR=#660066]width[/COLOR][COLOR=#339933],[/COLOR] canvas.[COLOR=#660066]height[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#006600][I]// draw[/I][/COLOR] context.[COLOR=#660066]beginPath[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]rect[/COLOR][COLOR=#009900]([/COLOR]myRectangle.[COLOR=#660066]x[/COLOR][COLOR=#339933],[/COLOR] myRectangle.[COLOR=#660066]y[/COLOR][COLOR=#339933],[/COLOR] myRectangle.[COLOR=#660066]width[/COLOR][COLOR=#339933],[/COLOR] myRectangle.[COLOR=#660066]height[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]fillStyle[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#3366CC]"#8ED6FF"[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]fill[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]lineWidth[/COLOR] [COLOR=#339933]=[/COLOR] myRectangle.[COLOR=#660066]borderWidth[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]strokeStyle[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#3366CC]"black"[/COLOR][COLOR=#339933];[/COLOR] context.[COLOR=#660066]stroke[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#006600][I]// request new frame[/I][/COLOR] requestAnimFrame[COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR] animate[COLOR=#009900]([/COLOR]lastTime[COLOR=#339933],[/COLOR] myRectangle[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][COLOR=#009900]}[/COLOR] window.[COLOR=#000066]onload[/COLOR] [COLOR=#339933]=[/COLOR] [COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] myRectangle [COLOR=#339933]=[/COLOR] [COLOR=#009900]{[/COLOR] x[COLOR=#339933]:[/COLOR] [COLOR=#CC0000]0[/COLOR][COLOR=#339933],[/COLOR] y[COLOR=#339933]:[/COLOR] [COLOR=#CC0000]50[/COLOR][COLOR=#339933],[/COLOR] width[COLOR=#339933]:[/COLOR] [COLOR=#CC0000]100[/COLOR][COLOR=#339933],[/COLOR] height[COLOR=#339933]:[/COLOR] [COLOR=#CC0000]50[/COLOR][COLOR=#339933],[/COLOR] borderWidth[COLOR=#339933]:[/COLOR] [COLOR=#CC0000]5[/COLOR] [COLOR=#009900]}[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] date [COLOR=#339933]=[/COLOR] [COLOR=#003366][B]new[/B][/COLOR] Date[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] [COLOR=#003366][B]var[/B][/COLOR] time [COLOR=#339933]=[/COLOR] date.[COLOR=#660066]getTime[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] animate[COLOR=#009900]([/COLOR]time[COLOR=#339933],[/COLOR] myRectangle[COLOR=#009900])[/COLOR][COLOR=#339933]; [/COLOR][FONT=monospace][COLOR=#009900]}[/COLOR][COLOR=#339933];[/COLOR][/FONT]
heißt das:
Code:
requestAnimFrame[COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR] animate[COLOR=#009900]([/COLOR]lastTime[COLOR=#339933],[/COLOR] myRectangle[COLOR=#009900])[/COLOR][COLOR=#339933]; [/COLOR]
[FONT=monospace] [COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
mein konkretes problem ist im moment dass ich gerne den teil in dem die x und y werte zugeordnet werden gernme einmal pro frame ausführen würde und die beiden schleifen, die das umrahmen allgemein gelten sollen (s. neue position von block)
Code:
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
animate();
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
//alten block löschen
context.clearRect(x-1, y-1, 20, 20);
//NEUE POSITION VON BLOCK
a=1;
while(a<=anz_ref){
while(x != ref_punkt_x[a] && y != ref_punkt_y[a]){
x =x + ((ref_punkt_x[a]-ref_punkt_x[a-1])/(Math.pow(Math.pow(ref_punkt_x[a]-ref_punkt_x[a-1],2)+Math.pow(ref_punkt_y[a]-ref_punkt_y[a-1],2),0.5)));
y =y + ((ref_punkt_y[a]-ref_punkt_y[a-1])/(Math.pow(Math.pow(ref_punkt_x[a]-ref_punkt_x[a-1],2)+Math.pow(ref_punkt_y[a]-ref_punkt_y[a-1],2),0.5)));
if(Math.round(x)==ref_punkt_x[a] || Math.round(y)==ref_punkt_y[a]){
x=ref_punkt_x[a];
y=ref_punkt_y[a];
}
}
a++;
}
//STOPP WENN AM RAND ANGEKOMMEN
if(x>feld_breite-20 || y > feld_hoehe-20 || y < 0){x=start_x;y=start_y;}
//ERSTELLEN DES BLOCKS
context.fillStyle = 'rgb(0,0,255)';//farbe des blocks
context.beginPath();
context.rect(x,y,18,18);
context.closePath();
context.fill();
}
ich hoffe ich habe mein problem vernünftig dalegen können (ist mir grad nicht so leicht gefallen ;) ) und ihr könnt mir helfen!
gruß simon
EDIT: die formatierung ist wohl kaputt aber da ist ja der link ;)