GraphTech Expert Blog

What is Smoothie?

Smoothie is a C++ implementation of a physical simulation engine for GUI animations. It calculates the current (per frame) position of a UI element by it’s final position.

What is Smoothie good for (features) ?

• Animations are smooth, velocity does not change abruptly, feels natural & easy for the eye to track.
• Animations are parametric yet simple, only a final position is needed to start an animation.
• Final position may be changed during an ongoing animation.
• Animation time can be limited, a distant final position doesn’t mean a long animation.
• Animations can be started by a drag & release action, resulting animation may be constrained.
• Low CPU usage, works on mobile devices.
• OS independent.
• Open source (MIT license)

Usage

Setup

The following code will be used in all the examples.

#include "Smoothie.h"
// this function simulates 25 fps
unsigned int simulator25fps(void)
{
    static unsigned int ticks = 0;
    ticks += 40;
    return ticks;
}

// assign an implementation
Smoothie::getTimeMsecFuncPtr Smoothie::getTimeMsec = simulator25fps;
// print x space marks followed by an asterisk
void show(int x)
{
    while(x--)
        printf(" ");
    printf("*\n");
}

In the following examples I will use a smoothie as defined below:

// create a smoothie positioned at 0, that traverses a distance of 180 win 2000ms (=2 seconds)
Smoothie smoothie(0, 180, 2000);

Requesting an animation of a distance less than 180, will take less that 2000ms.

Requesting an animation of a distance greater than 180, will cause the smoothie to skip the section with the highest speed, so that the total time of the animation will be 2000ms.

Example 1: Going from 0 to 120

// start animation
smoothie.setFinalPosition(120);

unsigned int timeTillIdle;
do
{
    // calculate current position
    int x = smoothie.calcCurrentPosition(&timeTillIdle);
    show(x); // show on the screen the value of x
} while(timeTillIdle); // stop when smoothie is idle: timeTillIdle==0

Example 2: Going from 0 to 120, aborting at 60

// start animation
smoothie.setFinalPosition(120);

unsigned int timeTillIdle;
do
{
    // calculate current position
    int x = smoothie.calcCurrentPosition(&timeTillIdle);
    // request to go back to 0 if we reached 60

    if(x >= 60 && smoothie.getFinalPosition() == 120)
        smoothie.setFinalPosition(0);

    show(x); // show on the screen the value of x

} while(timeTillIdle); // stop when smoothie is idle: timeTillIdle==0

Example 3: “glide” animation after a drag-release action

// drag was released at position=0 with velocity=500.
// final position is in the range of [50..120], bounce size is 20
smoothie.setCurrentConstraint(0, 500, 50, 120, 20);

unsigned int timeTillIdle;
do
{
    // calculate current position
    int x = smoothie.calcCurrentPosition(&timeTillIdle);
    show(x); // show on the screen the value of x
} while(timeTillIdle); // stop when smoothie is idle: timeTillIdle==0

Download Smoothie Source

Tags: acceleration, Animation, C++, interpolation, library, open source, parametric, physical, smooth, spline, UI, velocity

This entry was posted on Thursday, June 10th, 2010 at 10:21 and is filed under Miscellaneous. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.