famo.us: Combining 2 transforms to run at the same time

Question

When a user first comes to my app, I have a logo that I want to move from the center of the screen to the top, but as it's moving I also want it to shrink to 1/2 its original size too. Is it possible to do this with famo.us?

Answer 1

There are a couple of ways this can be achieved. For clarity and simplicity, I would recommend using the ModifierChain class. This allows you to chain together modifiers that affect a single renderable. Here is an example of what you are trying to achieve.

Good Luck!

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var StateModifier       = require("famous/modifiers/StateModifier");
var Transform           = require("famous/core/Transform");
var ModifierChain       = require("famous/modifiers/ModifierChain");
var Easing              = require("famous/transitions/Easing");

var context = Engine.createContext();

var surface = new Surface({
  size:[200,200],
  properties: { backgroundColor: 'green'}
})

surface.chain = new ModifierChain();

surface.state = new StateModifier({ origin:[0.5,0.5] });
surface.sizeState = new StateModifier();

surface.chain.addModifier(surface.sizeState);
surface.chain.addModifier(surface.state);

context.add(surface.chain).add(surface);

surface.on('click', function(){

  transition = {duration:1000,curve:Easing.inOutQuad};

  surface.sizeState.setTransform(Transform.scale(0.5,0.5,1),transition);
  surface.state.setOrigin([0.5,0],transition);

});

Answer 2

If you have to find the matrix that combines the effect of multiple Transforms

    finalTransform = Transform.multiply4x4(Transform.scale(scaleX, scaleY, scaleZ),
                          Transform.translate(translateX, translateY, translateZ));

    finalTransform = Transform.multiply4x4(finalTransform, 
                         Transform.rotate(rotateX, rotateY, rotateZ));

This combines the effect of rotation, scale and translation. You can include skew as well.

Answer 3

Here is my elegant solution similar to johntraver's

var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
var ImageSurface = famous.surfaces.ImageSurface;

// create the main context
var mainContext = Engine.createContext();

// your app here
var logo = new ImageSurface({
    size: [200, 200],
    content: 'img/famousLogo.svg',
    classes: ['double-sided']
});

var initialTime = Date.now();

var centerModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
});

var spinYModifier = new Modifier({
    transform: function () {
        return Transform.rotateY(.001 * (Date.now() - initialTime));
    }
});

var spinXModifier = new Modifier({
    transform: function () {
        return Transform.rotateX(.001 * (Date.now() - initialTime));
    }
});

mainContext.add(centerModifier).add(spinXModifier).add(spinYModifier).add(logo);