AnimationModule

Example

//==============================================================================
// The following example demonstrates how to animate the properties of an object
// using drivers and samplers.
//
// Project setup:
// - Insert a plane
//==============================================================================

// Load in the required modules
const Animation = require('Animation');
const FaceTracking = require('FaceTracking');
const Scene = require('Scene');

// Enable async/await in JS [part 1]
(async function() {

  // Locate the plane in the Scene
  const [plane] = await Promise.all([
    Scene.root.findFirst('plane0')
  ]);

  //==============================================================================
  // Animate the plane's vertical scale according to mouth openness
  //==============================================================================

  // Create a reference to the mouth openness signal of a detected face
  const mouthOpenness = FaceTracking.face(0).mouth.openness;

  // Create a value driver using the mouth openness with the output normalized and
  // clamped between 0.1 and 0.6
  const mouthOpennessDriver = Animation.valueDriver(mouthOpenness, 0.1, 0.6);

  // Create a sampler with a linear change from 1 to 2
  const linearSampler = Animation.samplers.linear(1, 2);

  // Create an animation combining the driver and sampler
  const scaleAnimation = Animation.animate(mouthOpennessDriver, linearSampler);

  // Bind the scale animation signal to the y-axis scale signal of the plane
  plane.transform.scaleY = scaleAnimation;

  //==============================================================================
  // Animate the plane's horizontal position continuously
  //==============================================================================

  // Create a set of time driver parameters
  const timeDriverParameters = {
    // The duration of the driver
    durationMilliseconds: 1500,

    // The number of iterations before the driver stops
    loopCount: Infinity,

    // Should the driver 'yoyo' back and forth
    mirror: true
  };

  // Create a time driver using the parameters
  const timeDriver = Animation.timeDriver(timeDriverParameters);

  // Create a sampler with a quadratic change in and out from -5 to 5
  const quadraticSampler = Animation.samplers.easeInOutQuad(-5, 5);

  // Create an animation combining the driver and sampler
  const translationAnimation = Animation.animate(timeDriver, quadraticSampler);

  // Bind the translation animation signal to the x-axis position signal of the plane
  plane.transform.x = translationAnimation;

  // Start the time driver (unlike value drivers this needs to be done explicitly)
  timeDriver.start();

  //==============================================================================
  // Change the clip used in a scene object's playback controller
  //==============================================================================

  // This example assumes the following project set up:
  //  - A scene object, 'Object', with a playback controller attached
  //  - An imported animation clip, 'runClip'

  // Locate the scene object and the animation clip
  const [sceneObject, animClip] = await Promise.all([
      Scene.root.findFirst('Object'),
      Animation.animationClips.findFirst('runClip')
  ]);

  // Get the scene object's playback controller
  const playbackController = await sceneObject.getAnimationPlaybackController();

  // Change the playback controller's animation clip
  playbackController.setAnimationClip(animClip);

  // Set the playback controller to play
  playbackController.playing = true;

// Enable async/await in JS [part 2]
})();

Properties

(get) animationClips: AnimationClips
(set) (Not Available)

(get) playbackControllers: AnimationPlaybackControllers
(set) (Not Available)

(get) samplers: SamplerFactory
(set) (Not Available)

Methods

animate(driver: TimeDriver | ValueDriver, sampler: ScalarSampler | ArrayOfScalarSamplers | RotationSampler | ColorSampler): ScalarSignal | ArrayOfScalarSignals | QuaternionSignal | RgbaSignal

timeDriver(params?: {durationMilliseconds?: number, loopCount?: number, mirror?: false | true}): TimeDriver

valueDriver(value: ScalarSignal, min: number, max: number): ValueDriver

Classes