如何增加(动画化)正方形两端的宽度? [英] 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)

E.G.场景大小宽度为100，子画面尺寸为x 75

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

这基本上是在说您的精灵在场景中所占的百分比，在本例中为75％.因此，通过将锚点更改为.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屋！