[JavaScript] - Animatie met versnelling en vertraging

[gvanh]

Hallo!

Ik wil graag met JavaScript/DHTML een animatie maken van een element over het scherm.

De bedoeling is als volgt: het element moet van positie x1, y1 worden verplaatst naar positie x2, y2.
setInterval/clearInterval, instellen van x/y positie van het element en dat soort technische dingen lukken allemaal, daaromtrent geen probleem. Waar ik alleen wat (wiskundig/natuurkundig) denkwerk bij nodig heb is vertraging versnelling. Ik wil graag dat de animatie zo verloopt, dat het element eerst steeds sneller beweegt, totdat hij op de helft is op maximale snelheid. Daarna het omgekeerde, dus vertraging totdat het element op zijn doelbestemming is.

De elementen die volgens mij te maken hebben met de berekening:
- Ten eerste berekenen van de afstand die het element in x en y richting moet afleggen (deltaX en deltaY)
- Aantal stappen waarin de animatie moet worden afgerond (is overigens variabel om te kunnen experimenteren met hoe vloeiend de animatie verloopt)
- Huidige stap
- Iets met een kwadratische functie (parabool) voor versnelling/vertraging

Met die elementen zou je volgens mij de x en y positie voor de betreffende stap moeten kunnen berekenen. Ik zie alleen niet zo goed hoe.

Hardop verder denkend...

De kwadratische functie moet voor step = 0 een versnelling geven van 0 EN voor step = (<total_steps> + 1) ook 0 geven.
De kwadratische functie moet beginnen met -x^2, want hij moet worden "geinverteerd".

En dan is er ook nog iets dat ervoor moet zorgen dat in het aantal stappen uiteindelijk ook precies de beoogde deltaX en deltaY afgelegd wordt.

Dat is zo'n beetje wat ik zelf kan verzinnen. Als het al nuttig zou zijn, dan zou ik niet weten hoe is zoiets zou moeten Googelen.

Alvast veeeeel dank voor het meedenken.

[André]

Het eerste waar ik aan denk: pak je natuurkunde boek (of binas) en ga eens spelen met die formules

[gvanh]

Heheh ... ja.

Ben bang dat die boeken inmiddels zijn aangevroten door muizen of gerecycled zijn tot prachtig WNF-briefpapier.

[Verwijderd]

Gebruik een bezier curve?

Er is een tool ontwikkeld om je functie visueel te kunnen aanpassen en met een beetje javascript kennis kan je deze wel omzetten naar een animatie.
http://timotheegroleau.co...ng_function_generator.htm

Ik heb hier ooit eens iets voor geschreven in javascript met bezier curves:
http://labs.joggink.be/joink/FXv2/

[gvanh]

Ik heb de verplaatsing nu gewoon lineair gedaan, en voor mijn gevoel heeft die standaard al een versnelling/vertraging erin zitten. Da's ongetwijfeld optisch bedrog, maar ik twijfel aan het nut om nog heel veel aandacht te besteden aan animatie.

Zie hier voor voorbeeld.

[alex3305]

Het klopt vrijgoed, echter is het niet echt mooi (IMHO) dat de achterste platen 5x sneller gaan dan de voorste (linkse) platen. Misschien dat je dat even kunt fixen met variable tijd oid?

[BtM909]

Heb je wat aan een functie die Robert Penner al heeft geschreven?

http://www.robertpenner.com/easing/easing_demo.html

[gvanh]

Oh, ik vind dat juist wel gaaf. Iedere animatie duurt 20 stappen x 10 ms. = 200 ms.
Dus verste afbeeldingen schuiven sneller naar voren omdat ze meer afstand moeten afleggen.

Daarbij ga ik er overigens vanuit dat je computer/browser snel genoeg is om de animatie bij te houden. Ik zie hier dat Opera hiermee bijvoorbeeld veel moeite mee heeft en dat het schuiven daar bijna vervelend traag gaat. De andere browsers (IE, FF en Saf.) hebben er aanzienlijk minder moeite mee.

[Janoz]

Wat je het beste kunt doen is je formules zo maken dat de positie van je object afhankelijk is van een float die tussen 0 en 1 ligt waarbij 0 voor de start positie staat en 1 voor de eind positie. Een lineaire verplaatsing in 100 stappen is dan gewoon die float in 100 stappen van 0 naar 1 laten gaan.

Zodra je dit hebt is het heel simpel om hier een functie tussen te zetten die de boel niet lineair mapt, maar daarvoor een curve gebruikt. Je kunt hiervoor inderdaad een bezier curve gebruiken, maar misschien is het voor het begrip makkelijker om gewoon een sinus te gebruiken en deze van -Pi tot Pi laten lopen (en herschalen zodat het bereik tussen 0 en 1 zit).

[ Voor 3% gewijzigd door Janoz op 08-04-2008 15:34 ]

[gvanh]

BtM909 schreef op dinsdag 08 april 2008 @ 15:31:
Heb je wat aan een functie die Robert Penner al heeft geschreven?

http://www.robertpenner.com/easing/easing_demo.html

Ja ... die zijn precies wat ik moet hebben! Voor de cubic InOut versie is erg goed.
Kan ik daarvan ergens de functies opvragen?

[gvanh]

Janoz schreef op dinsdag 08 april 2008 @ 15:33:
Wat je het beste kunt doen is je formules zo maken dat de positie van je object afhankelijk is van een float die tussen 0 en 1 ligt waarbij 0 voor de start positie staat en 1 voor de eind positie. Een lineaire verplaatsing in 100 stappen is dan gewoon die float in 100 stappen van 0 naar 1 laten gaan.

Zodra je dit hebt is het heel simpel om hier een functie tussen te zetten die de boel niet lineair mapt, maar daarvoor een curve gebruikt. Je kunt hiervoor inderdaad een bezier curve gebruiken, maar misschien is het voor het begrip makkelijker om gewoon een sinus te gebruiken en deze van -Pi tot Pi laten lopen (en herschalen zodat het bereik tussen 0 en 1 zit).

Ja ... slim. Goeie! Ik heb nu stap 1 uitgevoerd. Nu ga ik 'ns kijken of ik iets met sinus curve kan doen.
Thanks!

[DanielG]

Die staat ook op http://timotheegroleau.co...ng_function_generator.htm met forumule.

code:

function(t:Number, b:Number, c:Number, d:Number):Number {
    var ts:Number=(t/=d)*t;
    var tc:Number=ts*t;
    return b+c*(-2*tc + 3*ts);
}

[gvanh]

Ah ja ... ook heel nuttig.

Alleen hier wat gebrek aan wiskundige aanleg ... wat zijn de 4 parameters die hier meegegeven worden?

De eerste (t) zal waarschijnlijk het punt in de tijd zijn (dus eigenlijk de x coördinaat)?
Maar wat zijn dan die andere 3?

Uh oh...

*edit*
Hmmm ... zou zo maar eens gelukt kunnen zijn ... b, c, d zijn blijkbaar constanten?!
Volgens mij geeft-ie nu een versnell/vertraging.
Gaaf!

Dank voor jullie hulp!

[ Voor 24% gewijzigd door gvanh op 08-04-2008 16:06 ]

[Verwijderd]

gvanh schreef op dinsdag 08 april 2008 @ 15:37:
[...]


Ja ... die zijn precies wat ik moet hebben! Voor de cubic InOut versie is erg goed.
Kan ik daarvan ergens de functies opvragen?

*kuch*

Gebruik een bezier curve?

Er is een tool ontwikkeld om je functie visueel te kunnen aanpassen en met een beetje javascript kennis kan je deze wel omzetten naar een animatie.
http://timotheegroleau.co...ng_function_generator.htm

En een uitwerking ervan vind je hier:
http://labs.joggink.be/joink/FXv2/joink.fx.js

in je functie outElasticBig:function(t, b, c, d){
is t de huidige tijdsframe, b de startpositie, c de afstand die dient afgelegd te worden en d de totale tijdsduur (frames)

[gvanh]

Nice ... dank je wel!

[ Voor 33% gewijzigd door gvanh op 08-04-2008 17:38 ]

[BtM909]

gvanh schreef op dinsdag 08 april 2008 @ 15:37:
[...]


Ja ... die zijn precies wat ik moet hebben! Voor de cubic InOut versie is erg goed.
Kan ik daarvan ergens de functies opvragen?

Kijk ff naar de homepage van Robert Penner, hij heeft ze gratis beschikbaar gemaakt... Tegenwoordig zitten ze trouwens standaard in moo.tools

[tonyisgaaf]

Ik ben erg "gecharmeerd" van de Yahoo User Interface tools:
http://developer.yahoo.com/yui/
Goed gedocumenteerd in de code (dus veel van te leren) en heel veel beschikbare examples. Ze hebben speciaal voor de YAHOO.util.Anim "klasse" een YAHOO.util.Easing klasse.
http://yuiblog.com/assets/pdf/cheatsheets/animation.pdf
Hierin staan verschillende "easing" technieken, waaronder versnellen (in en/of out), "bounce", elastisch, etc. Wat mij betreft is kopiëren/interpreteren en vervolgens reproduceren -> leren.
Kijk in de code en doe je ding!

[Verwijderd]

MooFX heeft ook diverse sexy effectjes:

http://demos.mootools.net/

Links in het menu staan aardig wat bewegende javascriptjes, allemaal erg smooth.

[BtM909]

^ ^ die effecten komen dus van Robert Penner af

[Makkelijk]

Ik zou inderdaad moofx gebruiken, dan heb je keuze uit diverse versnel / vertraag effecten.