Caph Class: Timeline

new Timeline(seekInterval)

A class which defines the animation details.

Parameters:

Name	Type	Argument	Description
`seekInterval`	Number	<optional>	A millisecond indicates the interval of timeline to seek the specific position. Default value is 500ms.

Since:

2.0.0

Example

var timeline = new caph.animation.Timeline();
 
 timeline.add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 });
 
 timeline.add({
     transition: caph.animation.transition.rotateZ(45), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut, 
     delay: 500, 
     opacity: caph.animation.transition.opacity(1, 0), 
     callback: function() {
         console.log("rotate45 done")
     }
 });
 
 timeline.add({
     transition: caph.animation.transition.scale(1.5, 1.5, 1), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut, 
     delay: 500, 
     opacity: caph.animation.transition.opacity(0, 1)
 });

Methods

add(animation) → {caph.animation.Timeline}

Adds the animation details to the timeline.

Parameters:

Name Type Description

animation

Object

An animation to add to the timeline. All options are optional.

Details
{Function} transition	Specifies the transition effect. This function returns a function which is passed a current time argument and returns a corresponding 4x4 matrix for that time. The "caph.animation.transition" provides frequently used transitions such as move, scale and rotate.
{Function\|Array} ease	Specifies the speed curve of the transition effect. A function which is passed a current time argument and returns a time which is affected by that curve. The "caph.animation.ease" provides frequently used curves such as ease-in, ease-out, ease-in-out and so on. It returns an array which consists of two items. The first index of array is the representation of curve and the second index of array is timing function. Default value is "caph.animation.ease.linear".
{Number\|Function} opacity	An integer indicates the opacity. This option also can be a function which is passed a current time argument and returns a opacity for that time. This value is from 0 to 1. The "caph.animation.transition" provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out.
{Number} delay	A millisecond indicates when the effect will start. Default value is 0.
{Number} duration	A millisecond Indicates how many times an effect takes to complete. Default value is 0.
{Function} callback	A function which is called when the given animation ends.
{Boolean} asyncCallback	A boolean indicating whether callback is asynchronous or not. Default value is false.
{Boolean} multiply	A boolean indicating whether transition is multiplied or not. If true, next transition is started from previous transition status. Default value is true.

Since:

2.0.0

Returns:

Type: caph.animation.Timeline

Example

new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 });

clear() → {caph.animation.Timeline}

Clears the entire added animations.

Since:

2.0.0

Returns:

Type: caph.animation.Timeline

Example

new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }).clear();

getSeekInterval() → {Number}

Gets the interval of timeline to seek the specific position.

Since:

2.0.0

Returns:

A millisecond indicates the interval of timeline to seek the specific position.

Type: Number

Example

var seekInterval = new caph.animation.Timeline().getSeekInterval();

getStartTime() → {Number}

Gets the start time of timeline.

Since:

2.0.0

Returns:

A millisecond indicates the start time of timeline.

Type: Number

Example

var startTime = new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }).getStartTime();

getTotalDuration() → {Number}

Gets the total duration of timeline.

Since:

2.0.0

Returns:

A millisecond indicates the total duration of timeline.

Type: Number

Example

var totalDuration = new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }).getTotalDuration();

seek(time) → {Object}

Seeks the animation status in the specified time.

Parameters:

Name	Type	Description
`time`	Number	A millisecond to seek the animation status.

Since:

2.0.0

Returns:

The animation status in the given time.

Details
{caph.math.Matrix4} matrix	The current animation matrix.
{Number} opacity	The current opacity.
{Number} progress	The progression rate. This value is from 0 to 1.

Type: Object

Example

var status = new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }).seek(200);

setSeekInterval(seekInterval) → {caph.animation.Timeline}

Sets the interval of timeline to seek the specific position.

Parameters:

Name	Type	Description
`seekInterval`	Number	A millisecond indicates the interval of timeline to seek the specific position.

Since:

2.0.0

Returns:

Type: caph.animation.Timeline

Example

new caph.animation.Timeline().setSeekInterval(100);

setStartTime(time) → {caph.animation.Timeline}

Sets the start time of timeline.

Parameters:

Name	Type	Description
`time`	Number	A millisecond indicates the start time of timeline.

Since:

2.0.0

Returns:

Type: caph.animation.Timeline

Example

new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 10, 0), 
     duration: 500, 
     ease: caph.animation.ease.easeInOut
 }).setStartTime(100);