Caph

Namespace: transition

caph.animation. transition

Methods

<static> bypass() → {function}

Returns an identity matrix function.

Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.bypass()
 });

<static> fadeInOutIn(min, max) → {function}

Returns a fade-in-out-in opacity transition function.

Parameters:
Name Type Description
min Number

A minimum value of opacity.
max Number

An maximum value of opacity.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns an opacity for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     opacity: caph.animation.transition.fadeInOutIn(0, 1)
 });

<static> fadeOutInOut(min, max) → {function}

Returns a fade-out-in-out opacity transition function.

Parameters:
Name Type Description
min Number

A minimum value of opacity.
max Number

An maximum value of opacity.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns an opacity for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     opacity: caph.animation.transition.fadeOutInOut(0, 1)
 });

<static> flicker(o1, o2) → {function}

Returns a flicker opacity transition function.

Parameters:
Name Type Description
o1 Number

A start value of opacity.
o2 Number

An end value of opacity.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns an opacity for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     opacity: caph.animation.transition.flicker(0, 1)
 });

<static> move(x, y, z) → {function}

Returns a translation matrix function.

Parameters:
Name Type Description
x Number

A x-coordinate.
y Number

A y-coordinate.
z Number

A z-coordinate.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.move(100, 0, 0)
 });

<static> moveCubicBezier(x1, y1, z1, x2, y2, z2, x3, y3, z3) → {function}

Returns a cubic-bezier translation matrix function.

Parameters:
Name Type Description
x1 Number

A x-coordinate value of point 1.
y1 Number

A y-coordinate value of point 1.
z1 Number

A z-coordinate value of point 1.
x2 Number

A x-coordinate value of point 2.
y2 Number

A y-coordinate value of point 2.
z2 Number

A z-coordinate value of point 2.
x3 Number

A x-coordinate value of point 3.
y3 Number

A y-coordinate value of point 3.
z3 Number

A z-coordinate value of point 3.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.moveCubicBezier(100, 200, 0, 200, 100, 0, 200, 200, 0)
 });

<static> opacity(from, to) → {function}

Returns an opacity transition function.

Parameters:
Name Type Description
from Number

A start value of opacity.
to Number

An end value of opacity.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns an opacity for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     opacity: caph.animation.transition.opacity(1, 0)
 });

<static> rotateAxis(x, y, z, degree) → {function}

Returns an axis rotation matrix function.

Parameters:
Name Type Description
x Number

A value of x-axis.
y Number

A value of y-axis.
z Number

A value of z-axis.
degree Number

A degree to rotate.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.rotateAxis(1, 1, 0, 45)
 });

<static> rotateX(degX) → {function}

Returns a x-axis rotation matrix function.

Parameters:
Name Type Description
degX Number

A degree of x-axis.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.rotateX(45)
 });

<static> rotateXYZ(degX, degY, degZ) → {function}

Returns a rotation matrix function.

Parameters:
Name Type Description
degX Number

A degree of x-axis.
degY Number

A degree of y-axis.
degZ Number

A degree of z-axis.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.rotateXYZ(90, 0, 0)
 });

<static> rotateY(degY) → {function}

Returns a y-axis rotation matrix function.

Parameters:
Name Type Description
degY Number

A degree of y-axis.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.rotateY(45)
 });

<static> rotateZ(degZ) → {function}

Returns a z-axis rotation matrix function.

Parameters:
Name Type Description
degZ Number

A degree of z-axis.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.rotateZ(45)
 });

<static> scale(x, y, z) → {function}

Returns a scale matrix function.

Parameters:
Name Type Description
x Number

A value of x scale.
y Number

A value of y scale.
z Number

A value of z scale.
Since:
  • 2.0.0
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.scale(2, 2, 0)
 });

<static> skewXY(degX, degY) → {function}

Returns a skew matrix function along the X and Y axis.

Parameters:
Name Type Description
degX Number

A degree of x-axis.
degY Number

A degree of y-axis.
Returns:

This function is passed a current progression argument and returns a matrix for that progression point.

Type
function
Example
new caph.animation.Timeline().add({
     transition: caph.animation.transition.skewXY(30, 0)
 });