iOS中的粘糊糊效果[关闭]答案

【问题标题】：Gooey Effect in iOS [closed]iOS中的粘糊糊效果[关闭]
【发布时间】：2017-01-28 13:16:40
【问题描述】：

我正在做一个小项目，我希望两个圆圈通过粘糊糊的效果连接起来。我已经在网上安静地搜索了很多，并以标签栏或侧边栏菜单的形式遇到了一些示例，但这都是固定的，而不是我想要的。

我基本上想要的是following。所以有一个圆圈，如果我将它拉近另一个圆圈，它就会卡在一起，也称为粘糊糊效果。

一个代码示例是最好的，但是如何做到这一点的方向/方法也会帮助我。

【问题讨论】：

因此，您希望在用户与该圈子交互时产生这种效果，然后在两个圈子相遇或离开时产生这种效果。对吗？
计算当前形状的贝塞尔曲线点可以通过elementary geometry来完成；我建议将阅读作为一个好的开始。
也许你可以从这个技巧中得到启发：github.com/yoavlt/LiquidFloatingActionButton
@holex，你是说你有一种从曲线推导出贝塞尔曲线控制点的通用方法吗？我可以看到您发布的链接如何让您找到两个圆圈的区域，这些区域将被“吸引”到另一个圆圈（假设两个圆圈在它们实际重叠之前开始扭曲。）但我一直想知道是否有一种从曲线上的“局部最大值和最小值”点导出三次贝塞尔曲线控制点的方法。你的帖子暗示有这样的方法。
而且，@holex，我可以看到您如何使用外切线来找到每个圆上的点，您将从圆弧过渡到“粘性”圆开始的曲线满足，但是您将如何计算贝塞尔控制点，以便在形状从每个圆过渡到圆相交的曲线的点处没有“扭结”？

标签： ios animation

【解决方案1】：

有趣的问题。

在我的脑海中，这是我可能的处理方式：

计算两个圆的交点（我找到了这个链接：Circle-circle intersection points）

计算每个圆相交部分的圆弧范围。

将这些圆弧范围扩大几度。为每个圆的其余部分定义弧（将被绘制为“非粘性”的部分）

使用 trig 和 Catmull-Rom splines，为每个圆圈的外部“非粘性”部分创建一个封闭路径。

Catmull-Rom 算法应该使用看起来很像您显示的“粘糊糊”的圆的平滑曲线来填充 2 个部分圆之间的间隙。

我在 github 上有一个项目，其中包含用于从一系列点创建 Catmull-Rom 样条的 Swift 代码：Trochoid demo

该项目创建开放曲线，而不是封闭路径。使用 Catmull-Rom 样条线创建平滑闭合路径的技术略有不同。我有另一个名为RandomBlobs（用Objective-C 编写）的Github 项目，它创建了平滑的闭合路径。您应该能够弄清楚如何更改 Swift 代码以从 Objective-C 代码创建封闭路径。自从我写了 RandomBlobs 代码以来已经很久了，我不记得我到底做了什么。

我不确定我上面描述的方法是否足够快以实时绘制，但我敢打赌。 TrochoidDemo 项目对每个动画帧都进行了 lot 的触发，并且它的动画非常流畅。如果您的项目不够流畅，您可能需要进行一些优化。

【讨论】：

听起来像是一种有趣的数学方法。去阅读这个，看看我是否可以解决一些问题。我不太确定我是否在编程方面如此先进，但想看看我是否能想出一些解决方案。没想到它会变得这么困难，在网络上它只是一些 svg 过滤器哈哈。谢谢你给我一些把手！我真的很感激，因为这个问题太宽泛了，不知道如何让它更具体，我会把你的标记为正确答案。 :)
我确实注意到，在您的示例中，两个圆圈在实际接触之前就开始扭曲。正如@holex 所建议的那样，使用内部切线来选择贝塞尔曲线的端点，将是获得这种效果的好方法，尽管我不确定如何从圆平滑过渡到圆没有扭结的贝塞尔曲线。
@DuncanC，是的，这是一个好的开始，但实际的最终解决方案要简单得多；贝塞尔曲线需要什么？四个中心点，三个半径；然后您将编写连接中心的线性方程，然后您可以通过按比例划分向量来计算这些线上的四个切点；如果您拥有所有这些，建立贝塞尔曲线只是小菜一碟，您甚至不需要贝塞尔曲线的控制点，因为您将仅绘制 4 条具有起始角和结束角的规则弧。初等几何。你的随机猜测会让 OP 发疯。