iOS拖动UIView,布料效果

Question

自从我看到这个菜单拖动概念以来,我真的很想知道如何实现它.所以我想知道如何在UIView中使用布料效果进行拖动？

我知道如何拖动物品,但是你如何给它们起涟漪作用呢？

(更好的形象:http://dribbble.com/shots/899177-Slide-Concept/attachments/98219)

Answer 1

简而言之:这真的很难.旧的Classics应用程序使用一系列预渲染的光滑纸张图像在其视图内容的简单转换下实现了这些线条,但正如您可以从这些屏幕截图中看到的(以及下面的那个 - 请注意底部的文本是仍然是直线,因为它正在进行基本的透视变换),效果相当有限.

Dribbble设计中显示的效果要复杂得多,因为它实际上正在对视图的内容进行揉搓,而不仅仅是像经典那样歪曲它; 我目前唯一可以想到在iOS上做这种确切效果的方法就是放入OpenGL并用网格扭曲内容.

一个更简单的选择是使用UIPageViewController,至少你会得到漂亮的iBooks风格的卷曲纸效果 - 它不是面料,但它比GL选项容易得多.

Answer 2

已经有一个开源的重新实现。

\n\n

\n\n

这篇博文：网格变换涵盖了私有CAMeshTransform. 它不是将 CALayer 视为简单的四边形，而是允许将 CALayer 转换为连接面的网格。Apple 通过此类实现卷页和 iBooks 翻页效果。
\n

\n\n

然而，该 API 根本不能很好地容忍格式错误的输入，并且 Apple 已将其保留为私有 API。

\n\n

如果您继续阅读该博客文章，您将在有关它是私有 API 的部分之后看到本节。

\n\n

\n

本着 CAMeshTransform 的精神，我创建了一个 BCMeshTransform，它复制了原始类的几乎所有功能。
\n ...
\n 如果没有对核心动画渲染服务器的直接、公共访问，我被迫使用 OpenGL 来实现。这不是一个完美的解决方案，因为它引入了原始类没有\xe2\x80\x99没有的一些缺点，但它似乎是当前唯一可用的选项。

\n

\n\n

实际上，他将内容视图渲染为 OpenGL 纹理，然后显示它。这让他可以随心所欲地摆弄它。

\n\n

包括这样的...

\n\n

\n

我鼓励您查看我为 BCMeshTransformView 制作的演示应用程序。它包含一些关于如何使用网格变换来丰富交互的想法，就像我对著名的 Dribbble 的非常简单但实用的看法。

\n

\n\n

什么著名的运球？这个：

\n\n

\n\n

该示例如下所示：

\n\n

\n\n

开源项目： https://github.com/Ciechan/BCMeshTransformView
\n窗帘效果示例实现： BCCurtainDemoViewController.m

\n\n\n\n

它是如何工作的？

\n\n

它设置了BCMeshTransformView一些灯光和视角。

\n\n

// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L59\nself.transformView.diffuseLightFactor = 0.5;\n\nCATransform3D perspective = CATransform3DIdentity;\nperspective.m34 = -1.0/2000.0;\nself.transformView.supplementaryTransform = perspective;\n

\n\n

然后使用 UIPanGestureRecognizer 跟踪触摸，并在每次用户手指移动时使用此方法构建新的网格变换。

\n\n

// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L91\nself.transformView.meshTransform = [BCMutableMeshTransform curtainMeshTransformAtPoint:CGPointMake(point.x + self.surplus, point.y) boundsSize:self.transformView.bounds.size];\n\n// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCMeshTransform%2BDemoTransforms.m#L14\n+ (instancetype)curtainMeshTransformAtPoint:(CGPoint)point boundsSize:(CGSize)boundsSize\n{\n    const float Frills = 3;\n\n    point.x = MIN(point.x, boundsSize.width);\n\n    BCMutableMeshTransform *transform = [BCMutableMeshTransform identityMeshTransformWithNumberOfRows:20 numberOfColumns:50];\n\n    CGPoint np = CGPointMake(point.x/boundsSize.width, point.y/boundsSize.height);\n\n    [transform mapVerticesUsingBlock:^BCMeshVertex(BCMeshVertex vertex, NSUInteger vertexIndex) {\n        float dy = vertex.to.y - np.y;\n        float bend = 0.25f * (1.0f - expf(-dy * dy * 10.0f));\n\n        float x = vertex.to.x;\n\n        vertex.to.z = 0.1 + 0.1f * sin(-1.4f * cos(x * x * Frills * 2.0 * M_PI)) * (1.0 - np.x);\n        vertex.to.x = (vertex.to.x) * np.x + vertex.to.x * bend * (1.0 - np.x);\n\n        return vertex;\n    }];\n\n    return transform;\n}\n

\n