Animation in famo.us with changing opacity of surface -


i new famo.us. interested in creating animation surface/object in continuous motion , opacity keeps changing( ranging 0->1 , back). have able continuously rotate surface , change opacity 1 0 once. stuck here not sure how proceed forward. can suggest me ideas ?

there couple ways can go doing this. depends on exact effect trying achieve. here example using modifier , opacityfrom method achieve 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 like, achieve never ending animation using statemodifier callback function in setopacity. here recursively calling same function, in nested callback. looks like.

hope of 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}); 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -