Percolade Blog - "The future of javascript animation with Famo.us" on Famo.us 0.1.1

00-app.css

/*
 * Percolade Blog - "The future of javascript animation with Famo.us"
 * http://blog.percolatestudio.com/engineering/the-future-of-javascript-animation-with-famous/
 * working code examples on Famo.us 0.1.1
 */
.test-surface {
    background-color: #EBEBF1;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    padding: 20px;
    font-size: 16px;
    -webkit-user-select: none;
    text-align: center;
    cursor: pointer;
}

.test-surface.odd {
    background-color: #f8f8f8;
}

01-transform.js

/*globals define*/
define(function (require, exports, module) {
    'use strict';

    // import dependencies
    var Easing    = require('famous/transitions/Easing');
    var Engine    = require('famous/core/Engine');
    var Modifier  = require('famous/core/Modifier');
    var Surface   = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');

    var mainCtx = Engine.createContext();

    // Create a surface, content is html
    var surface = new Surface({
        size:    [100, 100],
        content: '<span>Click To<br/>Move<br/>Surface</span>',
        classes: ['test-surface']
    });

    // Define Matrix transforms for start/end positions
    // and an easing curve to transition between them
    var startPos       = Transform.translate(20, 20, 0);
    var endPos         = Transform.translate(150, 200, 0);
    var transform      = new Modifier({ transform: startPos });
    var easeTransition = { duration: 500, curve: Easing.inOutBackNorm };

    // Apply the transition on click and switch start/end
    surface.on('click', function (e) {
        transform.setTransform(endPos, easeTransition);
        startPos = [endPos, endPos = startPos][0];
    });

    mainCtx.add(transform).add(surface);
});

02-spring.js

// Physics Engine
// ==============
// 
// It's divided in:
// 
// - Bodies
//     - Particle: defines position.
//     - Body: defines position + orientation
//     - Rectangle: position + orientation + geometry (rectangle)
//     - Circle: position + orientation + geometry (circle)
// - Agents (?)
//     - Contraints
//     - Forces
// 
// Agents act on bodies. Later on, "renderable" surfaces can be added to this
// bodies in the RenderTree. So this bodies seem to act as "modifiers". Ej:
//
//     context.add(particle).add(surface);
//
// See: https://github.com/Famous/guides/blob/master/dev/2014-04-09-render-tree.md
//
/*globals define*/
define(function (require, exports, module) {
    'use strict';

    // import dependencies
    var Engine        = require('famous/core/Engine');
    var Particle      = require('famous/physics/bodies/Particle');
    var PhysicsEngine = require('famous/physics/PhysicsEngine');
    var Modifier      = require('famous/core/Modifier');
    var Spring        = require('famous/physics/forces/Spring');
    var Surface       = require('famous/core/Surface');
    var Vector        = require('famous/math/Vector');

    var mainCtx = Engine.createContext();
    var PE      = new PhysicsEngine();

    // Create a surface, content is html
    var surface = new Surface({
        size:    [100, 100],
        content: '<span>Click To<br/>Spring<br/>Surface</span>',
        classes: ['test-surface']
    });

    // Create a physical particle with position (p), velocity (v), mass(m)
    var particle = new Particle({
       mass:     1,
       position: [0, 0, 0],
       velocity: [0, 0, 0]
    });

    // Create a spring that will act on the particle
    var spring = new Spring({
       anchor:       [0, 0, 0],
       period:       400,  // <= Play with these values :-)
       dampingRatio: 0.07, // <=
       length:       0
    });

    // Apply a force on the surface when it's clicked
    surface.on('click', function (e) {
        particle.applyForce(new Vector(0, 0, -0.005 * 100));
    });

    // Link the spring, particle and surface together
    PE.attach(spring, particle); // Add the spring force (agent)
    PE.addBody(particle);        // Add the particle to the PE

    // Create the scene, applying a top level modifier to center
    // the scene vertically in the viewport
    // add(particle) particle acts like a modifier on the renderable "surface"
    mainCtx.add(new Modifier({ origin: [.5, .5] })).add(particle).add(surface);
    mainCtx.setPerspective(1000);
});

03-scrollview.js

/*globals define*/
define(function (require, exports, module) {
    'use strict';

    // import dependencies
    var Engine     = require('famous/core/Engine');
    var Scrollview = require('famous/views/Scrollview');
    var Surface    = require('famous/core/Surface');

    var mainCtx = Engine.createContext();

    // Create a scrollview and array to hold surfaces
    var scrollView = new Scrollview();
    var surfaces   = [];

    // Create a numbered surface
    function createSurface(i) {
        return new Surface({
            size:    [undefined, 100],
            content: "Surface " + i,
            classes: ["test-surface", (i % 2 ? 'odd' : 'even')]
        });
    }

    // Add many surfaces to the scrollView
    for (var i = 0; i < 20; i++) {
        surfaces.push(createSurface(i));
    }

    // Include the surfaces in the scrollview and pipe
    // events to it from the engine
    scrollView.sequenceFrom(surfaces);
    Engine.pipe(scrollView);

    mainCtx.add(scrollView);
});

Nice job figuring out the new APIs from a 2 month old version :-)

Yeah, seriously. This helped me out a lot, was trying to figure out the Spring on my own, turns out I was just forgetting to set the perspective (as is often the case in life).

Thanks, the hardest part was the physics example which is quite different from the Percolade example, once I saw that the PE worked apart from the context and that the particle actually worked like a modifier, it started to make sense. Well, that's my theory, since I don't have access to the University and still have to check out the examples. :-)

The "Render Tree" guide helped a lot. @dmvaldman any plan to add more guides in the near future for the poor ones?