[MX] easing

[black-dog]

ich möcht n "fläsch"-filmchen per button verschieben. damit das ganze auch noch hübsch aussieht sollte die animation gebremst werden.

kann mir jemand das prinzip einer solchen bremsung erkläruen, und/oder einen link zu nem anständigen tutorials geben?

 

[black-dog]

hmmm, meine beschreibung scheint euch nicht zu genügen ;-).

also denn, ein einfaches beispiel:
ich habe einen Button und eine Fläche. Bei klick auf den button sollte die fläche 300px nach links geschoben werden. der effekt soll aber nicht sprunghaft vollzogen werden. ich stelle mir vor, dass die Fläche, je näher am ziel, immer langsamer wird.

ach ja, das ganze möcht ich mit AS lösen.

how to do?

 

[sancho]

doch doch die beschreibung war schon ausreichend, aber wir sind hier nicht immer so schnell

also, der code mit dem du eine bewegung immer langsamer werden lassen kannst kann sein:

  deinButton.onPress = function() {
    deinMc.onEnterFrame = function() {
      this._x += (this._x - zielKoordinaten)/v
    }
}

wobei zielKoordinaten der x wert ist auf den zugesteuert wird, und v ein geschwindigkeitswert ist (je größer desto langsamer!)
das ganze klappt nactürlich auch mit _y oder _width oder was auch immer..

*sancho*

 

[Chris Kurt]

Hier ist noch eine Lösung:

MovieClip.prototype.floatTo = function(s, x, y) {
    this._x += (Math.round(x-this._x)*s)*s;
    this._y += (Math.round(y-this._y)*s)*s;
};
deinMc.onEnterFrame = function() {
    this.floatTo(.5,444,666);
};

Das ganze sollte in einer der ersten Frames in der Hauptzeitleiste, wobei die 444 die anvisierte X-Position und 666 die y-Position darstellt.


Hier noch mal einiges zur Theorie vom 'easing':


/* Here are some super-duper equations for y'all to play with.
I worked really hard on these, so please work at figuring
out how to use them yourself. I will not give you
personal tutorials by email, ok? =] Enjoy.
/*



// simple linear tweening - no easing, no acceleration
// t: current time, b: beginning value, c: change in value, d: duration
Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
}

///////////// QUADRATIC EASING: x^2 ///////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// quadratic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be in frames or seconds/milliseconds
Math.easeInQuad = function (t, b, c, d) {
t /= d;
return c*t*t + b;
}

// quadratic easing out - decelerating to zero velocity
Math.easeOutQuad = function (t, b, c, d) {
t /= d;
return -c * t*(t-2) + b;
}

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

}


///////////// CUBIC EASING: x^3 ///////////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// cubic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be frames or seconds/milliseconds
Math.easeInCubic = function (t, b, c, d) {
t /= d;
return c*t*t*t + b;
}

// cubic easing out - decelerating to zero velocity
Math.easeOutCubic = function (t, b, c, d) {
t /= d;
t--;
return c*(t*t*t + 1) + b;
}

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


///////////// QUARTIC EASING: x^4 /////////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// quartic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be frames or seconds/milliseconds
Math.easeInQuart = function (t, b, c, d) {
t /= d;
return c*t*t*t*t + b;
}

// quartic easing out - decelerating to zero velocity
Math.easeOutQuart = function (t, b, c, d) {
t /= d;
t--;
return -c * (t*t*t*t - 1) + b;
}

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


///////////// QUINTIC EASING: x^5 ////////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// quintic easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in value, d: duration
// t and d can be frames or seconds/milliseconds
Math.easeInQuint = function (t, b, c, d) {
t /= d;
return c*t*t*t*t*t + b;
}

// quintic easing out - decelerating to zero velocity
Math.easeOutQuint = function (t, b, c, d) {
t /= d;
t--;
return c*(t*t*t*t*t + 1) + b;
}

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



///////////// SINUSOIDAL EASING: sin(x) ///////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////


// sinusoidal easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in position, d: duration
Math.easeInSine = function (t, b, c, d) {
return -c * Math.cos(t/d * Math.PI/2) + c + b;
}

// sinusoidal easing out - decelerating to zero velocity
Math.easeOutSine = function (t, b, c, d) {
return c * Math.sin(t/d * Math.PI/2) + b;
}

// sinusoidal easing in/out - accelerating until halfway, then decelerating
Math.easeInOutSine = function (t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}


///////////// EXPONENTIAL EASING: e^x /////////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////


// exponential easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in position, d: duration
Math.easeInExpo = function (t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
}

// exponential easing out - decelerating to zero velocity
Math.easeOutExpo = function (t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
}

// exponential easing in/out - accelerating until halfway, then decelerating
Math.easeInOutExpo = function (t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(2*Math.log(c/2)/d * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
}


/////////// CIRCULAR EASING: sqrt(1-x^2) //////////////
//// Robert Penner - Sept. 2001 - robertpenner.com ////

// circular easing in - accelerating from zero velocity
// t: current time, b: beginning value, c: change in position, d: duration
Math.easeInCirc = function (t, b, c, d) {
t /= d;
return -c * (Math.sqrt(1 - t*t) - 1) + b;
}

// circular easing out - decelerating to zero velocity
Math.easeOutCirc = function (t, b, c, d) {
t /= d;
t--;
return c * Math.sqrt(1 - t*t) + b;
}

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

 

[black-dog]

nice one!

danke fürs die script. genau, wonach ich gesucht habe! ***** einwandfrei

 

[black-dog]

@kuat
------

danke für deine antwort. ich habe aber doch noch ne kleine frage:

MovieClip.prototype.floatTo = function(s, x, y) {
    this._x += (Math.round(x-this._x)*s)*s;
    this._y += (Math.round(y-this._y)*s)*s;
};

push.onPress = function() {
    _root.objekt.floatTo(.5,444,666);
}
;

ich möchte das objekt (instanzname = objekt) per button (instanzname = push) ansteuern. wieso funktioniert das skript nicht?

wofür steht +=? ist floatTo ein flashinterner befehl oder ist das ein name, den ich (z.b.) in brunhilde ändern könnte?

 

[Chris Kurt]

Versuch´s mal hiermit:

MovieClip.prototype.floatTo = function(s, x, y) {
    this._x += (Math.round(x-this._x)*s)*s;
    this._y += (Math.round(y-this._y)*s)*s;
};
deinButton.onPress = function() {
    deinMc.onEnterFrame = function() {
        deinMc.floatTo(.5, 444, 666);
    };
};

Bei deinem letzen Skript fehlte die OnEnterFrame-Anweisung.

wofür steht +=?

x += 1; macht soviel wie x = x+1;
Also es addiert zu der Variabel links vom Gleichheitszeichen den Wert rechts vom Gleichheitzzeichen.
-= gibt´s auch by the way.

ist floatTo ein flashinterner befehl oder ist das ein name, den ich (z.b.) in brunhilde ändern könnte?

Brunhilde wär kein Problem, der name der Funktion kann beliebig sein. Sollte nur sowohl bei der Dekleration als auch beim Aufruf der gleiche sein...

 

[black-dog]

danke für dein posting. nun klappts auch mit button.

nun habe ich aber trotzdem noch ein kleines "problem":
ich habe den registrierungspunkt des zu verschiebenden quadrates in der oberen, linken ecke gewählt. das script bezieht sich auf den mittelpunkt.

ist es möglich (oder sinnvoll im verhältnis aufwand/ertrag), das script auch auf den registrierungpunkt oben/links anzuwenden?

 

[black-dog]

noch ne zusatzfunktion

wie kann ich das ganze auf den ganzen flashfilm anwenden! d.h: alles soll durch knopfdruck verschoben werden!

 

[killkrog]

Alles in einen MovieClip zusammenfassen oder jeden einzelnen selbt ansteuern.