javascript - 使用 ractive.animate 覆盖特定键路径的 ractivet.set

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/