Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/asp.net/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在each()中应用tween,如何使用reverse()?_Javascript_Canvas_Kineticjs_Tween - Fatal编程技术网

Javascript 在each()中应用tween,如何使用reverse()?

Javascript 在each()中应用tween,如何使用reverse()?,javascript,canvas,kineticjs,tween,Javascript,Canvas,Kineticjs,Tween,假设我对画布上的每个元素应用一个tween elements.each(function (element) { new Kinetic.Tween({ node: element, rotationDeg: 180 }).play(); }); 所有物品都经过粗花呢处理,从原始状态转移到最终状态。我的问题是:如何应用reverse()将每个项目还原为其原始状态?将tween存储在一个数组中,然后循环遍历该数组并使用.reverse() elem

假设我对画布上的每个元素应用一个tween

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

所有物品都经过粗花呢处理,从原始状态转移到最终状态。我的问题是:如何应用reverse()将每个项目还原为其原始状态?

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

elements=stage.get('Rect');
变量tweenArray=[];
//反向吐温
document.getElementById('reverse')。addEventListener('click',function(){

对于(var i=0;i+1是的,很好的插图!我知道这只是一个插图,但在制作过程中一定要防止连续单击播放或反转。例如,单击播放两次会弄乱动画。谢谢@markE,你是绝对正确的,所以感谢你指出这一点:DThanks projeqht。这很有帮助:)
    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);