• Jump To … +
    ./source/asset-management/image-asset.js ./source/asset-management/noise-asset.js ./source/asset-management/raw-asset.js ./source/asset-management/reaction-diffusion-asset.js ./source/asset-management/sprite-asset.js ./source/asset-management/video-asset.js ./source/core/animation-loop.js ./source/core/display-cycle.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/snippets.js ./source/core/user-interaction.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/button.js ./source/factory/canvas.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/conic-gradient.js ./source/factory/crescent.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/enhanced-label.js ./source/factory/filter.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/label.js ./source/factory/line-spiral.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/oval.js ./source/factory/particle-force.js ./source/factory/particle-spring.js ./source/factory/particle-world.js ./source/factory/particle.js ./source/factory/pattern.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/radial-gradient.js ./source/factory/rectangle.js ./source/factory/render-animation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstacked-element.js ./source/factory/wheel.js ./source/helper/array-pool.js ./source/helper/color-engine.js ./source/helper/document-root-elements.js ./source/helper/filter-engine-bluenoise-data.js ./source/helper/filter-engine.js ./source/helper/gradient-engine.js ./source/helper/random-seed.js ./source/helper/shape-path-calculation.js ./source/helper/shared-vars.js ./source/helper/system-flags.js ./source/helper/utilities.js ./source/helper/workstore.js ./source/mixin/anchor.js ./source/mixin/asset-advanced-functionality.js ./source/mixin/asset-consumer.js ./source/mixin/asset.js ./source/mixin/base.js ./source/mixin/button.js ./source/mixin/cascade.js ./source/mixin/cell-key-functions.js ./source/mixin/delta.js ./source/mixin/display-shape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/hidden-dom-elements.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shape-basic.js ./source/mixin/shape-curve.js ./source/mixin/styles.js ./source/mixin/text.js ./source/mixin/tween.js ./source/scrawl.js ./source/untracked-factory/cell-fragment.js ./source/untracked-factory/coordinate.js ./source/untracked-factory/drag-zone.js ./source/untracked-factory/keyboard-zone.js ./source/untracked-factory/observe-update.js ./source/untracked-factory/palette.js ./source/untracked-factory/particle-history.js ./source/untracked-factory/quaternion.js ./source/untracked-factory/state.js ./source/untracked-factory/text-style.js ./source/untracked-factory/vector.js
  • §

    Animation factory

    Animations lie at the heart of Scrawl-canvas functionality. While static Canvas and Stack displays can be rendered once and then forgotten, any Canvas or Stack that implements any form of user interaction, or movement in the display, needs to implement an Animation object to make that functionality happen.

    NOTE that Animation objects do not take part in Scrawl-canvas’s packet save-and-load functionality, as a result of which they cannot be cloned.

  • §

    Imports

    import { constructors } from '../core/library.js';
    
    import { doCreate, mergeOver, xt, λnull, λcloneError, Ωempty } from '../helper/utilities.js';
    
    import { forceUpdate } from '../helper/system-flags.js';
    
    import { animateAdd, animateIncludes, animateRemove } from '../core/animation-loop.js';
    
    import baseMix from '../mixin/base.js';
  • §

    Shared constants

    import { ANIMATION } from '../helper/shared-vars.js';
  • §

    Local constants

    const T_ANIMATION = 'Animation';
  • §

    Animation constructor

    const Animation = function (items = Ωempty) {
    
        this.makeName(items.name);
        this.order = (xt(items.order)) ? items.order : this.defs.order;
        this.fn = items.fn || λnull;
        this.onRun = items.onRun || λnull;
        this.onHalt = items.onHalt || λnull;
        this.onKill = items.onKill || λnull;
        this.maxFrameRate = items.maxFrameRate || 60;
        this.lastRun = 0;
        this.chokedAnimation = true;
    
        this.register();
    
        if(!items.delay) this.run();
    
        return this;
    };
  • §

    Animation prototype

    const P = Animation.prototype = doCreate();
    
    P.type = T_ANIMATION;
    P.lib = ANIMATION;
    P.isArtefact = false;
    P.isAsset = false;
  • §

    Mixins

    baseMix(P);
  • §

    Animation attributes

    const defaultAttributes = {
  • §

    order - positive integer Number - determines the order in which each Animation object will be actioned before the Display cycle starts.

    • Higher order Animations will be processed after lower order Animations.
    • Animations with the same order value will be processed in the order in which they were defined in code.
        order: 1,
  • §

    maxFrameRate - positive integer Number. A frames-per-second choke to prevent animation running too fast.

        maxFrameRate: 60,
  • §

    fn - the main function that the Animation object will run on each RequestAnimationFrame tick.

        fn: null,
  • §

    The Animation object supports some animation hook functions:

    • onRun - triggers each time the Animation object’s run function is invoked
    • onHalt - triggers each time the Animation object’s halt function is invoked
    • onKill - triggers each time the Animation object’s kill function is invoked
        onRun: null,
        onHalt: null,
        onKill: null,
  • §

    delay - by default, Animation objects will start running as soon as they are created. To prevent this happening the constructor argument can take a non-retained delay Boolean flag which, when set to true, will prevent the Animation object from adding itself to the Scrawl-canvas animation loop. The animation can be started at any subsequent time by invoking its run function.

    };
    P.defs = mergeOver(P.defs, defaultAttributes);
  • §

    Packet management

    This functionality is disabled for Animation objects

    P.stringifyFunction = λnull;
    P.processPacketOut = λnull;
    P.finalizePacketOut = λnull;
    P.saveAsPacket = function () {
    
        return `[${this.name}, ${this.type}, ${this.lib}, {}]`
    };
  • §

    Clone management

    This functionality is disabled for Animation objects

    P.clone = λcloneError;
  • §

    Kill management

    Kill functionality is managed as one of the Animation object’s hook functions - see below

  • §

    Get, Set, deltaSet

    No additional getter or setter functionality required

  • §

    Prototype functions

  • §

    run - start the animation, if it is not already running

    P.run = function () {
    
        this.onRun();
        animateAdd(this.name);
    
        setTimeout(() => forceUpdate(), 20);
    
        return this;
    };
  • §

    isRunning - returns true if animation is running; false otherwise

    P.isRunning = function () {
    
        return animateIncludes(this.name);
    };
  • §

    halt - stop the animation, if it is already running

    P.halt = function () {
    
        this.onHalt();
        animateRemove(this.name);
        return this;
    };
  • §

    kill - stop the animation if it is already running, and remove it from the Scrawl-canvas library

    P.kill = function () {
    
        this.onKill();
        animateRemove(this.name);
    
        this.deregister();
    
        return true;
    };
  • §

    Factory

    scrawl.makeAnimation({
    
        name: 'demo-animation',
    
        fn: () => {
            scrawl.render();
        },
    });
    
    export const makeAnimation = function (items) {
    
        if (!items) return false;
        return new Animation(items);
    };
    
    constructors.Animation = Animation;