Animation Controller With Timeline – AnimSequence

Preview:

Description:

AnimSequence is a performant JavaScript animation library which allows you to play animations frame-by-frame with a timeline.

Basic usage:

Import the minified version of the AnimSequence library into the document.

<script src="anim-sequence.min.js"></script>

Add the animation. Possible parameters:

• valueCallback: Returns a value that is used to draw each frame.
• frameCallback: Called when it should draw a frame, it draws a frame with passed arguments.
• duration: Animation duration in milliseconds.
• count: The number of times the animation should repeat.
• timing: Timing function.
• reverse: Reverses the animation.
• timeRatio: A number ranging from 0 to 1.

animId = AnimSequence.add(valueCallback, frameCallback, duration, count, timing, reverse, timeRatio)

Remove the animation.

AnimSequence.remove(animId)

Play the animation.

AnimSequence.start(animId, reverse, timeRatio)

Pause the animation.

AnimSequence.stop(animId, getTimeRatioByFrame)

Changelog:

10/19/2018

• v1.0.11