如何增加(动画)两端正方形的宽度? [英] How to increase (animate) the width of the square on both ends?

问题描述

我创建了一个 40x40 的正方形，如上图所示.我有一个 4x40 的条带，我想用它来动画(增加)我的正方形的宽度，直到它在一秒钟内占据整个屏幕的宽度，无论正方形的位置如何.非常类似于两侧加载进度条.

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.

更新

我忘了说正方形是物理体，因此物理体也必须随着精灵的增加而增加.

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

推荐答案

你要做的就是使用SKAction.scaleXTo来实现你想要的:

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.

这背后的数学假设您的原始锚点是 (0.5,0.5)

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)

例如场景大小宽度为 100，精灵为 x 75

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

这基本上是说你的精灵在场景中的某个百分比，在这个例子中是 75%.因此，通过将锚点更改为 0.75，将会发生的情况是，当您扩大宽度时，左侧将比右侧填充得更快，因为锚点的左侧占宽度的 75%，而右侧边有 25% 的宽度.

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 .

假设我们将比例设置为 2，这意味着锚点的左侧现在为 150%，而右侧为 50%.

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

这篇关于如何增加(动画)两端正方形的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！