0.8
Animations

This chapter discusses how to to use animations.

Animation Classes

EGT provides a variety of classes for working with animations. The Animation, AnimationSequence, AutoAnimation, and PropertyAnimatorType classes all provide ways to animate almost anything.

On top of these base animation classes, there are also higher order classes such as Sprite that provide a built in way to animate sprite sheets and even different strips within the same sheet. A benefit of having EGT do this is it can use hardware accelerated composition to animate the Sprite when available.

There are a couple basic concepts to know when working with animations in EGT. An animation, in its most basic form, is some computed value in some range over some period of time.

Easing Curve Graph

Of course the interesting question is how is that value computed over a specified timeframe? The most straightforward answer is just linearly. The min value is at the starting time and the max value is at ending time, and every value inbetween is evenly spread out. However, more complex versions of this are necessary to add some life and diversity to animations, which leads to the idea of easing functions. Easing functions define what that value should be, linear or otherwise.

Predefined Easing Functions

There are quite a few predefined Animation Easing Functions in EGT, but it is also possible to define your own. When creating any animation, you can pass a custom easing function or select one of the predefined ones.

All easing functions take a percent time, and return a percent value. They have a very simple API, but what happens inside the easing function can be anywhere from a simple linear value to a complex mathematical curve. For example, the simplest of easing functions is the easing_linear() function that is implemented like this:

Linear Easing Curve

A more complicated easing function might include a circular calculation:

{
return 1 - std::sqrt(1 - (p * p));
}

Circular Easein Easing Curve

The examples/easing/ directory contains an example that allows you to visually select and see some of the different easing functions and how they work.

See also
easings.net has more information about other easing functions.

Animating Widgets

For example, to shrink a button width with a custom easing function, it might involve doing the following:

Button button("hello world");
win.add(button);
PropertyAnimator shrink(100, 10, std::chrono::seconds(1), easing_boing);
shrink_in.on_change(std::bind(&Button::set_width, std::ref(button),
std::placeholders::_1));
shrink.start();
egt::v1::Widget::set_width
void set_width(default_dim_type w)
Change the width.
Definition: widget.h:241
egt::v1::PropertyAnimator
PropertyAnimatorType< int > PropertyAnimator
Helper type.
Definition: animation.h:614
egt::v1::easing_circular_easein
float_t easing_circular_easein(float_t p)
<style>div.image img[src="circular_easein.png"]{width:320px;}</style>
egt::v1::float_t
float float_t
Easing function value type.
Definition: animation.h:29
egt::v1::easing_linear
float_t easing_linear(float_t p)
<style>div.image img[src="linear.png"]{width:320px;}</style>
egt::v1::easing_boing
float_t easing_boing(float_t p)
<style>div.image img[src="boing.png"]{width:320px;}</style>