javascript - famo.us trigger event at key point of animation -

javascript - famo.us trigger event at key point of animation -

i'm trying trigger event half-way through progress (not time) of transition. sounds simple, since transition can have curve it's quite tricky. in particular case it's not going paused or consideration out of way.

(simplified) trigger animation on modifier this:

function scalemodifierto(statemodifier, scale, animationduration) { statemodifier.settransform( transform.scale(scale, scale, scale), { duration: animationduration, curve: this.options.curve } ); }

when interpolated state of transitionable hits 0.5 (half-way through) want trigger function.

i haven't dug deep behind in source of famo.us yet, maybe need like

subclass , add together possibility hear when state passes through point? reverse curve defined , utilize settimeout (or seek find proximity using few iterations of chosen curve algorithm (ew))

is possible easily? route should go down?

i can think of couple of ways accomplish such, , both lend utilize of modifier on statemodifier. if new, , haven't had chance explore differences, modifier consumes state transformfrom method takes function returns transform. can utilize our own transitionable supply state on lifetime of our modifier.

to accomplish wish, used modifier basic transformfrom alter x position of surface based on value of transitionable. can monitor transitionable determine when closest, or in case greater or equal half of final value. prerender function called , checked on every tick of engine, , unbinded when nail target.

here example..

var engine = require('famous/core/engine'); var surface = require('famous/core/surface'); var modifier = require('famous/core/modifier'); var transform = require('famous/core/transform'); var transitionable = require('famous/transitions/transitionable'); var snaptransition = require('famous/transitions/snaptransition'); transitionable.registermethod('snap',snaptransition); var snap = { method:'snap', period:1000, damping:0.6}; var context = engine.createcontext(); var surface = new surface({ size:[200,200], properties:{ backgroundcolor:'green' } }); surface.trans = new transitionable(0); surface.mod = new modifier(); surface.mod.transformfrom(function(){ homecoming transform.translate(surface.trans.get(),0,0); }); context.add(surface.mod).add(surface); function triggertransform(newvalue, transition) { var prerender = function(){ var pos = surface.trans.get(); if (pos >= (newvalue / 2.0)) { // something.. emit event etc.. console.log("hello @ position: "+pos); engine.removelistener('prerender',prerender); } } engine.on('prerender',prerender); surface.trans.halt(); surface.trans.set(newvalue,transition); } surface.on('click',function(){ triggertransform(400, snap); });

the downside of illustration fact querying transitionable twice. alternative add together transitionable check right in transformfrom method. bit strange, modifying our transformfrom method until nail our target value, revert original transformfrom method.. triggertransform defined follows..

hope helps!

function triggertransform(newvalue, transition) { surface.mod.transformfrom(function(){ pos = surface.trans.get() if (pos >= newvalue/2.0) { // console.log("hello position: " + pos) surface.mod.transformfrom(function(){ homecoming transform.translate(surface.trans.get(),0,0); }); } homecoming transform.translate(pos,0,0) }) surface.trans.set(newvalue,transition); }

javascript animation transform famo.us