Caph

Class: Player

caph.animation. Player

new Player()

A class which plays an animation according to the added timelines.

Since:
  • 2.0.0
Example
var element1 = document.getElementById("id1");
 var element2 = document.getElementById("id2");
 var element3 = document.getElementById("id3");
 
 var player = new caph.animation.Player();
 
 player.add(element1, new caph.animation.Timeline().add({ // element1 has moving and rotating by z-axis mixed animation.
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }));
 
 player.add(element1, new caph.animation.Timeline().add({ // element1 has moving and rotating by z-axis mixed animation.
     transition: caph.animation.transition.rotateZ(45), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut 
 })); 
 
 player.add(element2, new caph.animation.Timeline().add({
     transition: caph.animation.transition.scale(1.5, 1.5, 1), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }));
 
 player.add(element3, new caph.animation.Timeline().add({
     transition: caph.animation.transition.moveCubicBezier(100, 200, 0, 200, 100, 0, 200, 200, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }));
 
 player.play();

Members

<static> FORWARD

An integer value indicates that the player plays animation forward.

Since:
  • 2.0.0
Example
new caph.animation.Player().add(document.getElementById("id1"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play(caph.animation.Player.FORWARD);

<static> INFINITE

An integer value indicates that the player repeats animation infinitely.

Since:
  • 2.0.0
Example
new caph.animation.Player().add(document.getElementById("id1"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).setRepeat(caph.animation.Player.INFINITE).play();

<static> REVERSE

An integer value indicates that the player plays animation in reverse.

Since:
  • 2.0.0
Example
new caph.animation.Player().add(document.getElementById("id1"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play(caph.animation.Player.REVERSE);

Methods

add(element, timelines) → {caph.animation.Player}

Adds the timelines to the element.

Parameters:
Name Type Description
element HTMLElement

An element to apply the given timelines.
timelines Array.<caph.animation.Timeline> | caph.animation.Timeline

An array of timeline or a timeline.
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play();

clear() → {caph.animation.Player}

Clears the added timelines.

Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
var player = new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).onfinish(function() {
     player.clear();
 }).play();

isPlaying() → {Boolean}

Determines whether the animation is playing or not.

Since:
  • 2.0.0
Returns:
Type
Boolean
Example
var player = new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play();
 
 // do something...
 
 if (player.isPlaying()) {
     player.stop();
 }

onfinish(callback) → {caph.animation.Player}

Sets the callback function which is called when the animation ends.

Parameters:
Name Type Description
callback function

The callback function to be called.
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).onfinish(function() {
     console.log('finish!');
 }).play();

play(direction) → {caph.animation.Player}

Plays the animation according to the added timelines.

Parameters:
Name Type Argument Description
direction Number <optional>

The direction can be "caph.animation.Player.FORWARD" or "caph.animation.Player.REVERSE". Default value is "caph.animation.Player.FORWARD".
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play();

resume() → {caph.animation.Player}

Resumes the animation.

Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
var player = new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play();
 
 // do something...
 
 if (player.isPlaying()) {
     player.stop();
 } else {
     player.resume();
 }

seek(progress) → {caph.animation.Player}

Seeks an animation scene in the specified progression rate.

Parameters:
Name Type Description
progress Number

The progression rate of the entire animation. This value is from 0 to 1.
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).seek(0.5);

setRepeat(repeat) → {caph.animation.Player}

Sets the animation repeat count.

Parameters:
Name Type Description
repeat Number

A number indicates how many times repeat the animation. If the repeat value is "caph.animation.Player.INFINITE", repeats infinitely.
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).setRepeat(2).play();

setSpeed(speed) → {caph.animation.Player}

Sets the animation speed.

Parameters:
Name Type Description
speed Number

A number indicates that how fast play the animation. If the speed value is 2, plays 2 times faster.
Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).setSpeed(1.5).play();

stop() → {caph.animation.Player}

Stops the animation.

Since:
  • 2.0.0
Returns:
Type
caph.animation.Player
Example
var player = new caph.animation.Player().add(document.getElementById("id"), new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 })).play();
 
 // do something...
 
 if (player.isPlaying()) {
     player.stop();
 }