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
Post a Comment