Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

Recorder base object animation

The first animation we will apply is the base object (zoom) animation for the recorder. We want to give the recorder a pulse effect by playing the audio.

Loading scene Module

We need to load the scene module so that we can access the base object of the recorder in the scene.

The following code loads the scene module and stores it in a variable so that it can be used later to access objects in the scene.

Script code

 const Scene = require('Scene');
Copy the code

The require() method tells the script that we are looking for a module, and we pass in the name of the module as an argument to specify which module we want to load.

The Scene variable now contains references to the Scene module and can be used to access the module’s properties, methods, classes, and enumerations.

Accessing base objects

Before we can access the underlying object in the script, we need to know what it is called in the scene panel.

Expand the boombox_animated object by clicking the arrow to display the full object tree in the scene panel.

The base of the boombox is represented by a base_jnt object. This base object, and the speakers underneath it, are simply transformed in the 3D model.

With the name of the scene object known, we can now use it in our script to access it.

The following code finds the Base_jnt object in the scene and stores it in a variable that we will use later to animate.

Script code

 Scene.root.findFirst('base_jnt')
          .then(function(base) {});
Copy the code

The root property of the Scene module allows us to access the root of the Scene Panel tree, and the findFirst() method of SceneObjectBase (returned by the root property) allows us to search for objects in the tree.

The found object base is returned in the Promise callback.

Script code

 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
          .then(function(base) {});
Copy the code

Loading the animation module

We need to load the animation module so that we can animate the base objects and speakers in the scene.

This module loads in the same way as the scene module, replacing the word ‘scene’ with ‘Animation’.

Script code

Add the code to load the animation module in the line above the scene module:

 const Animation = require('Animation');
 const Scene = require('Scene'); // Existing code
Copy the code

The complete code is as follows

 const Animation = require('Animation');
 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
          .then(function(base) {});
Copy the code

Create base animation

Creating an animation in Spark AR Studio consists of three steps:

  1. Create a driver.
  2. Create a sampler.
  3. Combine driver and sampler to create animation.

Create a drive

There are two types of drives in Spark AR Studio:

  • Time drive (Time driverAllows you to specify a value in milliseconds for an animationThe duration of theAnd used forcycleandThe mirrorIs an optional parameter.
  • Value driver (Value driver) — allows you to specify oneScalarSignal, its value will control the animation stage to a given minimum and maximum.

For the animations in this project, we will use the time drive.

The following code creates a time drive with a pre-created set of parameters:

Script code

const baseDriverParameters = {
   durationMilliseconds: 400.loopCount: Infinity.mirror: true
 };

 const baseDriver = Animation.timeDriver(baseDriverParameters);
Copy the code

The baseDriverParameters object specifies:

  • DurationMilliseconds – The animation will last 0.4 seconds.
  • LoopCount — Animation will loop indefinitely.
  • Mirror – When an animation completes a loop, the animation returns to its original value.

Then use the timeDriver() method of the Animation Module to create a time drive with these parameters.

The time drive also needs instructions to start.

Create the time drive as follows

Script code

const baseDriver = Animation.timeDriver(baseDriverParameters); // Existing code
 baseDriver.start();
Copy the code

Starting the drive at this point in the script has no effect until we create the animation later, so for now we just keep the drive code together.

Script code

const Animation = require('Animation');
 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
  .then(function(base) {
    const baseDriverParameters = {
        durationMilliseconds: 400.loopCount: Infinity.mirror: true
    };

    const baseDriver = Animation.timeDriver(baseDriverParameters);
    baseDriver.start();
 });
Copy the code

Creating a sampler

The sampler allows you to change the rate of change by specifying the start and end values of the animation, as well as the easing function applied to it.

The following code creates a sampler.

Script code

const baseSampler = Animation.samplers.easeInQuint(0.9.1);
Copy the code

The sampler property of the animation module gives us access to the SamplerFactory class, which we use to set easing through the easeInQuint() method. We pass 0.9 and 1 to this method to specify the start and end values of the animation.

Script code

const Animation = require('Animation');
 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
  .then(function(base) {
    const baseDriverParameters = {
        durationMilliseconds: 400.loopCount: Infinity.mirror: true
    };

    const baseDriver = Animation.timeDriver(baseDriverParameters);
    baseDriver.start();
    const baseSampler = Animation.samplers.easeInQuint(0.9.1);
 });
Copy the code

Create the animation

Animation is a combination of a driver and a sampler.

Script code

const baseAnimation = Animation.animate(baseDriver,baseSampler);
Copy the code

The animation module’s animate() method returns a ScalarSignal that changes between 0.9 and 1 every 0.4 seconds, depending on the easing function used.

Script code

const Animation = require('Animation');
 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
  .then(function(base) {
    const baseDriverParameters = {
        durationMilliseconds: 400.loopCount: Infinity.mirror: true
    };

    const baseDriver = Animation.timeDriver(baseDriverParameters);
    baseDriver.start();
    const baseSampler = Animation.samplers.easeInQuint(0.9.1);
    const baseAnimation = Animation.animate(baseDriver,baseSampler);
 });
Copy the code

With the animation created, we can now apply it to the base object of the Boombox, and we’ll use it to change the scale.

The base object of the recorder simply represents the entire 3D model. Applying animation to the underlying object means that we are animating the entire object.

Get the fundamental transformation

To access the basic scaling, we first need to access the Transform. Transformations represent transformations (position, scale, and rotation) of an object in its local coordinate system.

Script code

const baseTransform = base.transform;
Copy the code

The Transform property of the SceneObjectBase class, of which the base object is an instance, returns a TransformSignal.

The binding of animation

By accessing the underlying transformation, we can now animate the model by binding the animation to its scale property.

Script code

baseTransform.scaleX = baseAnimation;
 baseTransform.scaleY = baseAnimation;
 baseTransform.scaleZ = baseAnimation;
Copy the code

The scaleX/Y/Z() method of TransformSignal allows us to bind the baseAnimation ScalarSignal of the animation output to the scale of the base object.

Script code

const Animation = require('Animation');
 const Scene = require('Scene');
 Scene.root.findFirst('base_jnt')
  .then(function(base) {
    const baseDriverParameters = {
        durationMilliseconds: 400.loopCount: Infinity.mirror: true
    };

    const baseDriver = Animation.timeDriver(baseDriverParameters);
    baseDriver.start();
          
    const baseSampler = Animation.samplers.easeInQuint(0.9.1);
    const baseAnimation = Animation.animate(baseDriver, baseSampler);
    
    baseTransform.scaleX = baseAnimation;
    baseTransform.scaleY = baseAnimation;
    baseTransform.scaleZ = baseAnimation;      
 });
Copy the code

Save the script and return to Spark AR Studio

The recorder model will now be animated in the scene.