AnimationKit Module Sample

AnimationKit Module Sample

This sample project ilustrates how to use the AnimationKit Module

AnimationKit Module Sample Overview

Components/

• body.html: Where the assets and entities of our sample project are set.
• App.js: Imports the Animation module, and sets new animations for each entity.

Models/

• ball.glb low-poly beach ball style model used in the sample.
• helice.glb low-poly helice used as child of the helicopter model.
• helicopter.glb low poly helicopter used in the sample.
• ufo.glb low poly UFO used in the sample.

Modules

• Animation-module

Sample Project

It is possible to either clone this full project, and or just import the AnimationKit Module into your own project.

For full information on modules visit: 8th wall Modules documentation

As seen in the app.js, you will find that this sample project gives different examples on how to use the Animation Kit Module. It doesn't cover all the module possibilities, but it is a great starting point if you haven't used it before.

Each entity is used to showcase different module functions, combinations or even in the case of the helicopter how to add other functionalities as a simple user input event.

Developing with AnimationKit Module

The AnimationKit Module gives you full control over your entities and models by simply adding it to your project, and choosing which animations you want to perform. Move, rotate or scale your 3D objects as you want with simple one line calls. You can create and combine multiple animations the way you prefer, and the module provides you with several ways to control the workflow.

Setting it up

First, remember to add the module to your project, by pressing the + next to Modules in your project cloud editor.

Then, set on the body.html an entity with an id to animate:

In the app.js, import and register the module and below it you can start creating your new animation!

Basic usage

All functions related to move, rotate and scale will set the 3D object to final values you are sending.

Before you hit .play(), you can use a next() to add more steps so as to customize your animation as you please! This example will execute the moveTo first, and next rotateTo.

Do you want to move and rotate at the same time? No problem at all. This example will move and rotate at the same time, and next scale it.:

Combine it as you prefer. You can add time() to each of the combinations before a next:

Customization

By defualt, the module will take one second to complete each group of actions, and will do it in a 'linear' fashion. You can change this values on the module parameters. Optionally, you can set the time you want it to take for each group of movements.

In here, moving and rotation from to destination will take 2 seconds. But scale, will take 7.

It is also possible to add a wait() beetween them:

Also, you can set a different easing for each group:

Controling the animation

There are several ways to control your anims.

Simply add .loop() to keep it running. This will run all the actions in order again and again.

But you can control it with a variable to which you assign the animation.

Animation Module API

Module parameters

Time: is the default duration for a method or group of chained methods of the Animation class in seconds. By default is set to one second. It affects all the Animation instances. Easing: is the default type of easing applied to each group or group of chained methods of the Animation class as a string. By default is set to 'linear', can be changed to 'easeIn' and 'easeOut'. Remember that it affects all the Animation instances. These parameters can be changed on a case basis via scripting.

Constructor

Animation class

Main class to animate an object Constructor The constructor needs an object as parameter, and can either be an object3D or string refering to the id. Examples to create a new instance with a string:

Animation Methods

Most of the Animation methods can be chained to create groups of actions and an animation flow.

Causes this animated object to tween towards the x, y and z coords in all three cases. (X, y and z are any number you may want to input)

Will tween only the coord value of the function name to the value set in the parameter.

Will scale an object on all its axis evenly to the value set in f.

These three methods set the destination of the object position, rotation or scale to the value set in a Three.js corresponding Vector3 or Euler degrees.

Causes the animation to pause and resume after the seconds set in time. The time by default is 1 second. It can be changed either in the parameter, calling .time(seconds) A .wait() cannot be used along with other methods in a same group of actions. It should be used alone, it can only be followed by .time(), next() or play()

Sets the amount of time in seconds, or duration, for the previously called Animation method or group of methods. By default, even without calling this method, the time is set to 1 second.

Parameter e sets the type of easing for the previously called Animation method or group of methods. Easing types are: 'linear', 'easeIn' and 'easeOut'. By default is set to linear.

This method is to define the group of actions that are meant to happen together in the same time and type of easing. Should be called right after the last action (or .time() and .easing() setting) to be included in the group

Calling .loop() will cause the entire Animation to run again when it finishes going through all its groups of actions, indefinitely. It is possible to call later on .loop(false). Calling .loop() without arguments will set it to true.

Animation methods for playing

The following methods allow you to control the flow of an animation instance. A good practice is to set the animation instance to a variable, so you can call programatically these methods when necessary.