• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

html5 requestAnimFrame erklärung

hallo,
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]
von HTML5 Canvas Linear Motion Animation Tutorialwo gebe ich denn an was in einem frame alles geamacht wird?
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]
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)
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();
}
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 ;)
 
Zurück
Oben