对UIView的扭曲\弯曲效果？

Question

我试图获得与图片中描述的效果类似的效果.左边的白色区域是不是在原来的照片,它推动像素的路程.我尝试过使用Core Image(它为此提供了一些近距离效果),但它对我的需求来说太慢了.我需要效果很快,所以我可以让它对触摸做出反应.

在iOS sdk中是否存在一个与UIVIew类似的关闭效果\动画？(我找不到任何东西)如果没有,有人可以提供如何使用OpenGL攻击它吗？(代码示例非常受欢迎)

(这个效果将在我正在编写的开源类中占据重要位置,因此如果有更简单的解决方案可用,我宁愿不使用GPUImage等第三方类(我将此类作为依赖项免费) )

Answer 1

沙

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

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

拉伸的图像:

在我的情况下,我希望沿着图像周边的控制点保持在原位,并且只有图像的内部被扭曲,所以我添加了额外的代码逻辑来将周边控制点锁定到位.这就是为什么图像的框架没有像你的图像那样被推入的原因.但这需要额外的代码.

代码最终使用距离公式计算每个网格点距控制点的距离,然后触发三角形以计算角度,乘以更改距离,然后使用更多触发来计算每个网格的新位置-点.因为我只改变了一个50x50的控制点网格,但它的速度足够快.

我们的应用程序Face Dancer在应用商店免费提供.(从以下链接下载:App Store中的Face Dancer你可能想要下载它并尝试一下.(它包括一些免费的变形,然后提供额外的变形作为应用程序内购买)还有一个付费的"加上"包含所有变形的版本.

如果您在两个手指上双击图像时运行Face Dancer,它会显示用于创建变形的控制点网格,以便您可以看到它正在做什么.

有一个名为GLCameraRipple的OpenGL示例应用程序,它包含在Xcode中并从文档中链接.我建议把它看作一个起点.它需要来自摄像机的视频输入并将其绘制到屏幕上.如果你触摸屏幕,它会扭曲图像,好像屏幕是一个水池,而你的手指正在引起涟漪.它使用像我描述的网格扭曲技术.

不幸的是,我不认为该应用程序使用GLKit,这是一种使用OpenGL ES 2.0的更简单的方法.GLKit提供了许多使其更易于使用的功能,包括GLKViews和GLKViewControllers.

Answer 2

有一个新的伟大的开源类,完整地用一个很好的例子来回答我的问题.你可以在这里找到它.