Changing positions of things during animation

Question

If I have a transform translate thats animating something vertically between say 0 -> 1000, over 5 seconds, is there a way if I have click events to change the horizontal position without interrupting the vertical animation?

p.setTransform(Transform.translate(20,1000,0),
{
   duration: 5000,
   curve: 'linear'         
});

then on some random click, I want to start changing the x position over 100ms or so, and it might have multiple of these before the 5000 duration has finished

I can play with the origin and animate that independently, but I really need pixel control. So is there a way to animate just the x?

If I add a setTransform, it chains after the first one rather than concurrently.

Answer 1

Yes, you most certainly can achieve this. You will want to use a ModifierChain. ModifierChain allows you to chain your modifiers together and control the transforms independently. Check out this example..

Hope this helps!

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.yState = new StateModifier();

surface.xState = new StateModifier();

var x = 0;
var y = context.getSize()[1] - 200;

surface.on('click',function(){
  x += 100;
  surface.xState.halt();
  surface.xState.setTransform(Transform.translate(x,0,0),{duration:200});
});

surface.chain = new ModifierChain();

surface.chain.addModifier(surface.yState);

surface.chain.addModifier(surface.xState);

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

surface.yState.setTransform(Transform.translate(0,y,0), {duration:5000});