[JS] Bezier elastische bounce animatie

[Verwijderd]

De search leverde me enkel flash related topics op en ook google kon me geen soelaas bieden.

Feit is dat ik een soort bouncy effect wil op een in-easende div. Ik maak gebruik van de Robert Penner formule adhv een flash easing function generator die me een bezier functie weergeeft.
Link: http://timotheegroleau.co...ng_function_generator.htm

Feit is dat ik dit zou moeten omzetten naar javascript. Ik ben al enkele uren aan het proberen om het aan de praat te krijgen, en uiteindelijk is het wel gelukt maar de bounce is niet zoals verwacht.

Een online voorbeeld staat hier: (niet letten op de mouseout state want die is nog niet juist)
http://joggink.be/clients/whatsmyname%20v2/

Dit werkt nu adhv dit stukje code.

JavaScript:

function bounceExp(id, timer, t, b, res, c, d){
    if (timer < 10){
        t++;
        timer++;
        t = t / d;
        var ts =t*t;
        var tc =ts*t;
        var res = Math.ceil(b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t));
        document.getElementById('debug').innerHTML += "res: " + res + "<br />";
        var li = document.getElementById(id).style;
        li.paddingTop = res + "px";
        li.backgroundPosition = "0px " + res + "px";
        var h = b - res;
        li.height = h + "px";
        window.setTimeout("bounceExp('" + id + "', " + timer + ", " + t + ", " + b + ", " + res + ", " + c + ", " + d + ")", 15);
    }
}

Ik ging me baseren op een actionscriptcode die mijn collega geschreven had, deze vindt u hier:
http://joggink.be/clients/whatsmyname%20v2/ease.txt

[P.O. Box]

Feit is dat ik dit zou moeten omzetten naar javascript. Ik ben al enkele uren aan het proberen om het aan de praat te krijgen, en uiteindelijk is het wel gelukt maar de bounce is niet zoals verwacht.

Wat verwacht je dan?

[SchizoDuckie]

http://www.mootools.net/ heeft supersimpele animaties met een keur aan effectjes (ook bounce, sineIn, sineOut, etc)

Don't re-invent the wheel

[Verwijderd]

@Edward vb: wat ik verwacht? Wat meer bounce, maar ik denk dat ik me gelukkig zal moeten stellen met het huidige...

@SchizoDuckie: ik ben niet echt aan voorgekauwde scripts, maar ik heb wel gezien dat er een bounce functie met ease inzit, dus die zal ik wel eens checken.

Toch bedankt voor de replies.

[Verwijderd]

Bezier heb ik wel eens gedaan in js: http://www.rikkertkoppes.com/tests/bezier.htm
Die bounce, als dat altijd hetzelfde is, dan zou ik gewoon een bult posities voorkauwen in een array en van daaruit werken, in plaats van dus een en ander fysisch te benaderen. Dat heb ik hier eens gedaan voor iemand: http://www.rikkertkoppes.com/troep/dogwalker/ met http://www.rikkertkoppes.com/troep/dogwalker/dogwalker.js (posities van het menu zijn hardcoded, ipv smooth uitrekenen)

Iets met veertjes: http://www.rikkertkoppes.com/brain2.0/network/springs.html
een netwerk: http://www.rikkertkoppes.com/brain2.0/network/net.html (beter te zien in IE)

Misschien dat je er iets aan hebt

Don't re-invent the wheel

Als je aan tijd of geld gelimiteerd zit idd niet doen, anders kan ik het alleen maar aanmoedigen, leer je namelijk van.

[ Voor 28% gewijzigd door Verwijderd op 24-03-2007 11:47 ]

[Verwijderd]

Mijn eerste bounce test was zonder beziers, gewoon met een array met de width-values erin.

http://joggink.be/snippets/bounce

Maar omdat ik gezien had dat het met bezier supereasy kon in flash wilde ik dat wel proberen Feit is dat het wel handig is, maar dat het niet 100% werkt zoals verwacht.

[dusty]

scriptrequest

Lees even onze FAQ door om erachter te komen wat je moet doen om je probleem te kunnen plaatsen.