应用补间在每个（），我如何使用reverse（）？ [英] Applied tween inside each(), how do I use reverse()?

问题描述

让我们假设我对画布上的每个元素应用补间。

Let's suppose I apply a tween to each element on my canvas

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

所有项目都已经过补间，并已从原始状态转变为最终状态。我的问题是：我如何应用反向（）将每个项目恢复到其原始状态？

All items have been tweened and have passed from their original state to a final state. My question is: How would I apply a reverse() to revert each item to their original state?

推荐答案

一个数组，然后循环通过该数组，并使用 .reverse（）

Store the tweens inside an array, and then loop through that array and use .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

这篇关于应用补间在每个（），我如何使用reverse（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！