在UIView上扭曲\弯曲效果?

我试图得到与图片中描述的效果类似的效果。 左侧的白色区域不在原始照片上,它将像素推开。 我已经尝试使用核心图像(提供了一些closures效果),但对我的需求太慢了。 我需要的效果是活泼的,所以我可以使它响应触摸。

在iOS sdk中是否有类似于UIVIew的animation效果? (我找不到任何closures)如果不是,有人可以提供如何使用OpenGL攻击这个? (代码示例比欢迎)

(这个效果在我写的开放源代码类中占有重要地位,所以如果有更简单的解决scheme,我不希望使用GPUImage等第三方类(我将这个类定义为依赖关系) )

在这里输入图像说明在这里输入图像说明在这里输入图像说明

我所做的是在我的OpenGL坐标中绘制一个矩形网格点。 (我用了一个50×50的网格)。 然后我在同一个坐标空间中定义一个或多个控制点。 我有一个一般的捏拉伸algorithm,我写了。 它需要一个控制点,一个半径和一个有符号整数来吸引/排斥网格点,并将其应用到我的网格坐标。 对于一个捏,它将网格点拉近控制点,一段时间后,将控制点推开。 控制点的变化最大,随着距离控制点的距离增加到半径值而下降。

一旦我改变了我的网格的坐标,然后我定义了一组三angular形条,绘制我的图像的整个(扭曲)的矩形区域。 我可以使用一个OpenGL绘图调用将整个纹理渲染到扭曲的网格上。 OpenGL负责拉伸图像像素,以适应控制点网格中的扭曲三angular形。 这是一个示例之前/之后的图像,使用几个控制点来创build一个胖脸的外观。 它显示网格,所以你可以看到它在做什么。 这是我的丑杯,提前道歉

在这里输入图像说明

而拉伸的图像:

在这里输入图像说明

在我的情况下,我希望沿着图像周边的控制点保持原位,只有图像的内部被扭曲,所以我添加了额外的代码逻辑来locking外围控制点。 这就是为什么图像的框架没有像你的形象推入。 这需要额外的代码,但是。

代码最终使用距离公式来计算每个网格点距离控制点多远,然后触发以计算出angular度,乘法以改变距离,然后更多的trig来计算每个网格的新位置-点。 因为我只是在改变一个50×50的控制点的网格,但它的速度足够跟上。

我们的应用程序Face Dancer在应用程序商店中是免费的。 (下载链接: App Store中的Face Dancer您可能需要下载并试用它(包括许多免费的变形,然后提供额外的变形作为应用程序内购买)还有一个付费的“ Plus“版本包含所有的变形。

当你用双指点击图像时,如果你正在运行Face Dancer,它将显示它用来创build变形的控制点的网格,以便你可以看到它在做什么。

有一个名为GLCameraRipple的OpenGL示例应用程序,包含在Xcode中,并从文档链接。 我build议以此为起点。 它从摄像头获取video并将其拖到屏幕上。 如果你触摸屏幕,它会扭曲图像,就好像屏幕是一个水池,你的手指正在造成涟漪。 它使用了我所描述的网格变形技术。

不幸的是,我不认为应用程序使用GLKit,这是一个更简单的方法来使用OpenGL ES 2.0。 GLKit提供了许多使用起来更方便的function,包括GLKViews和GLKViewControllers。

有一个新的伟大的开源课程,以一个macros伟的例子完全回答我的问题。 你可以在这里find它。

在这里输入图像说明

另一件你可能会看到的是在iOS 6中添加的核心图像孔失真filter(CIHoleDistortion)。它创build一个效果,而不是像你在找什么。 这里是一个从我写的testing程序生成的示例图像,非常接近。

但是,您会注意到Apple的filter会导致图像从框架的边缘“拉开”。 我认为这是一个错误,但让苹果公司解决它是一个好运气:

在这里输入图像说明

你显示的东西看起来像一个网格扭曲。 使用OpenGL可以简单明了,但是“OpenGL”非常简单,就像火箭科学一样简单。

我为我的公司编写了一个名为Face Dancerthat的iOS应用程序,它能够使用OpenGL从内置摄像头制作60 fps的网格videoanimation,但这是一项很多工作。 (它的funhouse镜像types改变面对 – 认为“胖摊”生活,加上其他许多效果。)

我会研究两种方法:首先,核心图像filter,其中包括一些像你似乎需要的失真filter。 主要的问题是这些在iOS中不可用(但在OSX上)。

其次,GPUImage库有一些你也可以使用的失真filter。 这里有一个问题,讨论如何使用它们:

如何使用OpenGL ES将变形应用于UIImage?