Class

Player

An object that provides essential playback control capabilities for a Timeline.

The easiest way to control animations is through an instance of a Player. You may subclass or extend this class to achieve greater functionality and control over animations and Timelines.

Declaration

class Player

Overview

A Player object is a convenient way to control playback of animations exported from Flow.

Properties

timeline

An instance of a Timeline exported from Flow.

var t = player.timeline;

player.timeline = newTimeline;

currentTime

A Number representing the current playback time of a Timeline in milliseconds.

let t = player.currentTime

player.currentTime = 500

duration (get)

A Number representing the length of a Timeline in milliseconds.

var d = player.duration

timer

An HTMLElement used to track the playback time for the current timeline.

Each player should have its own unique timer element. You should never have to interact directly with the timer element.

loop

A Bool that tracks whether or not the player will restart the current animation after completion.

player.loop = true;

delay

A Number representing the amount of time in milliseconds to delay the start of playback for a Timeline.

You should never interact with this property. If you want to change the delay of a player, simply re-construct one with a new delay variable.

callback

A () -> Void block that gets executed upon completion of a Timeline.

You should never interact with this property. If you want to change the callback of a player, simply re-construct one with a new callback variable.

If you do change this manually, you must also call player.setOnFinishCallback() to ensure that the new callback will be used upon playback completion of the Timeline.

Constructor

Creates a new instance of a Player object.

constructor(timeline, timer, loop, delay, callback)

Parameters

timeline – A custom class that represents a timeline exported from Flow.

timer (HTMLElement) – The HTML Element used to track the playback time for the player.

loop (Boolean) – A flag for restarting playback of a Timeline upon completion.

delay (Number) – The amount of time, in milliseconds before initiating playback of a Timeline.

callback (() -> Void) – A function that runs upon playback completion of a Timeline.

Methods

play()

Initiates playback of a timeline at the currentTime, if the timeline is not null and isPlaying is false.

player.play()

Here’s how it works:

play() {
  if (this.timeline === null || this.isPlaying() == true) {
    return;
  }

  this.timingAnimation.play();
  for (const animation of this.animations) {
    animation.play();
  }
  for (const shape of this.timeline.allShapes) {
    var t = shape.getCurrentTime() % this.timeline.duration;
    shape.setCurrentTime(t);
    shape.unpauseAnimations();
  }
}

isPlaying()

Used to check if the player is currently running.

if (player.isPlaying()) {
  //do something
}

Here’s how it works:

isPlaying() {
  if (this.timingAnimation == null) {
    return false;
  }
  return this.timingAnimation.playState == "running";
}

pause()

Pauses playback of a timeline.

player.play()

Here is how it works:

pause() {
  if (this.timeline === null || this.timingAnimation === null) {
    return;
  }

  this.timingAnimation.pause();
  for (const animation of this.animations) {
    animation.pause();
  }
  for (const shape of this.timeline.allShapes) {
    shape.pauseAnimations();
  }
}

stop()

Pauses the animation and sets currentTime to 0.

player.stop()

Here is how it works:

stop() {
  this.shouldPlay = false;
  this.pause();
  this.currentTime = 0;
}

setOnFinishCallback()

Sets the callback function that will be run at the end of each animation, and sets up loop handling.

player.setOnFinishCallback()

Here’s how it works:

setOnFinishCallback() {
  if (this.timingAnimation == null) {
    return;
  }
  this.timingAnimation.onfinish = () => {
    if (this.loop == true) {
      this.currentTime = 0;
    } else {
      this.pause();
    }
    if (this.callback !== null) this.callback();
  };
}

static convertTimeToString()

Converts a numeric value representing time in milliseconds into a String.

Player.convertTimeToString(500)

Here’s how it works:

static convertTimeToString(milliseconds) {
  var date = new Date(null);
  date.setMilliseconds(milliseconds);
  return date.toISOString().substr(14, 8);
}