在每个()中应用补间,我如何使用reverse()?

时间:2013-07-29 18:50:12

标签: javascript canvas kineticjs tween

假设我将补间应用于画布上的每个元素

elements.each(function (element) {
    new Kinetic.Tween({
        node: element,
        rotationDeg: 180
    }).play();
});

所有项目都经过补充,并已从原始状态转移到最终状态。我的问题是:我如何应用reverse()将每个项目恢复到原始状态?

1 个答案:

答案 0 :(得分:1)

将补间存储在数组中,然后循环遍历该数组并使用.reverse()

    elements = stage.get('Rect');
    var tweenArray = [];

    // reverse tween
    document.getElementById('reverse').addEventListener('click', function () {
        for (var i=0; i<tweenArray.length; i++) {
            tweenArray[i].reverse();
        }
    }, false);

    // play tween forward
    document.getElementById('play').addEventListener('click', function () {
        elements.each(function (element) {
            var tween = new Kinetic.Tween({
                node: element,
                rotationDeg: 180
            }).play();
            tweenArray.push(tween);
        });
    }, false);

jsfiddle