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 width of the whole screen within a second, regardless of the square's position. Quite similar to that of a progress bar loading on both sides.

UPDATE

I forgot to mention that the square is a physics body, hence the physics body must also increase as the sprite increases.

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%.