-
Notifications
You must be signed in to change notification settings - Fork 0
AnimationPlayerTimeline
- timeline.addElement
- timeline.removeElement
- timeline.removeAllElements
- timeline.getElement
- timeline.getAllElements
- timeline.update
# (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
# 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