/    Sign up×
Community /Pin to ProfileBookmark

Wanted: Animation formulas

Copy linkTweet thisAlerts:
Sep 05.2007

Hi everybody!

I am no mathematical genius, so therefore I am humbly asking for animation formulas that I can use to write my own JavaScript animation class.

I basically want to apply effects such as:
* easing in and out
* quadratic in/out curve
* cubic in/out curve
* exponential in/out curve
* linear tweening and all the funky methods there are to think about.

I understand there are libraries like YUI, but I have challenged myself to developing my own animation class from scratch.

A link with mathematical formulas for different types of animation is all I need! If they are written with JavaScript in consideration, that would be nice too.

Thanks for the advice in advance!!!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@nshiellSep 05.2007 — U seem to know the maths better than me!

For animation u need to move your objects a certain amount every fraction of a second until u reach NEAR your end point.

I find it helpful to think about what I actualy want to happen and the work out the maths accordingly

Any help?
Copy linkTweet thisAlerts:
@josamotoauthorSep 05.2007 — Dude, you have no idea how bad my maths skills are! ? Anycase, I'm too lazy to figure out the formulas myself, and I know for a fact that there are a number of standard formulas used on the planet.

We pretty much find these formulas in any animation package, be it 2D or 3D.
×

Success!

Help @josamoto spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...