svg/utilityFunctions

JavaScript to allow for simpler animations in browser

Example:

utils.svg.embed({
    width: 200, height: 200, debug: false,
    
    //-- node functions to make available in javascript
    utilityFunctions: { ...utils.svg.utilityFunctions },
    
    //-- executed in javascript
    onReady: ({el, SVG, width, height, utilityFunctions }) => {
        const center = { x: width / 2, y: height / 2 };
        const period = 6000;
        const halfPeriod = period / 2;
        const bounceHeight = 100;
        
        const box = el.rect(100, 100)
            .center(center.x, center.y)
        
        const anim = utilityFunctions.animationFrameCalls();
        
        anim.stopOtherAnimations();
        
        const bounceBox = function bounceBox(timeElapsed) {
            const now = new Date().getTime() % period;
            const phase = (now / (period / 2)) * Math.PI;
            box.y(center.y + Math.sin(phase) * bounceHeight);
            
            if (anim.checkAnimationsAllowed()) {
                anim.nextAnimationFrame(bounceBox);
            }
        }
        bounceBox(0);
    }
});

• requestAnimationFrame - one of the different requestAnimationFrame implementations

  • window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

• requestAnimationFrame - one of the different cancelAnimationFrame implementations

  • window.cancelAnimationFrame || window.mozCancelAnimationFrame

• {Function} stopOtherAnimations - () => void - stops animations currently running, but still allows this one to run.

• {Function} checkAnimationsAllowed - () => Boolean, true - unless all animations have been stopped

• {Function} nextAnimationFrame - (function) => void - runs function on next animation frame

• {Function} stopAllAnimations - () => void, stops all animations and disallows future animations.

• {Function} allowAnimations - () => void, allows future animations