Sunday, August 14, 2011

Easing for animations demo

While learning how to use DIY app software, I’m running across quite a few things I know very little about, such as animation. A simple type that moves an image in a straight line is called a linear animation. The Photoshop plug-in Kwik has quite a few ways to create variation with easing. Easing changes the speed and other aspects of how the image moves from point A to point B.

The easing options have interesting names such as InExpo and inOutElastic. For the inexperienced, their descriptions can be a little tough to visualize and differentiate, such as:
inOutExpo: starts motion from a zero velocity, accelerates, then decelerates to a zero velocity using an exponential easing equation.


As opposed to:
OutExpo: starts motion fast and then decelerates motion to a zero velocity as it executes.


Being a visual person, I’ve been making a demo app to see the various features in action. This video shows all the easing methods (plus 2 widgets because there was some extra room):

Aside from the easing method selected, all other aspects of the animation are the same for each one. The video is a little jerky but it gives the idea. For a interactive demo of easing options on the web, check out this page.

I hope this is helpful to someone...it certainly is for me, at least.
Related Posts Plugin for WordPress, Blogger...
Pin It button on image hover