# 4 Methods of Animation

Animation is a key component of creating engaging UI experiences. Adding flare with motion and color can transform an HMI from something dull and lifeless into something polished and appealing. The term "animation" covers an extremely broad spectrum of disciplines and mediums. Moreover, the way that two animators approach a task may be very different while yielding similar results. In developing **Incari**, we have been very mindful of this fact and have supplied a variety of different methods for breathing life into static assets.

## See For Yourself

Using the new *Remote Projects* section of **Incari Hub**, there are now downloadable **Projects**, which you can play around with to see how certain functionality is implemented in **Incari Studio**. This **Project** focuses on the four different approaches to animation, which can all be combined together based on the **Project** requirements.

To download the **Project**, open **Incari Hub** and download the "Animations" **Project** from the *Remote Projects* section.

If you go back to the *My Projects* section, you will see that the **Project** was added to your local files. If you hover over the project thumbnail and press the ▶ (play) icon, you can preview the **Project**.

!["Animations" Project.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-806c536631362d600132e89f0c760eadfb15f1cd%2Funtitled%20\(2\)%20\(1\).png?alt=media)

Now you will see a variety of controls for each of the 4 animation methods.

1. **Animation Editor** - Spins the **Incari** logo 360°. Note that this kind of animation in **Incari** is *relative,* meaning that if you hit the X (stop) button while the **Sprite** is partially rotated, then hit play again, the logo will rotate to the same *rotation* as it was when you hit the button. These animations are achieved using a **Keyframe**-based animation.
2. **Interpolation** - This fades the opacity of the graphic. **Interpolation** is without a doubt the most programmatic way of approaching animation. It is an entirely **Node**-based method which naturally favors a more parametric way of thinking.
3. **Image Sequence** - This animates the logo itself using a pre-rendered sequence of `.png` files. This allows you to use any 3rd-party animation tool to create animations and then bring them into **Incari Studio** where you can attach functionality.
4. **Actions** - This simply moves the logo from left to right with an easing effect. **Actions** are **Node**-based. However, unlike the **Interpolation** approach, these are specifically for animation and are much more akin to tween libraries like [*TweenLite by GreenSock*](https://greensock.com/tweenlite).

If you open the project from **Incari Hub** by double-clicking it, we can begin to break down each animation method one by one.

## 1. Animation Editor

Within the **Asset Manager** there is a file called `TimelineAnimation.incani`. Files with the `.incani` file type are **Keyframe**-based timeline animations, created using the **Animation Editor**, which should open automatically when double-clicking on the **Asset**.

![Animation Block Example 1.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-40d7eaadcc6c6fa0513ee2b571ebc609aff804ed%2F2020-09-28_09h38_54.png?alt=media)

If you expand the **Animation Block** called "Logo Animation" and its **Transformation Attributes,** you will see that both the `Z Position` and `Z Rotation` are highlighted in blue. This indicates that these **Attributes** have some **Keyframes** saved on this **Animation Block**.

![Animation Block Example 2.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-5c59ff040e857bb8ac60dc62c67d0bea04fa1cbc%2FUntitled%201.png?alt=media)

By selecting these **Attributes** using `Ctrl` + `LMB` and then clicking the "focus" icon highlighted above, we can see the animation, represented as *Bezier curves*.

![Bezier Curves.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-400461622c8121f8cc392a77f2325d21354377e1%2FUntitled%202.png?alt=media)

A **Keyframe** consists of two parts:

1. The **Keyframe** itself, which holds a value at a specific time.
2. The curve handles, which control the easing and interpolation between frames.

To add a **Keyframe**, simply right-click an **Attribute** and select "Add Keyframe" from the context menu. This will create a **Keyframe** at whatever time the playhead is currently on. You can then adjust the curve handles to fine-tune the intermediate frames.

![Animation Nodes.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-4fafc130b4cc3dabd4b138bd6e28ff96d298cf42%2F2020-09-28_11h50_20.png?alt=media)

If you take a look into the **Logic Editor**, you will see that controlling animations is fairly simple. When you play an animation using the **Play Animation Block Node**, an **Instance ID** is generated. This is a unique id number which **Incari** uses to identify which animation you want to stop or pause. If this sounds confusing, don't worry, just be aware that in order to use the **Stop Animation** and **Pause Animation Nodes** you must tell these **Nodes** which animation should be affected.

![Play Animation Node Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-e2641ec516e697ce33255dbc724451d24f0a6aab%2F2020-09-28_11h55_02.png?alt=media)

Another last point to note is that the **Play Animation Block Node** has an **Attribute** for both the **Asset** (`File`) and the **Animation Block** (`Name`) which will be played. You can drag the `.incani` file from the **Asset Manager** directly to the **Node** to assign it to the `File` **Attribute** and select the desired **Animation Block** from the dropdown menu.

## 2. Interpolation

**Interpolation** is a slightly more complex approach to animation. Unlike some of the other options, it is achieved with the **Logic Editor** alone, using the **Interpolate Node**. What this does is calculate the intermediate values between an initial and target value over a set amount of time.

![Interpolation Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-4d5f561e6338e7fda8cc5fffdb9cadd65e9e6b9a%2F2020-09-28_13h00_30.png?alt=media)

In the example provided in the demo, you will see that each button graphic's **On Mouse Click** event triggers a sequence of **Logic**. On all three of the buttons, both of the **Interpolate Nodes** are reset, to make sure that we don't trigger an interpolation, while one is already in progress.

The play forward and play backward buttons have a third **Pulse** that calculates the interpolation between the current and target opacity values of the logo. Here is a brief overview of the **Attributes** of the **Interpolation Node:**

`Data Type` - The numerical data type which will be interpolated.

`Duration` - The length of time between the start and end of the interpolation.

`Interval Time` - This governs how frequently, in seconds, the interpolated value is calculated and the output **Pulse** is triggered. In our example, this is set at 0.0167, which is approximately 60 fps: (`1 / 60 = ~0.0167`).

`From` - This is the value at the start of interpolation. In our example, we are using the current opacity value of our logo as a starting point.

`To` - This is the value at the end of the interpolation, which in our example, is either 1 or 0.25, depending on which button was pressed.

`Type` - This is the method that the **Interpolate Node** uses to calculate the intermediate values. These are similar to those found in many other software and programming languages. A good reference for interpolation types is [*easings.net*](https://easings.net/).

`Mode` - Whether the interpolation will be performed once, repeated, or alternated.

## 3. Image Sequence

Although **Incari's** built-in tools are powerful, there are many use cases where the desired effect cannot be achieved using **Incari** alone. In this case, it often makes more sense to create animations in dedicated animation software. Most tools, such as *Adobe After Effects*, provide an easy way of exporting an animation as an image sequence, most commonly in the `.png` file format. By using **Incari's** **Image Sequence Object** and **Nodes**, we can take these frames and combine them with **Incari's** **Logic** system.

![Image Sequence Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-8e536c10a63c77313e7aa3b9cfb0808a26a6e46f%2FUntitled%203.png?alt=media)

In the **Asset Manager** of our demo file, you will see a file called `Logo Animation.incseq`. Files of the`.incseq`type are **Image Sequences**. To open the file, simply double-click it and the **Image Sequence Editor** will open. Here you can see all of the images of the sequence arranged in order.

To create this type of file, simply right-click in the **Asset Manager** and select "Create Asset > Image Sequence". Then double-click it to open the **Image Sequence Editor,** drag the images into it directly from the **Asset Manager**, and then click the save icon to save it.

![Image Sequence Nodes Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-1f69a42f652cc5fb185b7f8df309bbf4a117f712%2FUntitled%204.png?alt=media)

Controlling **Image Sequences** from the **Logic** is fairly straightforward. If you take a look in the **Logic Editor** of the demo scene, you will see that there are three main **Nodes** for playing, pausing, and stopping the playback of the **Image Sequence**.

![Play ImageSequence Node Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-73b2cac320c8c5e04b17dde7218f3504ed0bfc49%2F2020-09-28_13h59_44.png?alt=media)

While the **Pause ImageSequence** and **Stop ImageSequence** are self-explanatory, the **Play ImageSequence Node** has quite a few **Attributes**, which we will go through now:

* `Start Frame` / `End Frame` - This is the frame index that the animation will start and finish on. Setting these to -1 will tell **Incari** to start at the first frame and end at the last frame.
* `Object` - The **Image Sequence Sprite Object**, which can be dragged from the **Scene Outliner** onto the **Node**.
* `Play Mode` - Whether the animation will be played based on frames-per-second (`FPS`) or a duration (`Time`). The value of this **Attribute** will determine which of the following **Attributes** will be visible:
  * `FPS` - The framerate of the animation. This may be preferable if the animation was exported at a specific framerate that you want to reflect in **Incari**.
  * `Time` - The amount of time the animation will take from start to finish. This is useful for tweaking the duration of the animation and can incorporate frame blending using the `Interpolation Mode` **Attribute**.
* `Interpolation Mode` - This determines whether the animation should fade between one frame and the next. `Constant` means that frames aren't blended, while `Linear` means that they are. This **Attribute** only has an effect when the `Play Mode` is set to `Time`.
* `Loop Mode` - Whether the **Image Sequence** plays once (`none`), plays repeatedly (`repeat`), or ping-pongs backwards and forwards (`alternate`).
* `Play Direction` - If the animation plays forwards or backwards.

## 4. Actions

**Actions** are a set of **Nodes** designed specifically for animation. In the **Toolbox** you will see a number of different actions which affect the transformation properties and opacity of **Objects**.

![Action Nodes.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-a3669cee210ec6df0502a4d0fe73f0a4551712a6%2F2020-09-28_14h26_25.png?alt=media)

The names of these **Nodes** offer insight into what the **Node** actually does and which **Attribute** is affected:

`Fade` = Opacity.

`Move` = Position.

`Rotate` = Rotation.

`Scale` = Scale.

Additionally, you will notice three types of actions:

`FromTo` = Both the start and end values are set manually.

`To` = Only the target value is provided.

`By` = The amount to be animated relative to the **Attribute**'s current value.

![Animation Using Actions Example.](https://2628349686-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwnv17cpjDin2deSlOz0z%2Fuploads%2Fgit-blob-ce5a3fbdc3f0cbf06490c98d0b8f1fa228edc2ab%2FUntitled%205.png?alt=media)

Looking at our example **Logic**, you will see that the logo graphic is moved to a different position depending on which button is pressed. There are also four easing types, defined in the `Interpolation` **Attribute** for sine-based and linear interpolation.