AnimationPlayerTimeline

API Reference

Properties

• timeline.id
• timeline.startTime
• timeline.endTime
• timeline.duration

Methods

• timeline.addElement
• timeline.removeElement
• timeline.removeAllElements
• timeline.getElement
• timeline.getAllElements
• timeline.update

Properties

# (readonly) timeline.id

A unique identifier of a timeline

Default value: Auto generated integer Type: number

# (readonly) timeline.startTime

A point in time where first element of the timeline should be mounted

Default value: 0
Type: number

# (readonly) timeline.endTime

A point in time where last element of the timeline should be unmounted

Default value: 0
Type: number

# (readonly) timeline.duration

The range between mount time of the first element and unmount time of the last element on the timeline

Default value: 0
Type: number

Methods

# timeline.addElement(element)

Add AnimationPlayerElement to the timeline

Parameters

element (required) - AnimationPlayerElement

Typings

addElement(eleemnt: AnimationPlayerElement): void

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);

console.log(timeline.id); // 1
console.log(timeline.startTime); // 1000 ms
console.log(timeline.endTime); // 2000 ms
console.log(timeline.duration); // 3000 ms

# timeline.removeElement(id)

Remove AnimationPleyerElement from the timeline by id

Parameters

id (required) - The id of the AnimationPlayerElement

Typings

removeElement(id: number): void

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const element2 = new AnimationPlayerElement({
  mountTime: 3000,
  updateStartTime: 3000,
  updateEndTime: 4000,
  unmountTime: 4000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);
timeline.addElement(element2);

console.log(timeline.id); // 1
console.log(timeline.startTime); // 1000 ms
console.log(timeline.endTime); // 4000 ms
console.log(timeline.duration); // 3000 ms

timeline.removeElement(element.id);

console.log(timeline.id); // 1
console.log(timeline.startTime); // 3000 ms
console.log(timeline.endTime); // 4000 ms
console.log(timeline.duration); // 1000 ms

# timeline.removeAllElements()

Delete all elements from the timeline

Typings

removeAllElements(): void

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const element2 = new AnimationPlayerElement({
  mountTime: 3000,
  updateStartTime: 3000,
  updateEndTime: 4000,
  unmountTime: 4000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);
timeline.addElement(element2);

console.log(timeline.id); // 1
console.log(timeline.startTime); // 1000 ms
console.log(timeline.endTime); // 4000 ms
console.log(timeline.duration); // 3000 ms

timeline.removeAllElements();

console.log(timeline.id); // 1
console.log(timeline.startTime); // 0 ms
console.log(timeline.endTime); // 0 ms
console.log(timeline.duration); // 0 ms

# timeline.getElement(id)

Get the element from the timeline by element id

Parameters

id (required) - The id of the AnimationPlayerElement

Typings

getElement(id: number): AnimationPlayer | undefined

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);

console.log(timeline.getElement(element.id)); // AnimationPlayerElement
console.log(timeline.getElement(2)); // undefined

# timeline.getAllElements()

Return the list of all element of the timeline

Typings

getAllElements(): AnimationPlayerElement[]

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const element2 = new AnimationPlayerElement({
  mountTime: 3000,
  updateStartTime: 3000,
  updateEndTime: 4000,
  unmountTime: 4000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);
timeline.addElement(element2);

console.log(timeline.getAllElements()); // [AnimationPlayerElement, AnimationPlayerElement] 

# timeline.update(elapsedTime)

Update elements of the timeline

Parameters

elapsedTime (required) - The number that represent how much time has passed (in ms).

Typings

update(elapsedTime: number): void

Example

const element = new AnimationPlayerElement({
  mountTime: 1000,
  updateStartTime: 1000,
  updateEndTime: 2000,
  unmountTime: 2000,
});

const element2 = new AnimationPlayerElement({
  mountTime: 3000,
  updateStartTime: 3000,
  updateEndTime: 4000,
  unmountTime: 4000,
});

const timeline = new AnimationPlayerTimeline();

timeline.addElement(element);
timeline.addElement(element2);

timeline.update(500);
timeline.update(1000); // element onMount, onUpdate
timeline.update(1500); // element onUpdate
timeline.update(2000); // element onUnmount
timeline.update(2500);
timeline.update(3000); // element2 onMount, onUpdate
timeline.update(3500); // element2 onUpdate
timeline.update(4000); // element2 onUnmount