0

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

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

然后在随机点击时，我想开始在 100 毫秒左右更改 x 位置，并且在 5000 持续时间完成之前它可能有多个这样的位置

我可以玩原点并独立制作动画，但我真的需要像素控制。那么有没有办法只为 x 设置动画？

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

4

1 回答 1

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});
于 2014-05-12T02:12:45.763 回答