3

I am having trouble with my recursive function not looping through correctly, at the bottom is my code that I am having trouble with, the stuff before that is just to show I have worked A LOT on it :) There is also a link to a working example. I was previously using a ton of nested for loops like this:

function assembleTimeline(targetItem, sequence) {
    var TIMELINE = "";
    var greenAniArray = {options:{}};
    for (S = 0; S < sequence.length; S++) {
        greenAniArray = [];
        for (L = 0; L < sequence.length; L++) {
            alength = greenAniArray.length;
            for (var setting in sequence[S][L]) {
                greenAniArray.push({});

                if (setting == "duration") {
                    greenAniArray[alength]["duration"] = sequence[S][L][setting];
                    delete sequence[S][L]["duration"];
                }else{
                    greenAniArray[alength].push({});
                    for (var option in sequence[S][L][setting]) {
                        greenAniArray[alength]["options"][option] = sequence[S][L][setting][option];
                    }
                }
                if (greenAniArray[alength]["options"]) {
                    delete greenAniArray[alength]["options"]["duration"];
                }
                $(".jsonresults").html(prettyPrint(greenAniArray));
            }
        }
        animationSequence = greenAniArray[alength]["options"];
        animationDuration = greenAniArray[alength]["duration"];

        // Make commands look like this:
        // to($box, 1, {x:50,y:0})

        assembledTimeline += '.to("' + targetItem + '", ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')';
    }

    TIMELINE= "tl" + assembledTimeline; 
};

to get through this when someone suggested a recursive function, but The "sequence" is an array that could have a single item, or dozens. I am putting this together to accept info from an array / object with an animation sequence like this one I made: http://codepen.io/ajhalls/pen/QbvRbQ

http://codepen.io/ajhalls/pen/bdrmGw?editors=101

$(function() {
  var target = "targetDiv"
  var aniMation = "";
  var sequence = [{
    "duration": ".2",
    "transform": "translate3d(0,0,0)"
  }, {
    "duration": ".2",
    "transform": "translate3d(0, -30px, 0)"
  }, {
    "transform": "translate3d(0, -15px, 0)",
    "duration": ".2"
  }, {
    "transform": "translate3d(0,-4px,0)",
    "duration": ".2"
  }];

  function parseAnimation(target, sequence, count = 0) {
    for (var property in sequence) {

      duration = sequence[property]["duration"];

      delete sequence[property]["duration"];
      aniSequence = sequence[property];
      //$(".output").text(JSON.stringify(aniSequence)); 
      aniMation += '.to("' + target + '", ' + duration + ', ' + aniSequence + ')';
      $(".output").text(aniMation);

      parseAnimation(target, sequence[property], count++);
    }
  }

  parseAnimation(target, sequence);
});
4
  • Recursive functions often break or cause a stack overflow if you fail to catch errors adn parse the perameters you feed back in to the function.
    – Ucinorn
    Jun 17, 2015 at 2:01
  • Is requirement to pass an array of settings to parseAnimation , which will be called in sequence as arguments to parseAnimation until no settings objects remain in original sequence array passed ? Tried utilizing api.jquery.com/queue ? Jun 17, 2015 at 2:30
  • @dave while the duration is repeated and is the same in each of these examples, it could just as easily have had a unique value as the animation speeds up / slows down.
    – Alan
    Jun 17, 2015 at 2:32
  • @Dave I am so sorry, that was a typo from copying things around, it shouldn't have had the second one and I have edited it to remove it.
    – Alan
    Jun 17, 2015 at 3:48

1 Answer 1

1

You don't need recursion for the sequence in your example. If you have sequences that contain sequences then you would want recursion.

$(function() {
  var target = "target"
  var aniMation = "tl";
  var sequence = [{
    "duration": ".2",
    "transform": "translate3d(0,0,0)"
  }, {
    "duration": ".2",
    "transform": "translate3d(0, -30px, 0)"
  }, {
    "transform": "translate3d(0, -15px, 0)",
    "duration": ".2"
  }, {
    "transform": "translate3d(0,-4px,0)",
    "duration": ".2"
  }];

  function parseAnimation(target, sequence)
  {
    for (var property in sequence)
    {
      var s = sequence[property];
      var aniSequence = { "transform": s["transform"], "duration": s["duration"] };

      aniMation += '.to("' + target + '", ' + s.duration + ', ' + JSON.stringify(aniSequence) + ')<br>';
      $("#output").html(aniMation);
    }
  }

  parseAnimation(target, sequence);
});
1
  • Thanks Phill, the sequence could have any css property or transformation property from Greensock such as: { left: random(300,160) , top: random(300,100) , y: random(100,0), scale: Math.random(), backgroundColor:"#ffcc00", opacity: Math.random() } Otherwise it is nice.
    – Alan
    Jun 17, 2015 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.