How to increase (animate) the width of the square on both ends?

Question

I have created a square that is 40x40, as shown above. I have a 4x40 strip that I\'d like to use to animate (increase) the width of my square till it takes the the

Answer 1

What you want to do is use SKAction.scaleXTo to achieve what you are looking for:

SKAction.scaleXTo(sceneWidth / spriteWidth, duration: 1).  

Now if you want the left and right side to not scale evenly, but instead reach both edges at the same time, what you can do is change the anchor point.

The math behind this assumes that your original anchor point is (0.5,0.5)

sprite.anchorPoint = CGPointMake(sprite.position.x / scene.width,sprite.anchorPoint.y)

E.G. Scene size width is 100, sprite is at x 75

What this is basically saying is that your sprite is at some percentage of the scene, in case of the example, 75%. so by changing the anchor point to .75, what is going to happen is the left side will fill faster than the right side when you are expanding your width since the left side of the anchor point has 75% of the width, and the right side has 25% of the width .

Lets say we set the scale to 2, that means the left side of the anchor point will now be at 150%, while the right side will be at 50%.

Answer 2

In general, assuming the origin of your objects are in the top-left (or at least the left, since we're only changing things on one axis) if you set start_x to the original x position of your square, start_width to its width, target_x to the x position of your strip, and target_width to its width, then:

x = start_x + (target_x - start_x) * a;

and

width = start_width + (target_width - start_width) * a;

And as a goes from 0.0 to 1.0, x and width will grow to match the strip.

Hope this helps.