2

I am using CreateJS to animate an object.

I want to move the circle shape to a position that changes in a for loop.

    var x = {
        time: 200,
        x: 0,
        y: 0
    };

I am going to change this variable after every time the shape animates in a for loop.

    for(var i = 0; i < 4; i++) {
        createjs.Tween.get(circle)
            .to({x: hits.x, y: hits.y}, hits.time);

    hits.x += 200;
    hits.y += 200;
    }

I have the increment value set to 4, but I am going to change it. This is why I am not directly using the .to function every time I am animating it. I do not want to hardcode every loop for every single increment. I need to make a single function that can take in any increment value and animate it accordingly.

I tried this out, but then realized that the animation doesn't take place if another animation is in progress.

I then used an eval function to add all the values to a string, and then doing it as a whole, as the .to() function is chainable.

     var bounceString = "createjs.Tween.get(circle)";
     for(var i = 0; i < 4; i ++) {
        bounceString += ".to({x: hits.x, y: hits.y}, hits.time)";

    hits.x += 200;
    hits.y += 200;
    }
    bounceString += ";";
    eval(bounceString);

By using the eval function with the string, I can use any increment value and animate the shape accordingly without having to hardcode it. However, there is a problem.

I have no clue why, but it says that the hits variable is undefined. I also tried to define that variable in the bounceString, but it did not work out. I also tried making it a global variable (as the whole code is in a function).

The error that shows up when I try to define hits in bounceString is this-

Error

This happens only when I am trying to define the variable in the string itself.

I know that the eval function is dangerous, but this is the only way. Is there any other way I can do this?

Ron
  • 57
  • 1
  • 8
  • 6
    Just chain without `eval` (save the chainable object in a variable). There's absolutely no reason to use it here, and you won't get problems either. – Bergi Feb 18 '16 at 23:47
  • @Bergi Sorry- Read my comment on the first answer. I have made the changes. – Ron Feb 19 '16 at 03:04
  • A simple loop doesn't hardcode anything. It can take the number of iterations as an arguments just as well. `eval` does not make any sense here. Clear your mind from it. – Bergi Feb 19 '16 at 03:35

1 Answers1

0

I have no idea what the API for createjs is. However, I would expect that storing what you get from createjs.Tween.get() and then doing the .to() would be far better than anything eval() does for you.

Consider the following code:

// Store the tween
var c = createjs.Tween.get(circle);

// Create your keyframes
var keyframes = [],
    keyframe;

for (keyframe = 0; keyframe < 4; keyframe += 1) {
    keyframes.push({
        x: 200 * keyframe,
        y: 200 * keyframe
    });
}

// Do your iterations on tween
keyframes.reduce(function (prev, curr, i, arr) {
    return prev.to({
        x: arr[i].x,
        y: arr[i].y
    });
}, c.to({
    x: keyframes[0].x,
    y: keyframes[0].y
}));
zero298
  • 25,467
  • 10
  • 75
  • 100
  • You shouldn't need a `for` loop *and* `reduce`, should you? – Bergi Feb 19 '16 at 00:08
  • Don't overcomplicate the reduction. Your array already contains exactly the arguments, so go for `keyframes.reduce(function(chain, cur) { return chain.to(cur); }, createjs.Tween.get(circle));` – Bergi Feb 19 '16 at 00:09
  • Sorry I haven't mentioned this, but I am going to change the values. In my example given above, I have 4 as the increment, and I need to do it 4 times. However, I am going to be using many different increments, and I don't want to hardcode it for each of them. This is why I need to have the eval function to run the whole thing. – Ron Feb 19 '16 at 03:03
  • 1
    @Ron He has the number 4 in the above code once. You can move this code to a function and provide `4/112/42/whatevs` as an argument. eval is **almost never** necessary. Exceptions include checking ES6 syntax support, and letting a JavaScript developer test his code. – Katana314 Feb 19 '16 at 03:14