DBTweener

Posted on January 26th, 2013

DBTweener Graphics Demo

A tiny, portable and extensible C++ Tweening framework. Inspired by the Flash based Tweener API and it’s C++ port CPPTweener. It’s contained in a single C++ header and source file and comes with a all of Robert Penner’s easing equations included.

Tweening

The term ‘tween’ is short for ‘In between’. Animaters would use it to describe the frames in between key-frames in an animation. In games and in multimedia applications the term ‘tween’ is used to describe an effect, or a movement that connects two states together. For instance, consider activating a menu item that transfers the user to another sub menu. This transfer could happen instantaneously. But it could also be animated to give a more ‘natural’ feel to it. The animation between menu’s would be called a ‘tween’.

When working on a game or multimedia application tweens can do a lot for the look and feel of the application. Giving it a more luxurious feel and adding to the perceived quality of the application. Creating a tween animation usually involves interpolating coordinates or colors over a period of time instead of just setting them to a value. The DBTweener class contains a number of ready made interpolating functions as well as a small framework to comfortably use them in.

Overview

The DBTweener class is intended to be a small and simple copy/paste solution for adding tweens to any C++ project. There are just two files to copy:

Or download the full package, including a C++ console and graphics sample.

The main features are:

  • All position and time values are ‘floats’
  • Supports variable time steps
  • Includes all of Robert Penner’s easing equations as default
  • It’s easy to create and use custom easing equations

This is a video which demonstrates all of the default equations include in DBTweener:

License

DBTweener can be used according this (BSD) License.

Examples

These examples are fragments of C++ code. Download the full package for working examples.

Simple one-dimensional tween:

Create a simple tween that moves a position from 1 to 10 in 2 seconds.

#include <dbtweener.h>

// ...

void main()
{
  float fPos = 1.0f;
  int iSleepTimeMs = 20;

  CDBTweener oTweener;
  oTweener.addTween(&CDBTweener::TWEQ_CUBIC, CDBTweener::TWEA_INOUT, 2.0f, &fPos, 10.0f);

  while (1)
  {
    PrintPosition(fPos);

    // ..

    Sleep(iSleepTimeMs);
    oTweener.step((float)iSleepTimeMs * 0.001f);
  }
}

Two-dimensional tween with event:

Create a two dimensional tween that moves a position from 1,1 to 100,100 in 5 seconds and fires an event when finished.

#include <dbtweener.h>

// ...

class CTweenListener: public CDBTweener::IListener
{
public:
  void onTweenFinished(CDBTweener::CTween *pTween)
  {
    printf("The %s has landed !\n", pTween->getUserData());
  }
};

// ...

void main()
{
  float x = 1.0f, y = 1.0f;
  int iSleepTimeMs = 20;

  CDBTweener oTweener;
  CTweenListener oListener;
  CDBTweener::CTween *pTween = new CDBTweener::CTween();

  pTween->setEquation(&CDBTweener::TWEQ_ELASTIC, CDBTweener::TWEA_INOUT, 5.0f);
  pTween->addValue(&x, 100.0f);
  pTween->addValue(&y, 100.0f);
  pTween->setUserData("Eagle");

  oTweener.addTween(pTween);
  oTweener.addListener(&oListener);

  while (oTweener.getTweens().size())
  {
    PrintPosition(x, y);

    Sleep(iSleepTimeMs);
    oTweener.step((float)iSleepTimeMs * 0.001f);
  }

  return 1;
}

Single tween:

Create a single tween, without using the CDBTweener aggregator class.

#include <dbtweener.h>

// ...

class CTweenListener: public CDBTweener::IListener
{
public:
  void onTweenFinished(CDBTweener::CTween *pTween)
  {
    printf("The %s has landed !\n", pTween->getUserData());
  }
};

// ...

void main()
{
  float fPos = 0.0f;
  int iSleepTimeMs = 20;

  CTweenListener oListener;
  CDBTweener::CTween oTween(&CDBTweener::TWEQ_BACK, CDBTweener::TWEA_INOUT, 2.0f,
    &fPos, 1.0f);

  oTween.setUserData("Eagle");
  oTween.addListener(&oListener);

  while (!oTween.isFinished())
  {
    PrintPosition(fPos);

    Sleep(iSleepTimeMs);
    oTween.step((float)iSleepTimeMs * 0.001f);
  }
}

Download

Download the full package, including C++ console and graphics samples.