Animation in famo.us with changing opacity of surface

Question

I am new to famo.us. I am interested in creating animation where surface/object is in continuous motion and also its opacity keeps changing( ranging from 0->1 and back). I have am able to continuously rotate a surface and change its opacity from 1 to 0 once. I am stuck here as I am not sure how to proceed forward. Can someone suggest me some ideas ?

Answer 1

There are a couple ways you can go about doing this. It really depends on the exact effect you are trying to achieve. Here is an example using Modifier and its opacityFrom method to achieve a never ending sine effect.

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');

var context = Engine.createContext();

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

surface.node = new RenderNode();
surface.mod = new Modifier({origin:[0.5,0.5]});

var startTime = Date.now();

var period = 1000;

surface.mod.opacityFrom(function(){
    currentTime = Date.now();
    return Math.abs(Math.sin((((currentTime - startTime) / period))));
});

surface.node.add(surface.mod).add(surface);

context.add(surface.node);

Or if you would like, you could achieve a never ending animation by just using StateModifier the callback function in setOpacity. Here I am recursively calling the same function, in a nested callback. This is what that looks like.

Hope some of this helps!

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var StateModifier = require('famous/modifiers/StateModifier');

var Easing = require('famous/transitions/Easing');

var context = Engine.createContext();

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

surface.node = new RenderNode();
surface.mod = new StateModifier({origin:[0.5,0.5]});

surface.state = 0
surface.setState = function(state,transition){
    surface.state = (state == 0) ? 1 : 0;
    surface.mod.setOpacity(state,transition,function(){
        surface.setState(surface.state,transition);
    });
}

surface.node.add(surface.mod).add(surface);

context.add(surface.node);

surface.setState(surface.state,{duration:1000, curve:Easing.inOutQuad});