Question

如果我有一个转换翻译，那就是在0和＆gt;之间垂直地设置动画。 1000，超过5秒，如果我有点击事件来改变水平位置而不中断垂直动画，有没有办法？

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

然后在一些随机点击中，我想开始将x位置改变超过100ms左右，并且在5000持续时间结束之前它可能有多个

我可以独立播放原点和动画，但我真的需要像素控制。那么有没有办法让x？

动画化

如果我添加一个setTransform，它会链接在第一个而不是并发之后。

Answer 1

是的，你肯定能做到这一点。您将需要使用ModifierChain。 ModifierChain允许您将修改器链接在一起并独立控制变换。看看这个例子..

希望这有帮助！

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

在动画期间改变事物的位置

1 个答案: