Developer

Appearance

Animations

Control animations on geometries in the rooomSpaces Viewer API — play, pause, stop, and configure looping and speed.

getAnimations ​

getAnimations(geometryId: string, callback: Function)

Returns the list of animations available for a geometry. Use the returned index values as animationId in the other animation methods.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
api.getAnimations(geometryId, function(animations) {
  // animations: [{ name: 'Idle', speedRatio: 1 }, { name: 'Walk', speedRatio: 1 }]
  // Use index 0 for 'Idle', 1 for 'Walk', etc.
  console.log(animations);
});

playAnimation ​

playAnimation(geometryId: string, animationId: number, [callback: Function])

Plays the animation at the given index for a geometry. Get the animationId index from getAnimations.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
// Play the first animation (index 0)
api.playAnimation(geometryId, 0, function() {
  console.log('Animation playing');
});

pauseAnimation ​

pauseAnimation(geometryId: string, animationId: number, [callback: Function])

Pauses the animation at the given index. Get the animationId index from getAnimations.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
api.pauseAnimation(geometryId, 0, function() {
  console.log('Animation paused');
});

stopAnimation ​

stopAnimation(geometryId: string, animationId: number, [callback: Function])

Stops the animation at the given index. Get the animationId index from getAnimations.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
api.stopAnimation(geometryId, 0, function() {
  console.log('Animation stopped');
});

stopAnimations ​

stopAnimations(geometryId: string, callback: Function)

Stops all the animations.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
api.stopAnimations(geometryId, function(){
  console.log('All animations stopped');
});

setAnimationCycleMode ​

setAnimationCycleMode(geometryId: string, animationId: number, mode: 'loop' | 'once', [callback: Function])

Sets the playback mode for an animation. The default is once. Get the animationId index from getAnimations.

The geometryId is the ID of the geometry, which can be found via getGeometries.

js
// Loop the first animation indefinitely
api.setAnimationCycleMode(geometryId, 0, 'loop', function() {
  console.log('Animation cycle mode set');
});

setAnimationSpeed ​

setAnimationSpeed(geometryId: string, speed: number, callback: Function)

Sets the global animation speed.

The geometryId is the ID of the geometry, which can be found via getGeometries.

speed is a speed factor (a number, default is 1). A negative value will play the animation in reverse.

js
api.setAnimationSpeed(geometryId, 1.5, function(){
  console.log('Animation speed changed');
});