Bezier Curves

The Bezier symbol component provides multiple preset bezier curves. It's a great template for animating objects along a specific shaped curve. It comes with 4 pre-determined curve structures - straight, curved left, curved right and circle.

Creating a Bezier Curvers Symbol

A Bezier curve symbol can be added to your project by clicking on the plus icon + from the Symbol Definitions panel, and selecting the Bezier Curves component.

Using a Bezier Curves Symbol

Drag the Bezier Curves symbol into the Hierarchy from the Symbol Definitions, creating an instance of the symbol.

On first import, the Import Notes will appear giving step-by-step instructions on how the symbol can be used. The notes can be accessed again at any time by clicking on the burger menu at the top of the Hierarchy and opening Import or Modification notes.

Next, drag an object into the exposed Content Group. Then select the Bezier node and change the values of the References properties.

The Bezier Curves symbol provides 4 references properties:

Property Type Description
Type of Bezier parameter Sets the shape of the bezier.
Autoplay boolean Sets whether the animation should play automatically.
Loop boolean Sets whether the animation will loop.
Speed float Sets playback speed of the animation.

Exported Functions

The Bezier Curves symbol also has 1 exported function:

Function Description
play() starts animation
stop() stops animation
reset() resets animation

Example:

// Local variable storing the Bezier Curve node
const Bezier_Curves = symbol.nodes.Bezier_Curves;

// Calling the play function
Bezier_Curves.nodes.Script.play();

In the examples, Bezier is a placeholder variable, and should be replaced by the name of the node the function is being called on. You can create a variable for your Bezier node in a script by dragging the node into the top of the script.


Modifying the Bezier Curves Symbol

The Bezier Curves symbol can be edited to create a unique curve by following the steps below.

  1. Head into the symbol by double clicking on it in the Symbol Definitions panel.

  2. Select the TypeOfBezier controller.

  3. Select the state of the curve wanting to be changed and click back to the base controller.

  4. Select the matching bezier node in the Hierarchy and edit the points properties to create a new unique personalised curve.

More information on editing a bezier curve can be found here: Bezier Curves.

zapcode branded_zapcode i