Zart und geschmeidig wie der Robert Penner

[tyrellinger]

Hallo Zusammen,
ich stell mir seit l?0Š1ngerem ne frage zu Bewegungsalgorithmen in Actionscript.

Um z.B. eine Eigenschaft (position, alpha, ...) eines Objects geschmeidig von Wert A zu Wert B zu bringen benutze ich gerne innerhalb eines enterframe-event folgenden Algorithmus:

onClipEvent(enterFrame){    
      this.eigenschaft_x += ((zielwert_der_eigenschaft- istwert_der_eigenschaft)/12)/1.0;
} 

Den zielwert_der_eigenschaft halte ich nat¨¹rlich irgendwo auserhalb meiner enterframeroutine zB. _level0.zielwert_der_eigenschaft.

Sch?0‹2n und gut - funktioniert auch wunderbar schaut mal zB. hier
http://www.gold-wirtschaftswunder.de/vorschau/

F¨¹r folgende spielerei
(klikkt auf die kugeln) oder andere Projekte w¨¹rden mir die Algorithmen vom robert penner sehr gut gefallen z.B.

// cubic easing in/out - acceleration until halfway, then deceleration
Math.easeInOutCubic = function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
}; 

Ich suche nun einen Weg, diesen oder auch andere Penner-Algorithmen auf ?0Š1hnliche Art und Weise anzuwenden wie ich es oben schon mit dem N?0Š1herungsalgorithmus beschrieben habe.
Hmm Herr Penner arbeitet mit 4 parametern, die ich leider nicht wirklich verstehe.
t current time / current frame
b beginning value (w¨¹rde ich als istwert der eigenschaft verstehen)
c change value (meint er die differenz zwischen soll und istwert der eigenschaft?)
d duration (hier meint er wohl das tempi der animation)

Ok mal angenommen ich w¨¹rde f¨¹r meinen einfachen Algorithmus auch ne function schreiben, s?0Š1he diese sicherlich so aus

function get_new_value(var soll, var ist){
return ((soll - ist)/12)/1.0;
}

nun die frage, wird es m?0‹2glich sein dem herrn penner seine function so umzuschreiben,
dass ich nur noch die beiden parameter soll und ist bleiben.
Wenn das ginge w?0Š1re das so ziemlich der Hammer und w¨¹rde die wahnsinns Macht
Aller Geschmeidigkeiten in flash bedeuten.

Ich hoffe man hat mich verstanden
Und vielleicht wird¡¯s ja ein interessanter thread

tyrellinger

[ludabruda]

Hi,

der Gedanke ist gar nicht schlecht, allerdings kommst du mit zwei Parametern nicht hin. Insbesondere bei EaseInOut-Funktionen nicht.
Die Parameter bedeuten im übrigen folgendes:

t: ist der Zähler
b: der Ist-Wert (allerdings immer der gleiche, sonst gehts schief)
c: ist die Änderung (also Soll-ist)
d: Anzahl Schritte

Beispiel:

In 10 Iterationen soll sich ein Objekt von _x = 10 nach _x=100 bewegen.

this._x = this.x = 10;
this.endX = 100;
this.steps = 10;
this.counter = 0;
this.onEnterFrame = function() {
    if(this.counter < this.steps) {
       this.counter++;
      this._x = Math.EaseInOutCubic(this.counter,this.x,this.endX-this.x,this.steps);
} else delete this.onEnterFrame;
}; 

Du benötigst den Counter insofern auch, als dass du eine Austrittsbedingung für dein onEnterFrame brauchst.

Die Anzahl der Schritte ist wichtig, damit die Funktion weiß, wann das easing in und eann out geschehen soll.

Also: unter vier Parametern geht es nicht. Bei deiner Funktion mag das noch so sein. Aber Penners Funktionen sind auch insofern richtig gut, als das sie alle (bis auf Ausnahmen mit optionalen Parametern) die gleichen Parameter haben. So kann man in seinem Code schnell mal ein Easing ändern, ohne sich groß Gedanken zu machen. Das ist sehr modular gedacht und somit gut gelöst.

Grüße
Sascha

[tyrellinger]

hey hallo,
ok wahnsinn - jetzt ist mir klar wie die methoden mit den 4 parameter einsetzen kann.
iss ja auch noch voll cool weil ich ja den zeitraum meiner animation festlegen kann.

ich danke und werde bericht erstatten am we.

tyrellinger

[tyrellinger]

ok nochmal hallo,
es tut! hab jetzt quasi die macht über die
robert penner algorithmen.

hab es jetzt mal so vorab gebaut:

function naeher_1(objekt, soll){
    return ((soll-objekt._y)/6)/1.2;
}
function naeher_2(t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
};
function naeher_3(t, b, c, d) {
        if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
};
 
this.onEnterFrame = function(){
    //inst_streifen._y += naeher_1(inst_streifen, _level0.ydest);
    if(_level0.step++ < 20){
        inst_streifen._y = naeher_3(_level0.step, _level0.ystart, _level0.ydest-_level0.ystart, 20);
    }
    //inst_streifen._y = _level0.dest_y;
}
 
this.inst_button_upp.onPress = function(){
    //trace("asdf");
    if(_level0.currpos > 1){
        _level0.currpos--;
        _level0.ystart = inst_streifen._y;
        _level0.ydest = inst_streifen._y - 120;
        _level0.step = 1;
    }
}
this.inst_button_down.onPress = function(){
    //trace("asdfff");
    if(_level0.currpos < _level0.maxpos){
        _level0.currpos++;
        _level0.ystart = inst_streifen._y;
        _level0.ydest = inst_streifen._y + 120;
        _level0.step = 1;
    }
} 

hier kann man es sich anschauen
bitte auf den grünen button 'GRAFIK' klikken und dann die kleinen pfeile in der rechten navi klikken.

ich danke nochmal für den ansatz er hat mir wirklich geholfen.

Was ich jetzt bischen schade finde, ist dass die algorithmen, die so ein federn erzeugen nicht bei den downloadbaren dabei ist (zb. easingOutElastic)

bye
tyrellinger

[e2e4]

Ist das nicht die hier?:

Math.easeOutElastic = function (t, b, c, d, a, p) {
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}; 

[tyrellinger]

danke!
Sind die beiden neuen parameter 'a' und 'p' irgendwo dokumentiert oder kann mir jemand sagen was ich da reinschreiben soll?

[e2e4]

direkt aus dem AS von Robert Penner: http://www.robertpenner.com/easing/easing_equations.as

/////////// ELASTIC EASING: exponentially decaying sine wave //////////////

// t: current time, b: beginning value, c: change in value, d: duration, a: amplitude (optional), p: period (optional)
// t and d can be in frames or seconds/milliseconds

[tyrellinger]

ok es tut - cool - danke.
wow - jetzt bin ich echt bischen begeistert.