Have ideas to improve npm?Join in the discussion! »

    @curiousmedia/canvas-animator

    1.1.2 • Public • Published

    CanvasAnimator

    Generate AnimateCC spritesheets and display them in a canvas element

    How to generate a Sprite Sheet from Animate CC for use with Canvas Animator:

    Right click on the symbol you want to export and choose Generate Sprite Sheet...

    Choose from available export options.

    Verify Data Format is set to JSON-Array and click Export

    Usage:

    Load and Parse the JSON-Array data that was exported from AnimateCC

    Make a new instance of CanvasAnimator:

    let animation = new CanvasAnimator(
        document.querySelector('canvas'),
        jsonData,
        60,
        false
    );
    

    Event Listeners

        animation.on('complete', function(event){
            console.log(event.frame);
        });
    

    new CanvasAnimator(element, data, framerate, loop)

    Constructor

    Param Type Default Description
    element Canvas Required: The canvas element to display the animation on
    data Object Required: The JSON Array data from Animate CC
    framerate Number 24 Optional: Framerate to run the animation at Default: 24
    loop Bool true Optional: Does the animation loop or play once and stop Default: true

    canvasAnimator.framerate - GETTER

    Get the framerate our animation is playing at

    canvasAnimator.framerate - SETTER

    Set the framerate to play the animation at

    Param Type Description
    rate Number FPS for the animation to run at

    canvasAnimator.loop - GETTER

    Get the loop property

    canvasAnimator.loop - SETTER

    Set the loop property to be true or false

    Param Type
    bool Bool

    canvasAnimator.handleImageLoaded()

    Image onload handler called when the image is done loading

    canvasAnimator.drawFrame(dataFrame)

    Draw the image based on data from the JSON data array

    Param Type
    dataFrame Object

    canvasAnimator.play()

    Play the animation

    canvasAnimator.pause()

    Pause the animation

    canvasAnimator.gotoAndPlay(frame)

    Go to the specific frame number

    Param Type Description
    frame Number frame number to go to

    canvasAnimator.render()

    Request Animation Frame

    canvasAnimator.on(type, listener, useCapture)

    Shortcut to add event listeners for the canvas element

    Param Type Default Description
    type String Required. A String that specifies the name of the event.
    listener function Required. Specifies the function to run when the event occurs.
    useCapture Bool false Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

    canvasAnimator.off(type, listener, useCapture)

    Shortcut to remove event listeners for the canvas element

    Param Type Default Description
    type String Required. A String that specifies the name of the event.
    listener function Required. Specifies the function to run when the event occurs.
    useCapture Bool false Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

    Events

    Start

    Called when the image is loaded and the RequestAnimationFrame begins

    Change

    Called when a new frame in the animation is rendered

    Complete

    Called when the last frame of the animation has played and the animation is returning to Frame 0 unless loop = false

    Keywords

    none

    Install

    npm i @curiousmedia/canvas-animator

    DownloadsWeekly Downloads

    5

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    1 MB

    Total Files

    24

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar