Reputation: 2086
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);
});
Upvotes: 3
Views: 135
Reputation: 1420
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);
});
Upvotes: 1