Shellfish

Class: NumberAnimation

html.NumberAnimation

Class representing a number animation along an easing curve interpolated between two values.

Valid values for the easing function are:

  • Linear
  • InSine
  • OutSine
  • InOutSine
  • InQuad
  • OutQuad
  • InOutQuad
  • InCubic
  • OutCubic
  • InOutCubic
  • InQuart
  • OutQuart
  • InOutQuart
  • InQuint
  • OutQuint
  • InOutQuint
  • InExpo
  • OutExpo
  • InOutExpo
  • InCirc
  • OutCirc
  • InOutCirc
  • InBack
  • OutBack
  • InOutBack
  • InElastic
  • OutElastic
  • InOutElastic
  • InBounce
  • OutBounce
  • InOutBounce

See the Easing Functions Cheat Sheet https://easings.net for illustrations of the particular easing functions.

new html.NumberAnimation ()

numberanimation.js:235
Properties:
Name Type Description
duration number

(default: 300) The duration of the animation in ms.
easing string

(default: "InOutQuad") The easing curve of the animation.
interpolate function

(default: (v1, v2, x) => v1 + (v2 - v1) * x) The interpolation function.
from number

(default: 0) The starting value.
to number

(default: 1) The ending value.

Extends

Events

html.NumberAnimation.event:next

numberanimation.js:254

Is triggered for each animation frame.

Name Type Description
value number

The value for the animation frame.