Class

Track

An object that provides basic capabilities for creating and referencing a sequence of animations for a single layer property in a Timeline.

You should never have to interact directly with a Track object.

Declaration

class Track

Overview

A Track object is a convenient wrapper for encapsulating and accessing a set of Animation instances.

Properties

element

The HTMLElement to the track’s animations will be applied.

property

A String representing the name of the animatable css property that will be animated. Some basic examples are:

backgroundColor
offset
opacity

values

An array of String objects representing the values that the property will be at specific times.

timingFunctions

An array of String objects representing the timing functions that will be used to calculate the appearance of element at specific times.

times

A list of pairs of times representing the starting and ending times of each animation in the track.

animations

A list of animations belonging to the current Track object.

Constructor

Creates a new instance of a Flow Track object.

constructor(property, values, timingFunctions, times, element)

Parameters

property (String) – The property of the HTML Element to animate.

values (String) – A liszt of values that the property will animate through over time.

timingFunctions ([String]) – A list of timing functions to calculate the appearance of the element.

times ([String]) – A list of pairs of times for coordinating the animations for a track.

element (HTMLElement) - The HTML Element to animate.

Methods

createAllAnimations()

This method constructs all the Animation objects for a single property of the element being animated.

createAllAnimations() {
  let animations = [];
  for (const [index, timingFunction] of this.timingFunctions.entries()) {
      let from = this.values[index];
      let to = this.values[index + 1];
      let startTime = this.times[index];
      let endTime = this.times[index + 1];
      let id = `${this.element}${this.property}${index}`
    animations.push(
      new Animation(this.element, this.property, from, to, id, startTime, endTime, timingFunction)
    );
  }
  return animations;
}

Returns an array of Animation objects for a single property in the element being animated.