# Animators pt1, AR and ASR

Say we want to create a simple animation for an object which has to appear and disappear according to specific events.

Say, when an add event is received, the object - from beeing completely transparent - will become more and more opaque. On the other hand, when a remove event is received, the object must return to a a state of complete transparency.

If we want to deal with such animation we can modify the transparency (alpha) value of the object color. We know that alpha normally goes from 0 to 255 but, for the sake of simplicity, we can consider a normalized interval from 0.0 to 1.0.

In order to make an animation like that, we also need to know how much time the alpha value will take to go from 0.0 to 1.0 ($t_{in}$) and, on the opposite way, from 1.0 to 0.0 ($t_{out}$).

Here’s the graph representing the output value in time:

## Linear Attack / Release Animator

The Animator AR class is a class to create a linear attack/release animation.

The animation will be triggered by a single event which will cause the attack phase to fire. When this initial phase will be completed, the release phase will be automatically triggered (without the need of a event to trigger it).

Here’s the Animator_AR class:

The Animator class is used as part of the parent class Circle; inside the code note where we use the animator. Animator is used to dynamically change the circle diameter:

Finally here’s the main code is where a Circle object is used:

Here you see this exact code in an interactive example: click inside the circle below to trigger the animation!

## Linear Attack / Sustain / Release Animator

Now we want to create a different animator in order to have a sligtly more complex behaviour made of three phases: attack, sustain and release. We’ll call it Animator ASR.

Note that in this case we need two different “trigger” events, one to start the attack phase, the other to fire the release one.

Here’s the Animator_ASR class:

Like before, here’s the Circle class where we use the animator. Pay attention that now the diameter stays the same, the animator is used to change the alpha value of the color!

Here’s the main code:

Click and keep the mouse button pressed to trigger the attack phase, then release it to trigger the release phase.

Special case: What will happen if the release phase is triggered during the attack phase, when the latter isn’t completed yet? To contemplate this particular situation we have used a special algorithm inside the Animator triggerRelease method.

Here there’s an image which is more coherent with the actual animator code:

## Put the two animator together

We can also use the two animation together in order to have an attack/sustain/release animation for the alpha channel and a attack/release animation for the diameter:

Note: we have used 1+y_asr in order to have a diameter of the circle of at least diameter*(1.0 + 0.0).

There’s the main:

The interesting thing of having an Animator class taking care of all the timing stuff and having a normalized output is that we can combine animations in very different ways.

Below, for example, we have the ASR animator acting, not only on the alpha channel for the color, but also on the overall amplitude of the diameter:

Working with normalized values is a smart way of doing things because this way, anytime we want to change the Circle class, we can get rid of the Animator objects and use some other type of normalized-driver signal (a sound input for example) without change the Circle class implementeation!

## Future improvements

Now the animators are capable of creatign animations which correspond to a linear changing but what about an exponential curve animation? In future improvements we will add a more complex logic to deal with different kind of animation curves!

If you find this article useful and you like it, please leave a comment below: let us know what do you think about it, we'd really appreciate it. Thank you very much and, as always, stay tuned for more to come!