Question

我正在写一个纸牌游戏，游戏状态是通过websocket来自服务器的。当客户收到游戏状态时，我会拨打ractive.set('game', game)。

游戏对象内部是有钱的用户列表。当他们的钱改变时，我想要数字动画，所以我写道：

ractive.observe('game.seats.*.money', function(money, oldmoney, keypath) {
    ractive.animate(keypath, money);
})

不幸的是，这不起作用。我认为这是因为在我观察更新时，游戏状态已经设置为新值，然后动画到新值看起来什么都不是。

有没有办法实现我正在寻找的效果？

Answer 1

FWIW Ractive确实能够为对象层次结构设置动画，因此您可以调用ractive.animate("game', game)。请参阅http://jsfiddle.net/hj568b0m/。

但是假设您不想为模型的其他部分设置动画，您可以使用观察者（在DOM更新之前触发）将值设置回来然后为其设置动画：

var animating = []
r.observe('game.seats.*.money', function(money, oldmoney, keypath, index) {
    // the animation update will re-enter the observer,
    // so bail if we are animating this index...
    if ( animating[index] ) { return; }

    animating[index] = true;
    r.set(keypath, oldmoney);   
    r.animate(keypath, money).then(function(){
        animating[index] = false;
    });
});

请参阅http://jsfiddle.net/tyyfmosr/

使用ractive.animate覆盖ractivet.set以获取特定的密钥路径

1 个答案: