如何创建圆形物体进入和分离厚物质的效果

Question

基于下面的图像(我使用不同颜色的圆和平面,所以他们可以看到,但最终颜色将是相同的),使用Swift和Spritekit,我试图创建一个圆形对象进入的效果厚物质(不一定是粘性的)并与厚物质分离.基本上,当圆形物体分离时,它会在形成圆形时从平坦表面拉开.我想使用图像动画帧,但由于对象是具有物理主体的SKSpriteNodes,因此这将使得对象与动画的碰撞非常困难.另一种方法是使用CAAnimation,但我不知道如何将这与SKSpriteNodes与物理实体结合起来.如何使用上述任何方法或不同方法创建此分离效果？

UPDATE

下图显示了当圆形物体进入厚物质直至其浸没时,厚物质表面的变化.

Answer 1

从高层次的理解来看，有两种方法可以做到这一点。

1. 糟糕的方法（但当流体具有纹理时效果更好）：提前创建精灵表，然后覆盖 SKSpriteNode 对象的另一个子对象。当球与表面之间的距离小于某个值时，动画精灵中的帧将是球与表面之间距离的函数。所需的距离范围（范围）必须映射到精灵帧编号（frameIndex）。f(范围) = 帧索引。线性插值在这里会有所帮助。稍后将详细介绍插值。

2. 正确的方法：使流体成为曲线对象，然后通过初始状态、中间状态和最终状态之间的线性插值对曲线上的点进行动画处理。这将需要三条曲线，每条曲线具有相同的点数。设初始流体状态为F1。型号F1点为静态流体。设球半浸没时的流体状态为F2。F2 模型看起来就像球以最大宽度浸入水中。当球浸没 75% 时，流体状态为 F3。请注意，当球完全浸没时，流体看起来没有变化。这就是为什么当球浸没 75% 时，它具有最大的表面张力来抓住球。就 SpriteKit 而言，您可以使用这些对象：

   CGMutablePathRef path = CGPathCreateMutable();
   CGPathMoveToPoint(path, NULL, 0, 0);
   CGPathAddQuadCurveToPoint(path, NULL, 50, 100, 100, 0);
   CGPathAddLineToPoint(path, NULL, 50, -100);
   CGPathCloseSubpath(path);
   
   SKShapeNode *shape = [[SKShapeNode alloc]init];
   shape.path = path;
   

然后，即使您的项目是 2D 项目，也可以使用 3D 向量的向量叉积来检测球何时位于流体外部。

 Ball Vector (Vb)
    ^
    |
(V) O--->  Closest Fluid Surface Vector (Vs)

V = Vb x Vs

然后看看 V 的 Z 分量，称为 Vz。如果 (Vz < 0)，则球位于流体外部： 创建变量 t：

t = distOfBall/radiusOfBall

然后对于流体形状中的每个有序点执行以下操作：

newFluidPointX = F1pointX*(t-1) + F2pointX*t
newFluidPointY = F1pointY*(t-1) + F2pointY*t

如果 Vz > 0)，则球位于流体内部：

t = -(((distOfBall/radiusOfBall) + 0.5)^2)  *4 + 1
newFluidPointX = F2pointX*(t-1) + F3pointX*t
newFluidPointY = F2pointY*(t-1) + F3pointY*t

这是可行的，因为任何两个形状都可以使用插值混合在一起。参数“t”充当两个形状之间混合的百分比。

实际上，只要点数相同，您就可以在任意两个形状之间创建无缝混合。这就是好莱坞电影中男人变身狼的方式，或者男人变身水坑的方式。这些效果的唯一原理是插值。插值是一个非常强大的工具。它定义为：

    L = A*(t-1) + B*t
    where t is in between 0.0 and 1.0
    and A and B is what you are morphing from and to.

有关插值的更多信息，请参阅： Wiki 文章

供进一步研究。如果您正在考虑对任何动态形状进行动画处理，我会考虑了解贝塞尔曲线。Pomax 有一篇关于这个主题的精彩文章。尽管许多框架都有曲线，但对它们的工作方式有一个总体的了解将使您能够广泛地操纵它们或在框架缺乏的地方推出您自己的功能。她是Pomax的文章：

曲线入门

祝你进步顺利:)