Back to Demos

This demo shows how you play an existing animation clip.

Queue Clip

Controls

Clara.io demo resources:

Visit Base Scene


var sceneId = 'ec1a8d12-0e4b-4a4b-9747-89ea5cb5e1f8';
var api = claraplayer('player');

api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {
  var anims = api.animation.getClips();
  for(var i = 0; i < anims.length; i++) {
    var button = document.createElement('button');
    button.innerText = anims[i].name;
    button.onclick = onClick(i,anims[i]);
    document.getElementById('animation').appendChild(button);
    api.animation.queueClip(anims[i].id, {
        playSpeed: 1,
        autoplay: false,
      }
    )
  }

  document.getElementById('stop').onclick = function(ev) {return api.animation.stopPlaying();};
  document.getElementById('start').onclick = function(ev) {return api.animation.startPlaying();};
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

function onClick(i,anims) {
  return function(ev) {
    return api.animation.queueClip(anims.id, {
      onEnd: function() {
        console.log('done!');
      },
      playSpeed: 1,
      autoplay: true
    }
  )};
}