# Animation Editor

## Overview

The **Animation Editor** is used for creating and editing **Keyframe**-based timeline animations, which have the file extension `.incani`. It can either be opened from the `View` drop-down Menu on the top panel of **Incari**, or by right-clicking on the Menu bar in **Incari** and clicking on **Animation Editor** from the drop-down list, or simply by double-clicking an **Animation** **Asset** in the **Asset Manager**.

The **Animation Editor** can be used to animate **Objects** in both **Scenes** and **Scene2Ds**.

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-d972209d385c988cece470c490ff89d2ba996ea4%2Fanimationeditorimage120241.png?alt=media)

What is capable of being animated depends on the **Attributes** of the **Object**. For example, a **Cube** in a **Scene** can have its `Transformation` **Attributes** and `Opacity` animated, as displayed in the image below:

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-01be92371e20c6ae6a4713dd55529faa671fdc38%2Fanimationeditorsceneexample.png?alt=media)

On the other hand, an **Ellipse** in a **Scene2D** can have additional **Attributes** animated, such as `Stroke` and `Fill`, as can be seen in the following image:

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-dd87ed16c2a91344b8d0ae1df843532d48d51ed6%2Fanimationeditorscene2dexample.png?alt=media)

## Animation Editor Window

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-1e87b568dd227905a6195f5997281c2ec6779425%2Fanimationeditorimage2.png?alt=media)

**Animation Editor** - The main window, which contains all the options to create and edit an **Animation**. The specifics of its sections are described below.

## Toolbar

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-e69dd04a2e839cbde2104c323e45a07d691a4031%2Fanimationeditorimage3.png?alt=media)

The **Toolbar** offers several options to modify an **Animation**, such as adding or deleting an **Animation** **Block**, adding or deleting a **Keyframe**, and modifying the type of interpolation used. It also provides options for a better visualization of the timeline, such as a focus on just the visible lines and a toggle for the visibility of the tangent lines. The rest of the options are for enabling the preview, playing, and controlling of the **Animation**.

## Left Panel

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-7adacd8ac44df122f31ff3f261b3761b5c650972%2Fanimation-editor-left-panel-2.png?alt=media)

The **Left Panel** shows the **Animation Blocks** with their **Transformation Attributes** and corresponding **Keyframes**, which are highlighted in blue.

A **Keyframe** consists of two parts:

* The **Keyframe** itself, which holds a value at a specific time.
* 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. The curve handles can then be adjusted to fine-tune the intermediate frames.

When a **Keyframe** is selected, its corresponding Bézier curve is shown in the **Animation Timeline**.

When the **Animation** is run, the **Left Panel** shows the evolving values of the **Transformation Attributes**.

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-b58d4a0e614e5416e5d7e3336d49513e6c2b5349%2Fanimationeditorimage4.gif?alt=media)

## Animation Timeline

![](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-16d3ce51f684bbef3972345f3df61b7937fbd6e2%2Fanimation-editor-central.png?alt=media)

The **Animation Timeline** shows a graph with the Bézier curves of the **Transformation Attributes**.

## See Also

* [**4 Methods of Animation - 1. Animation Editor**](https://docs.incari.com/incari-studio/demo-projects/4-methods-of-animation#1-animation-editor)

## External Link

* [*Bézier Curve*](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) on Wikipedia.