Skip to content

AnimationPlayer

Jump to bottom
Roman Mahotskyi edited this page Nov 13, 2019 · 16 revisions

API Reference

Properties

Methods

Properties

# player.defaultSpeed

The initial value of playback speed.

Default value: 1
Type: number

# player.speed

Current animation playback speed

Default value: 1
Type: number

# player.speedScale

The step of speed scaling

Default value: 1.1
Type: number

# player.maxSpeed

The top speed boundary

Default value: 1
Type: number

# player.minSpeed

The bottom speed boundary

Default value: 0.1
Type: number

# (readonly) player.startTime

Time point when animation should start. Should always be 0.

Default value: 0
Type: number

# (readonly) player.endTime

Time point which refers to the unmountTime of the last element on the timeline.

Default value: 0
Type: number

Methods

# player.play()

Start the animation player

Typings

play(): void

Example

const player = new AnimationPlayer();

player.play();

# player.pause()

Pause the animation

Typings

play(): void

Example

const player = new AnimationPlayer();

player.play();
console.log(player.isPlaying); // true

player.pause();
console.log(player.isPlaying); // false

# player.stop()

Pause animation and move to the beginning

Typings

stop(): void

Example

const player = new AnimationPlayer();

player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

console.log(player.progress); // 0

player.play();
// 0.1 sec
console.log(player.progress); // 0.1

player.stop();
console.log(player.progress); // 0

# player.increaseSpeed()

Increase playback speed by speedScale.

If speed is equal to the maxSpeed then increaseSpeed has no effect

Typings

increaseSpeed(): void

Example

const player = new AnimationPlayer();

// Set the new max speed boundary
player.maxSpeed = 2;

console.log(player.speed); // 1
console.log(player.speedScale); // 1.1

player.increaseSpeed();
console.log(player.speed); // 1.1

player.increaseSpeed();
console.log(player.speed); // 1.2100000000000002

# player.decreaseSpeed()

Increase playback speed by speedScale.

If speed is equal to the minSpeed then decreaseSpeed has no effect

Typings

decreaseSpeed(): void

Example

const player = new AnimationPlayer();

console.log(player.speed); // 1
console.log(player.speedScale); // 1.1

player.decreaseSpeed();
console.log(player.speed); // 0.9090909090909091

player.decreaseSpeed();
console.log(player.speed); // 0.8264462809917354

# player.resetSpeed()

Reset speed to the initial value

Typings

resetSpeed(): void

Example

const player = new AnimationPlayer();

console.log(player.speed); // 1
console.log(player.speedScale); // 1.1
console.log(player.defaultSpeed); // 1

player.decreaseSpeed();
console.log(player.speed); // 0.9090909090909091

player.decreaseSpeed();
console.log(player.speed); // 0.8264462809917354

player.resetSpeed();
console.log(player.speed); // 1

# player.from(elapsedTime[, isNormalized])

Rewinds the player to a specific point on the timeline.

If you call this method during animation the scene will be paused

Parameters

elapsedTime (required) - The time passed from the beginning of the animation. Either [0, 1] or [player.startTime, player.endTime]. By default it accepts [0, 1].
isNormalized (optional) - If the value is set to true than elapsedTime should be in range between [0, 1], otherwise elapsedTime is a value between player.startTime and player.endTime. By default isNormalized is set to true.

Typings

from(elapsedTime: number, isNormalized: boolean = true): void

Example

const player = new AnimationPlayer();

player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

console.log(player.progress); // 0

player.from(0.3);
console.log(player.progress); // 0.3
console.log(player.elapsedTime); // 300 ms

player.from(600, false);
console.log(player.progress); // 0.6
console.log(player.elapsedTime); // 600 ms

# player.createTimeline()

Create and add a new timeline to the player.

In most cases you don't need to create additional timeline.

Typings

createTimeline(): number

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

# player.removeTimeline(id)

Remove timeline and elements of this timeline from the player

Parameters

id (optional) - Parameter desc goes here

Typings

removeTimeline(id?: number): void

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

// By default createElement creates AnimationPlayerElement and add this element to the default timeline 
player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

// Create AnimationPlayerElement on the different timeline by providing timelindId
player.createElement({ mountTime: 2000, updateStartTime: 2000, updateEndTime: 3000, unmountTime: 3000 }, timelineId);

console.log(player.duration); // 3000

// Remove specific timeline and all related elements
player.removeTimeline(timelineId);

console.log(player.duration); // 2000

# player.removeAllTimelines()

Remove all timelines from the player

Typings

removeAllTimelines(): void

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

// By default createElement creates AnimationPlayerElement and add this element to the default timeline 
player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

// Create AnimationPlayerElement on the different timeline by providing timelindId
player.createElement({ mountTime: 2000, updateStartTime: 2000, updateEndTime: 3000, unmountTime: 3000 }, timelineId);

console.log(player.duration); // 3000

// Remove all timelines and their elements
player.removeAllTimelines();

console.log(player.duration); // 0

# player.clearTimeline(id)

Remove all elements from the timeline

If parameter is not specified then removes elements from the default timeline

Parameters

id (optional) - The id of a timeline

Typings

clearTimeline(id?: number): void

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

// By default createElement creates AnimationPlayerElement and add this element to the default timeline 
player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

// Create AnimationPlayerElement on the different timeline by providing timelindId
player.createElement({ mountTime: 2000, updateStartTime: 2000, updateEndTime: 3000, unmountTime: 3000 }, timelineId);

console.log(player.duration); // 3000

// If timeline id is not provided then it removes default timeline
player.clearTimeline();
console.log(player.duration); // 3000

player.clearTimeline(timelineId);
console.log(player.duration); // 0

// Add an element to the specific timeline
player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 500, unmountTime: 500 }, timelineId);
console.log(player.duration); // 500

# player.createElement(elementConfig[, timelineId])

Create and add element to the timeline

By default it adds element to the default timeline

Parameters

elementConfig (required) - An object which describes lifetime of the element. (mountTime - A point in the time when element should be added to the scene, updateStartTime - The point in the time when element should start to receive updates, updateEndTime - A point in the time when element should stop receiving updates. unmountTime - A point in the time when element should be removed from the scene)
timelineId (optional) - Id of a timeline

Typings

createElement(eleemntConfig: ElementConfig, timelineId?: number): AnimationPlayerElement

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

// By default createElement creates AnimationPlayerElement and add this element to the default timeline 
player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

// Create AnimationPlayerElement on the different timeline by providing timelindId
player.createElement({ mountTime: 2000, updateStartTime: 2000, updateEndTime: 3000, unmountTime: 3000 }, timelineId);

console.log(player.duration); // 3000

# player.addElement(element[, timelineId])

Add AnimationPlayerElement to the timeline

By default it adds element to the default timeline

Parameters

element (required) - Parameter desc goes here timelineId (optional) - Parameter desc goes here

Typings

addElement(element: AnimationPlayerElement, timelineId?: number): void

Example

const player = new AnimationPlayer();

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

player.addElement(element);

# player.removeElement(id[, timelineId])

Remove particular element from the timeline by element id

By default removes element from the default timeline

Parameters

id (required) - Id of the AnimationPlayerElement timelineId (optional) - Id of the AnimationPlayerTimeline

Typings

removeElement(id: number, timelineId?: number): void

Example

const player = new AnimationPlayer();

const timelineId = player.createTimeline();
console.log(timelineId); // 2

// By default createElement creates AnimationPlayerElement and add this element to the default timeline 
const element1 = player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });
const element2 = player.createElement({ mountTime: 0, updateStartTime: 0, updateEndTime: 4000, unmountTime: 4000 });

// Create AnimationPlayerElement on the different timeline by providing timelindId
const element3 = player.createElement({ mountTime: 2000, updateStartTime: 2000, updateEndTime: 3000, unmountTime: 3000 }, timelineId);

console.log(player.duration); // 4000

player.removeElement(element2.id);
console.log(player.duration); // 3000

player.removeElement(element3.id, timelineId);
console.log(player.duration); // 1000

player.removeElement(element1.id);
console.log(player.duration); // 0

# player.onPlay(callback)

Register callback that will be called after player starts to play

Parameters

callback (required) - A callback function that will be called on player start

Typings

onPlay(() => void): void

Example

const player = new AnimationPlayer();

player.createElement({ mountStart: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

player.onPlay(() => {
  console.log('On play!');
});

player.play(); // trigger onPlay callback, if it was registered

# player.onPause(callback)

Register callback that will be called on player pause

Parameters

callback (required) - A callback function that will be called on player pause

Typings

onPause(() => void): void

Example

const player = new AnimationPlayer();

player.createElement({ mountStart: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

player.onPause(() => {
  console.log('On pause!');
});

player.play();

player.pause(); // trigger onPause callback, if it was registered

# player.onStop(callback)

Register callback that will be called on player stop

Parameters

callback (required) - A callback function that will be called on player stop

Typings

onStop(() => void): void

Example

const player = new AnimationPlayer();

player.createElement({ mountStart: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

player.onStop(() => {
  console.log('On stop!');
});

player.play();

player.pause(); // trigger onPause callback, if it was registered

# player.onFinish(callback)

Register callback that will be called when animation player rich the end of the animation

Parameters

callback (required) - A callback function that will be called when animation player rich the end of the animation

Typings

onFinish(() => void): void

Example

const player = new AnimationPlayer();

player.createElement({ mountStart: 0, updateStartTime: 0, updateEndTime: 1000, unmountTime: 1000 });

// Triggers when player animation rich the end of the animation
player.onFinish(() => {
  console.log('On finish!');
});

player.play();
// wait to the end of the animation

# player.updateTimings()

Is a helper function that updates timing of the player. This function should never been called manually. Typings

updateTimings(): void

# player.update()

The update method should be used within requestAnimationFrame to update animation. If you not register this function the animation player will not work.

Typings

update(): void

Example

const player = new AnimationPlayer();

updateRAF();

function updateRAF() {
  requestAnimationFrame(() => {
    player.update();

    updateRAF();
  });
}

Animation Player

API

Clone this wiki locally