Question

我有以下情况。一个蓝色矩形和两个分配给它的补间，根据条件，只有一个将被执行。不幸的是，下面的代码不起作用：

var rectangle = new Kinetic.Rect ({
    width: 128, height: 64,
    fillRed: 0, fillGreen: 0, fillBlue: 255
});

var rectTweenFail = new Kinetic.Tween ({
    node: rectangle,
    duration: 5,
    easing: Kinetic.Easings.Linear,
    fillRed: 255, fillGreen: 0, fillBlue: 0,
});

var rectTweenPass = new Kinetic.Tween ({
    node: rectangle,
    duration: 5,
    easing: Kinetic.Easings.Linear,
    fillRed: 0, fillGreen: 255, fillBlue: 0,
});

if (some conditional)
    rectTweenPass.play();
else
    rectTweenFail.play();

仅当条件为真时才执行补间。 在http://jsfiddle.net/yXRct/

添加了小提琴

注意如果我颠倒了rectTweenFail和rectTweenPass定义的顺序，那么只有当条件为false时才会执行补间。

Answer 1

更新

基于@gitat提供的小提琴here，这看起来像是一个错误。它没有像我预期的那样表现。这是提出问题的a fiddle。

@gaitat已经打开了一个错误报告：https://github.com/ericdrowell/KineticJS/issues/973

原始答案

以下是基于您的代码的几个小提琴。第一个是在您的问题中简单实现真/假条件：

http://jsfiddle.net/klenwell/R49Pg/

您可以更改PASS var设置，以验证true和false案例是否按预期工作。

第二个例子更有趣：

http://jsfiddle.net/klenwell/5HB5h/

条件逻辑基于事件：

layer.find('.rectangle').on('dragstart dragend', function(evt) {
    if ( evt.type == 'dragstart' ) {
        console.log('pass');
        rectTweenPass.play();
    }
    else {
        console.log('fail');
        rectTweenFail.play();
    }
});

我注意到一个可能与您的问题有关的意外行为：

使用基于事件的逻辑，补间很容易互相依赖。要查看我的意思，请将矩形拖动一秒左右然后释放它，您将看到失败的补间中断传递。观看控制台日志有助于跟踪事件。

另请注意，如果您的补间可以多次运行，则需要在每次调用之间重置补间。您可以在我的示例中看到，在第一次执行之后，当调用每个补间时，它似乎只是在没有动画的情况下跳到结束。这也可能导致意外行为。

将两个补间分配给kineticjs对象，但有条件地只执行一个

1 个答案:

更新

原始答案