Javascript, animation and easing functions
I recently had to create an animation, which obey to the laws of physics, using javascript and HTML5.
Among the gravity and free falling, one of these animations had to also apply sort of bouncing and elastic laws.
After creating it first with CSS3 and HTML, we realized that most of the Android devices does not support it fully yet. Especially versions prior to Ice Cream Sandwich, such as Android 2.1, 2.2, 2.3 and lower (Froyo and its siblings).
So, I had to transfer everything into HTML5 Canvas, and instead of applying the css-transitions, I had to implements everything alone.
The first website I encountered and would like to highly recommend is Timothee Groleau's easing generator which can be found here:
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm
Originally made for Flash - but can easily adopted to Javascript HTML5 too.
The output of his generator is basically a function describes a certain movement of an object.
Such movement may be physical movement on either X/Y/Z axis, or even the rotation degree of an object.
The function takes 4 parameters:
t - the current time of the animation (starts with 0 and in every frame has to be increased in 1/num_of_frames_per_second). make sure that if you work in Milliseconds - t has to be that too.
b - the initial parameter (of the x/y/z axis, the rotation degree/radians etc.)
c - the target (of the same x/y/z axis or the rotation degrees)
d - total time for this process - again, like the t, has to be at the same time-unit, and personally - I recommend working with milliseconds.
the output of the function is the current value of your object at the specific t.
as for drawing, especially for 3d objects, there are already-made frameworks that can be used for this purpose such as Three.js and k3d.
one last word - nearly every physical action has a formula to describe it. use the generator to find it instead of too many if's ... :)
Among the gravity and free falling, one of these animations had to also apply sort of bouncing and elastic laws.
After creating it first with CSS3 and HTML, we realized that most of the Android devices does not support it fully yet. Especially versions prior to Ice Cream Sandwich, such as Android 2.1, 2.2, 2.3 and lower (Froyo and its siblings).
So, I had to transfer everything into HTML5 Canvas, and instead of applying the css-transitions, I had to implements everything alone.
The first website I encountered and would like to highly recommend is Timothee Groleau's easing generator which can be found here:
http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm
Originally made for Flash - but can easily adopted to Javascript HTML5 too.
The output of his generator is basically a function describes a certain movement of an object.
Such movement may be physical movement on either X/Y/Z axis, or even the rotation degree of an object.
The function takes 4 parameters:
t - the current time of the animation (starts with 0 and in every frame has to be increased in 1/num_of_frames_per_second). make sure that if you work in Milliseconds - t has to be that too.
b - the initial parameter (of the x/y/z axis, the rotation degree/radians etc.)
c - the target (of the same x/y/z axis or the rotation degrees)
d - total time for this process - again, like the t, has to be at the same time-unit, and personally - I recommend working with milliseconds.
the output of the function is the current value of your object at the specific t.
as for drawing, especially for 3d objects, there are already-made frameworks that can be used for this purpose such as Three.js and k3d.
one last word - nearly every physical action has a formula to describe it. use the generator to find it instead of too many if's ... :)
Comments