Keyframe Patch

The Keyframe patch outputs values (Vec3) that can animate an object’s property. For example, an object’s position, scale or rotation, a light’s intensity or a material’s color.

To add the Keyframe patch to your project, right-click in the Patch Editor and select it from the menu.

Because it outputs up to 3 values, this patch is useful for creating more advanced animations without using external tools. The Keyframe patch can be connected to any yellow consumer patch to animate that property.

What are consumer patches?

The final patch in a graph will represent the property of the object in your scene that you want the graph to affect.

These patches are known as 'consumer' patches, because they consume signals created by other patches in the graph, changing the property as a result.

To create this type of patch, select the object in the Scene panel and click the arrow next to the property in the Inspector.

A yellow patch will be created:



Animation Progress

The animation's progress. 0 is the start, 1 is complete.



Animation Value

The X, Y and Z values as the animation progresses. Connect to a yellow consumer patch representing a scene object's property to animate it.

Editing the Keyframe patch

To create an animation you’ll edit the settings inside the Keyframe patch. To do this, expand the patch by clicking the symbol in the right corner:

This will show a number of settings:

Adding frames

Dragging the scrubber to the right will add more frames to the animation:

Editing the animation

In the Keyframe patch, you'll see 3 horizontal lines, or ‘curves’. Editing the horizontal curves will edit the animation. To do this, click and drag a curve:

When a keyframe is selected, you can also edit the curve by moving the yellow ‘handles’ that appear either side of the keyframe.

Each curve represents a different channel. The output will depend on the consumer patch they’re connected to. For example, if you’re changing the color of a material, they’ll represent the RGB color values - X representing Red, Y representing Green and Z representing Blue.

In the example below we’ve selected the blue curve, Z. Because the Keyframe patch is connected to a patch representing the color of a material, Z represents the blue channel. Moving the Z curve at a set keyframe changes the colour of the animation in the later frames:

Adding a keyframe

To add keyframes along these curves:

  1. Select the X, Y or Z button at the bottom of screen.
  2. Drag the yellow scrubber to the desired frame.
  3. Click the Add button at the bottom of the screen.

You can then click and drag frames to adjust where they are.

When you expand a Keyframe patch, any animation it drives will pause in the Simulator. It will play again when you close the patch.

X, Y and Z values

These values show the real-time value of each curve. Edit them to add or update keyframes. Keep in mind that:

  • If there’s no keyframe, a new keyframe will be added.
  • If there’s an existing keyframe at the exact frame in the channel you’re editing, editing the value here will update the keyframe.

X, Y and Z buttons

Select an option to highlight which of the three curves you want to manipulate, to avoid editing the wrong one.

Add, Play, Duration and Frame

  • Click the Add symbol to add a keyframe.
  • Click Play to play the animation from the current position of the yellow scrubber.
  • Edit the Duration value to change how long the animation is.
  • Frame represents the current frame position.

Returning to the Patch Editor

To go back to the Patch Editor, click Back to Main in the top of left of the screen.

Example - Animating color

In this example, the Keyframe patch animates the color of a material:

Let’s take a look at the patch graph that creates this animation:

A Loop Animation patch is connected to the Keyframe patch through its Progress output port.

The animation is created by editing values in the Keyframe patch, which we’ll take a closer look at in a moment.

Because the Keyframe patch outputs a Vec3 data type and the Base Color Texture consumer patch can only receive a Vec4, we’ve added a Pack patch set to Vector 2 between them - allowing us to add a fourth channel.

The Base Color Texture patch represents a property in a physically-based material. It sets the color of the material applied to the sphere shaped object in the scene - in this case creating a metallic effect. You could use any material with a Texture property to add color.

Now let’s take a closer look at the Keyframe patch itself:

Here we’ve created 3 keyframes and moved each of the 3 curves to a position that controls the color shown in the animation at any given frame.

In the Loop Animation patch, we set the duration of the animation in seconds and checked the box next to Mirrored to mirror the motion. In the Keyframe patch we set the number of frames.

With the Keyframe patch expanded, we can see the color of the sphere change as the animation plays through the frames we’ve set.

Example - Animating a scene object’s transformations

Below, we’ve used the Keyframe patch to animate objects in a more complex way than the Loop Animation and Transform patches allow.

With the Loop Animation patch, we can animate an object from one position to the next. In this example we’ve used the Keyframe patch to add a third position.

Let’s take a look at the patch graph that achieves this:

Loop Animation drives the animation in the scene. This patch is where we can set the duration, and mirror the animation if we want to.

The Keyframe patch is connected to 3 yellow consumer patches representing the 3D position of the 3 spheres. Between the Keyframe patch and two of these consumer patches we’ve added 2 Delay patches. The value we’ve added next to Duration in each Delay patch causes the animation of each sphere to start 0.25 seconds later than the one before it.

Inside the Keyframe patch, we’ve used the 3 curves to set the 3 positions the spheres animate between:

Was this article helpful?