为特定的键路径用 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/

为特定的键路径用 ractive.animate 覆盖 ractivet.set

Override ractivet.set with ractive.animate for a specific keypath

javascript

ractivejs