Animations

Pre-made animation behaviours

HDK comes with a number of useful pre-packaged animations, like AsteroidSpinning, Flapping, Hovering, Orbiting, Swing Spinning - and more. See their respective documentation for details on how to use them.

Custom animations basics

Custom animations can be created in two ways: By using the: animation or by using the Tween component. You use tween component for more control over the animation.

The following example will show you how to use the animation component.

Let's start out with the following world:

import { HNode, render, Prefab } from '@hiber3d/hdk-react';
import { Ground, Spawnpoint } from '@hiber3d/hdk-react-components';
 
const World = () => (
  <HNode>
    <Ground />
    <Spawnpoint z={-5} />
    <Prefab id="cactus_01" />
  </HNode>
);
 
render(<World />, { environment: 'midday_01' });

You add custom animations to objects by wrapping them in an Animation component. Don't forget to import the component before you use it.

import { HNode, render, Prefab, Animation } from '@hiber3d/hdk-react';
import { Ground, Spawnpoint } from '@hiber3d/hdk-react-components';
 
const World = () => (
  <HNode>
    <Ground />
    <Spawnpoint z={-5} />
    <Animation animation={{ y: [0.5, 2] }}>
      <Prefab id="cactus_01" />
    </Animation>
  </HNode>
);
 
render(<World />, { environment: 'midday_01' });

The example above will animate a cactus between Y position 0.5 and 2.

From now on, we will only show the changes you should apply to the example code.

Multiple keyframes

You can add multiple values to the array to create multiple animation keyframes:

<Animation animation={{ y: [0.5, 2, 1.5, 2] }}>
  <Prefab id="cactus_01" />
</Animation>

Combining animations

You can animate multiple transforms simultaneously:

<Animation animation={{ y: [0.5, 2], x: [-0.4, 0.4], rotY: [0, 180] }}>
  <Prefab id="cactus_01" />
</Animation>

ℹ️

The properties will be combined into one transform per step, so the above example translates to two animation steps, one {y:0.5, x:-0.4, rotY:0} followed by a {y:2, x:0.4, rotY:180}

Animatable transforms

Below is an example with all of the transform properties that can be used in an animation:

<Animation
  animation={{
    x: [0, 1],
    y: [0, 1],
    z: [0, 1],
    rotX: [0, 180],
    rotY: [0, 180],
    rotZ: [0, 180],
    scaleX: [1, 2],
    scaleY: [1, 2],
    scaleZ: [1, 2],
    scale: [1, 2], // Will animate the scale uniformly
  }}>
  <Prefab id="cactus_01" />
</Animation>

ℹ️

Rotations will always animate towards the nearest degree, so if you want to animate something in a circle, you need to specify at least three animation points, of which the first is 0 and the last is 360.

Options

The animation can be tweaked by adding options,

<Animation animation={{ y: [0.5, 2], duration: 4, easing: 'EASE_IN_OUT_ELASTIC' }}>
  <Prefab id="cactus_01" />
</Animation>

`duration`

Animation duration in seconds

Type: number
Default: 1

`easing`

Sets the animation easing curve

Type: "LINEAR" | "EASE_IN_OUT_ELASTIC" | "EASE_OUT_BACK" | "EASE_OUT_ELASTIC" | "EASE_IN_QUAD" | "EASE_OUT_QUAD" | "EASE_IN_OUT_QUAD" | "EASE_IN_CUBIC" | "EASE_OUT_CUBIC" | "EASE_IN_OUT_CUBIC" | "EASE_OUT_EXPO" | "EASE_STEP_HOLD_PREV" | "EASE_STEP_HOLD_NEXT"
Default: EASE_IN_OUT_CUBIC

`loop`

Determine the loop behavior

Type: "REVERSE" | "RESTART"
Default: REVERSE

`startAt`

Determines where the animation should start. Expressed as a fraction of the total dueation of 1.

Type: number
Default: 0

`steps`

An array of fractions that determines the timings of each keyframe. By default no steps are provided and the timing will be spread evenly across the added keyframes.

Type: number[]
Default: []

Example:

<Animation animation={{ x: [0.5, 2, 1.5], steps: [0, 0.25, 1] }}>
  <Prefab id="cactus_01" />
</Animation>

The resulting animation would animate the x axis from 0.5 to 2 for 25% of the total duration, then animate from 2 to 1.5 for the remaining 75% of the total duration.

Examples

Rotating a desk in a circle

<Animation animation={{ rotY: [0, 180, 360], loop: 'RESTART', easing: 'LINEAR' }}>
  <Prefab id="desk_01" x={3} y={2} />
</Animation>

In this example the animation component is added as a "pivot" object. We animate it as a rotation around 360 degrees. We then add the desk as a child to the pivot object and move it 3 units in the X axis, making the x={3} becoming the circle radius.

Rotating desk

Putting it all together

This example moves a tiny tree house in a square with scaling it.

<HNode scale={0.3}>
  <Animation
    animation={{
      x: [0, 0, 5, 5, 0],
      y: [0, 5, 5, 0, 0],
      scale: [1, 1, 1, 2, 1],
      duration: 3,
      loop: 'RESTART',
      easing: 'EASE_IN_OUT_ELASTIC',
    }}>
    <Prefab id="tree_house_03" />
  </Animation>
</HNode>

Moving house

Signals Sound