Easing Types

Task

Create some sprites with actions each having its own different easing function.

Result

JavaScript

// Demo 8

const grayFrog = makeGrayFrogLibrary();

function start() {
    // Load images and start demo when loading has finished    
    let ip = new grayFrog.ImagePreloader();
    ip.preloadImages(
        [
            { name: 'easingBG', source: 'images/easingBG.png' },
            { name: 'redBall', source: 'images/redBall.png' },
            { name: 'greenBall', source: 'images/greenBall.png' },            
            { name: 'yellowBall', source: 'images/yellowBall.png' },            
            { name: 'blueBall', source: 'images/blueBall.png' },
        ],
        () => demo(ip.imageDictionary)
    );
}

function demo(imageDictionary) {
    // Initialize canvas, controller, and scene
    let canvas = document.getElementById('demoCanvas');
    let controller = new grayFrog.Controller(canvas, true);
    let scene = controller.makeImageScene('main', imageDictionary.easingBG);
    controller.scene = scene;

    const duration = 3;
    const gap = 40;
    const top = 42;

    // Add ball sprites
    let ball1 = new grayFrog.ImageSprite('ball1',
        gap, top + gap, imageDictionary.redBall);
    ball1.scale = 0.5;
    ball1.addAction(new grayFrog.Action('x', scene.width - gap, duration,
        grayFrog.EASING.linear,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(ball1);

    let ball2 = new grayFrog.ImageSprite('ball2',
        gap, top + gap * 3, imageDictionary.greenBall);
    ball2.scale = 0.5;
    ball2.addAction(new grayFrog.Action('x', scene.width - gap, duration,
        grayFrog.EASING.in,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(ball2);

    let ball3 = new grayFrog.ImageSprite('ball3',
        gap, top + gap * 5, imageDictionary.yellowBall);
    ball3.scale = 0.5;
    ball3.addAction(new grayFrog.Action('x', scene.width - gap, duration,
        grayFrog.EASING.out,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(ball3);

    let ball4 = new grayFrog.ImageSprite('ball4',
        gap, top + gap * 7, imageDictionary.blueBall);
    ball4.scale = 0.5;
    ball4.addAction(new grayFrog.Action('x', scene.width - gap, duration,
        grayFrog.EASING.inout,
        { atEndBehaviour: grayFrog.ACTION_AT_END_BEHAVIOUR.oscillate }));
    scene.addChild(ball4);

    // Start the game loop
    controller.start();
}